HTML5语义化标签
2016-08-05 12:53
447 查看
引言:最近刚从“度假郊区”出来,各种刷面试题,基本都是理论基础,以及运用基础理论进行实践运用的内容,其中“什么是语义化?”、“说说你对语义化的理解?”积累了很久的笔记看来要整理一下了…
博文借鉴:
web前端教程:21个新的语义化标签,你撸过几个?
HTML 5的革新——语义化标签(一):http://www.html5jscss.com/html5-semantics-section.html
看过一个比较形象的例子:
盖一栋房子的时候,有的地方该用砖头,有的部分该用瓷片,还有的地方得用水泥糊上,这样盖出来房子才会结实,整洁和美观。
如果硬是要瓷片替代砖头,房子勉强也能盖起来,但是这样的房子不牢固,容易倒塌,外观也不好看。
同样,生活很多事物都有相似相同之处!该用什么标签表示就用什么标签表示,结构良好,更易人和搜索引擎理解。还有一点,就是便于开发和维护啊,看过好多网页结构,各种想吐槽好吗?各种混乱不堪,外观表现的任务交由css去实现就行啦,不要为了外观表现而布局!
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
简记:“裸奔”时结构清晰;SEO搜索;广泛设备解析;团队开发维护标准化!
不要使用样式化标签,如font、b、….等等等,完全可以用css实现样式(再说HTML5中基本将此类“样式化标签”废除了!)
强调文本,尽量使用strong标签加强强调,em标签设置斜体
表格书写规范:标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
表单域要用fieldset标签包起来,并用legend标签说明表单的用途;(说实话,这个倒真没怎么注意到!)
每个input标签对应的说明文本都需要使用label标签,并且通过id属性和相对应的input关联起来。
1.header:标签定义“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。
或
用法:
可以是“网页”或任意“section”的头部部分;
没有个数限制。
如果hgroup或h1-h6自己就能工作的很好,那就不要用header。
2.nav:定义导航链接的部分。
用法:
用在整个页面主要导航部分上,不合适就不要用nav元素;
可用作页面导航的链接组,并不是所有的链接组都要放进nav元素中,只需将主要、基本的链接组放进其中;
注意:例如,在页脚中通过会有一组链接,包括服务条款,首页,版权声明等,使用footer元素是最恰当的。
具体用途:传统导航条、侧边栏导航、业内导航、翻页操作等
3.footer标签:代表“网页”或“section”的页脚。
通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。
如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
用法:
可以是“网页”或任意“section”的底部部分;
没有个数限制,除了包裹的内容不一样,其他跟header类似。
多用于包含服务条款,友情链接、作者信息、版权信息等
4. hgroup元素:“网页”或“section”的标题
当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合
用法:
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签
5.section标签:定义文档中含有标题和段落的区域。(强调分段或分块)
用法:
article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div
当容器需要标题和内容时,建议使用section标签,若只是普通的容器,应该用div元素较好!section标签非div!
6.article:代表独立、完整、可独自被外部引用的内容(博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容);(强调的是独立性!可含有完整的标题、内容、脚注)
用法:定义一个独立完整的内容部分(可包含标题,内容,脚注)时使用!
article、section间的相互嵌套关系:
拜读博文:http://www.html5jscss.com/html5-semantics-section.html
7. aside标签:表示当前页面或文章的附属信息部分,可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。
书籍中的定义很长很绕,在收集之后,发现主要有两种用法:(啃下概念)
1.用于article标签之内,此时表示的是该独立内容的附属信息部分;
2.用于article标签之外,此时作为页面或站点全局的附属信息部分。
用法:
aside在article内表示主要内容的附属信息
在article之外则可做侧边栏,页面或站点全局的附属信息部分
如果是广告,其他日志链接或者其他分类导航也可以用
(一句话概括:不同的位置表示为对应区域的附属信息!)
8. figure标签:规定独立的流内容(图像、图表、照片、代码等等)。
figcaption标签:用于元素定义figure的标题。
1.一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。
2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。
9. time标签:定义时间或日期
以上为实践操作中可能会用到的标签,HTML5还新增了很多标签,但因为用途与浏览器兼容性问题,还是为人所慎用的!待拓展!
10. address标签:代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。
表示文档或文章的作者/拥有者的联系信息,在body标签中表示文档的作者的联系信息;在article标签中表示文章作者的联系信息;
W3School示例文档:http://www.w3school.com.cn/tags/tag_address.asp
用法:
标签不应该用于描述通讯地址,除非它是联系信息的一部分。
元素通常连同其他信息被包含在 footer 元素中。
总结:掌握语义化含义、作用以及应当注意的细节,HTML5中常用的语义化新标签!知识点不在于多,而研究透彻应学以致用!
你如今的不如意,可能是你还不够努力!
加油吧!致各位摸爬滚打一路坚持下来的前端汪~
博文借鉴:
web前端教程:21个新的语义化标签,你撸过几个?
HTML 5的革新——语义化标签(一):http://www.html5jscss.com/html5-semantics-section.html
HTML语义化:
每个HTML标签都有自己特定含义(语义),语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。看过一个比较形象的例子:
盖一栋房子的时候,有的地方该用砖头,有的部分该用瓷片,还有的地方得用水泥糊上,这样盖出来房子才会结实,整洁和美观。
如果硬是要瓷片替代砖头,房子勉强也能盖起来,但是这样的房子不牢固,容易倒塌,外观也不好看。
同样,生活很多事物都有相似相同之处!该用什么标签表示就用什么标签表示,结构良好,更易人和搜索引擎理解。还有一点,就是便于开发和维护啊,看过好多网页结构,各种想吐槽好吗?各种混乱不堪,外观表现的任务交由css去实现就行啦,不要为了外观表现而布局!
语义化的意义与作用
去掉或者丢失样式的时候能够让页面呈现出清晰的结构用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
简记:“裸奔”时结构清晰;SEO搜索;广泛设备解析;团队开发维护标准化!
语义化都注意什么?
尽可能少用无语义的div、span标签等;使用HTML5中新增的较多强语义化标签,;不要使用样式化标签,如font、b、….等等等,完全可以用css实现样式(再说HTML5中基本将此类“样式化标签”废除了!)
强调文本,尽量使用strong标签加强强调,em标签设置斜体
表格书写规范:标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
表单域要用fieldset标签包起来,并用legend标签说明表单的用途;(说实话,这个倒真没怎么注意到!)
每个input标签对应的说明文本都需要使用label标签,并且通过id属性和相对应的input关联起来。
HTML5语义化标签:
之前整理过的一个知识点:html5简记(新增元素与属性)1.header:标签定义“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。
<header> <h1>毕业生实习</h1> <span>2016/08/05</span> </header> <!--之前使用的是无语义的div+class--> <div class='header'>...</div>
或
<header> <hgroup> <h1>网站标题</h1> <h2>网站副标题</h2> </hgroup> </header>
用法:
可以是“网页”或任意“section”的头部部分;
没有个数限制。
如果hgroup或h1-h6自己就能工作的很好,那就不要用header。
2.nav:定义导航链接的部分。
<nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">xxx</a></li> <li><a href="#">xxx</a></li> <li><a href="#">xxx</a></li> </ul> </nav> <!--之前使用的是无语义的div+class--> <div class='nav'>...</div>
用法:
用在整个页面主要导航部分上,不合适就不要用nav元素;
可用作页面导航的链接组,并不是所有的链接组都要放进nav元素中,只需将主要、基本的链接组放进其中;
注意:例如,在页脚中通过会有一组链接,包括服务条款,首页,版权声明等,使用footer元素是最恰当的。
具体用途:传统导航条、侧边栏导航、业内导航、翻页操作等
3.footer标签:代表“网页”或“section”的页脚。
通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。
如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
<footer> 作者:xxxx <br /> Copyright © xxx.All rights reserved. </footer> <!--之前使用的是无语义的div+class--> <div class='footer'>...</div>
用法:
可以是“网页”或任意“section”的底部部分;
没有个数限制,除了包裹的内容不一样,其他跟header类似。
多用于包含服务条款,友情链接、作者信息、版权信息等
4. hgroup元素:“网页”或“section”的标题
当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合
<hgroup> <h1>主标题</h1> <h2>HTML 5</h2> </hgroup>
用法:
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签
5.section标签:定义文档中含有标题和段落的区域。(强调分段或分块)
<section> <h1>section要包含标题</h1> <p>section要包含内容...</p> </section>
用法:
article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div
当容器需要标题和内容时,建议使用section标签,若只是普通的容器,应该用div元素较好!section标签非div!
6.article:代表独立、完整、可独自被外部引用的内容(博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容);(强调的是独立性!可含有完整的标题、内容、脚注)
<article> <header> <h1>标题处</h1> </header> <p>内容描述</p> <footer>脚部声明标注</footer> </article>
用法:定义一个独立完整的内容部分(可包含标题,内容,脚注)时使用!
article、section间的相互嵌套关系:
拜读博文:http://www.html5jscss.com/html5-semantics-section.html
7. aside标签:表示当前页面或文章的附属信息部分,可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。
书籍中的定义很长很绕,在收集之后,发现主要有两种用法:(啃下概念)
1.用于article标签之内,此时表示的是该独立内容的附属信息部分;
<article> <p>article内容区</p> <aside> <span>附属信息1</span> <span>附属信息2</span> <span>附属信息3</span> </aside> </article>
2.用于article标签之外,此时作为页面或站点全局的附属信息部分。
<aside> <h1>附属信息标题</h1> <a href="#">附属信息...</a> <a href="#">附属信息...</a> <a href="#">附属信息...</a> </aside>
用法:
aside在article内表示主要内容的附属信息
在article之外则可做侧边栏,页面或站点全局的附属信息部分
如果是广告,其他日志链接或者其他分类导航也可以用
(一句话概括:不同的位置表示为对应区域的附属信息!)
8. figure标签:规定独立的流内容(图像、图表、照片、代码等等)。
figcaption标签:用于元素定义figure的标题。
1.一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。
2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。
<figure> <figcaption>figure的标题</figcaption> <img src="pic.jpg" alt="..."> </figure>
9. time标签:定义时间或日期
<p>定义时间...<time>9:00</time></p> <p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>
以上为实践操作中可能会用到的标签,HTML5还新增了很多标签,但因为用途与浏览器兼容性问题,还是为人所慎用的!待拓展!
10. address标签:代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。
表示文档或文章的作者/拥有者的联系信息,在body标签中表示文档的作者的联系信息;在article标签中表示文章作者的联系信息;
W3School示例文档:http://www.w3school.com.cn/tags/tag_address.asp
用法:
标签不应该用于描述通讯地址,除非它是联系信息的一部分。
元素通常连同其他信息被包含在 footer 元素中。
总结:掌握语义化含义、作用以及应当注意的细节,HTML5中常用的语义化新标签!知识点不在于多,而研究透彻应学以致用!
你如今的不如意,可能是你还不够努力!
加油吧!致各位摸爬滚打一路坚持下来的前端汪~
相关文章推荐
- 一个关于if else容易迷惑的问题
- 微信搜一搜迈出新的一步,好戏来了
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧