HTML&CSS基础学习笔记1.21-语义化标签
来源:互联网 发布:淘宝淘宝客服岗位职责 编辑:程序博客网 时间:2024/06/05 16:13
语义化标签
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。
HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx>看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。
HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签,这样一来,不管是谁都能看懂这块内容是什么。
例如:
<main>标签:表示文档中的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
查看下面这两段html和css代码,体会下里面的许多语义化的标签吧:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"> <title>语义化标签</title></head><body><!--页眉--><header> <!-- 导航 --> <nav><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li></ul></nav></header><!-- 主体 --><main> <!-- 文章 --> <article> <h1>大标题</h1> <!-- 节 --> <section> <h3>标题1</h3> <p>文章正文</p> </section> <!-- 节 --> <section> <h3>标题2</h3> <p>文章正文</p> </section> <!-- 节 --> <section> <h3>标题3</h3> <p>文章正文</p> </section> </article></main><!-- 与页面主体无关的内容 --><aside> 可显示广告、引用、侧边栏</aside><!-- 页脚 --><footer> <!-- 地址 --> <address> 显示底部地址 </address></footer></body></html>
body { text-align: center;}ul { list-style-type: none;}ul li { display: inline-block; margin-right: 20px;}article { margin-top: 50px;}section { margin: 30px 0 50px;}aside { position: fixed; top: 30%; width: 30%; padding: 10px; color: white; background-color: rgba(0, 0, 0, .3);}footer { height: 10%;}
更多学习内容,就在码芽网http://www.mayacoder.com/lesson/index
部分页面显示的结果如下:
0 0
- HTML&CSS基础学习笔记1.21-语义化标签
- HTML标签语义化-学习笔记
- HTML+CSS基础课程学习笔记-第二章 HTML标签
- HTML&CSS基础学习笔记1.19-DIV标签1
- HTML&CSS基础学习笔记1.20-DIV标签2
- HTML&CSS基础学习笔记1.26-input标签重置表单
- HTML语义化标签
- HTML语义化标签
- HTML标签语义化
- HTML语义化标签
- html语义化标签
- html标签语义化:
- HTML标签语义化
- HTML标签语义化
- HTML语义化标签
- HTML标签语义化
- HTML-标签语义化
- HTML标签语义化
- 二级mysql考试环境WampServer3.0环境搭建
- PHP中字符串超长的中英文混合截取
- 关于Linux/Mac上shell/vim设置
- Test
- Image Stride(内存图像行跨度)
- HTML&CSS基础学习笔记1.21-语义化标签
- 正则表达式实现文件的解析
- Openstack Nova 源码分析 — RPC 远程调用过程
- 计算机视觉牛人博客和代码汇总(全)
- Mysql启动失败
- Firefox下AutoProxy未被验证的解决办法
- MongoDB学习笔记(1)
- mysql中int(1)和int(11)区别
- ckeditor 获取hiddenfield 隐藏域的dom对象