HTML系列之语义化标签（H5)
文章の目录
- 1、什么是标签语义化
- 2、新增的语义化标签
- 3、header
- 3.1、属性值
- 3.2、示例
- 3.3、注意点
- 4、nav
- 4.1、属性值
- 4.2、示例
- 4.3、注意点
- 5、article
- 5.1、属性值
- 5.2、示例
- 5.3、注意点
- 6、section
- 6.1、属性值
- 6.2、示例
- 6.3、注意点
- 7、aside
- 7.1、属性值
- 7.2、示例
- 7.3、注意点
- 8、footer
- 8.1、属性值
- 8.2、示例
- 8.3、注意点
- 9、address----H4.01
- 9.1、属性值
- 9.2、示例
- 9.3、注意点
- 10、time
- 11、使用语义化标签的注意
- 写在最后
1、什么是标签语义化
以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
<div class=“header”>div><div class=“nav”>div> <div class=“content”>div><div class=“footer”>div>
2、新增的语义化标签
header— 头部标签nav— 导航标签article— 内容标签section— 块级标签aside— 侧边栏标签footer— 尾部标签
3、header
3.1、属性值
此元素仅拥有全局属性。
3.2、示例
<header><h1>主页标题h1><img src="mdn-logo-sm.png" alt="MDN logo">header>
3.3、注意点
、或另一个成为子元素；
4、nav
元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
4.1、属性值
这个元素只包含全局属性。
4.2、示例
<nav><ul><li><a href="#">Homea>li><li><a href="#">Abouta>li><li><a href="#">Contacta>li>ul>nav>
4.3、注意点
- nav 开始标签和结束标签都不能省略；
- 并不是所有的链接都必须使用
元素，它只用来将一些热门的链接放入导航栏，例如元素就常用来在页面底部包含一个不常用到，没必要加入的链接列表； - 一个网页也可能含有多个
元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表； - 对于屏幕阅读障碍的人，可以使用这个元素来确定是否忽略初始内容；
5、article
元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
5.1、属性值
此元素只具有全局属性。
5.2、示例
<article class="film_review"><header><h2>Jurassic Parkh2>header><section class="main_review"><p>Dinos were great!p>section><section class="user_reviews"><article class="user_review"><p>Way too scary for me.p><footer><p>Posted on<time datetime="2015-05-16 19:00">May 16time>by Lisa.p>footer>article><article class="user_review"><p>I agree, dinos are my favorite.p><footer><p>Posted on<time datetime="2015-05-17 19:00">May 17time>by Tom.p>footer>article>section><footer><p>Posted on<time datetime="2015-05-15 19:00">May 15time>by Staff.p>footer>article>
5.3、注意点
- article 开始标签和结束标签都不能省略；
元素不能成为元素的子元素；- 每个
，通常包括标题（-
元素的子元素； - 当
元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中； 元素的作者信息可通过元素提供，但是不适用于嵌套的元素；元素的发布日期和时间可通过元素的 pubdate 属性表示；- 可以使用
元素的 datetime 属性来描述元素的发布日期和时间。请注意的 pubdate 属性不再是W3C HTML5标准；
6、section
元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
6.1、属性值
此元素只包含全局属性。
6.2、示例
<section><h1>Headingh1><p>Bunch of awesome contentp>section>
6.3、注意点
- section 开始标签和结束标签都不能省略；
- 一般通过是否包含一个标题 (
(en-US)-
； - 如果
元素的内容可以单独在多个媒体上发表，应该使用而不是； - 不要把
元素作为一个普通的容器来使用，这是本应该是的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。一般来说，一个应该出现在文档大纲中；
7、aside
元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
7.1、属性值
此元素只有全局属性。
7.2、示例
<article><p>迪斯尼电影<cite>海的女儿cite>（<cite>The Little Mermaidcite>）于 1989 年首次登上银幕。p><aside>在首次发行期间，该片便收获了 8700 万美元的票房。aside><p>更多有关该电影的信息…p>article>
7.3、注意点
- aside 开始标签和结束标签都不能省略；
不能是元素的后代；- 不要使用
元素去尾随括号内的文本，因为这种文本被认为是主要流内容的一部分。
8、footer
元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
8.1、属性值
该元素仅包含全局属性。
8.2、示例
<footer>Some copyright info or perhaps some author info for an <article>?footer>
8.3、注意点
不能包含或者开始标签和结束标签都不能省略；元素必须不能是，元素的后代元素；元素内的作者信息应包含在元素中；元素不是章节内容，因此在outline中不能包含新的章节；
9、address----H4.01
元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
9.1、属性值
此元素只有全局属性。
9.2、示例
<address>You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.coma>.<br>If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmastera>.<br>You may also want to visit us:<br>Mozilla Foundation<br>331 E Evelyn Ave<br>Mountain View, CA 94041<br>USAaddress>
9.3、注意点
- 由
元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称； 可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在元素内，指明该文章的作者；- 子元素不能嵌套
元素, 不能是头部内容 (，，，，，，，不能是区块内容 (，，，), 不能是元素； - address 开始标签和结束标签都不能省略；
- 当表示一个和联系信息无关的任意的地址时，请改用
元素而不是元素； - 这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在
元素之中）； - 通常，
元素可以放在元素之中（如果存在的话）； - 虽然
元素看起来只是使用了或者元素的默认样式来渲染其中的文本，但是当处理联系信息时使用它更为合适，因为它表达了额外的语义信息；
10、time
该元素仍在设计和讨论中，这里就不在多讲了。
11、使用语义化标签的注意
- 语义化标签主要针对搜索引擎；
- 新标签可以使用一次或者多次；
- 在
IE9浏览器中，需要把语义化标签都转换为块级元素； - 语义化标签，在移动端支持比较友好；
- 另外，
HTML5新增的了很多的语义化；
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！