HTML5的新语义化的标签

àì夳堔傛蜴生んèń 2022-04-17 05:06 379阅读 0赞

原文出处：[https://www.cnblogs.com/zjf-1992/archive/2016/12/16/6182406.html][https_www.cnblogs.com_zjf-1992_archive_2016_12_16_6182406.html]   
更多标签：[H5新标签--语义化标签][H5_--] 和 [什么是HTML语义化标签？常见HTML语义化标签大全][HTML_HTML]

在HTML5之前采用HTML+CSS文档结构写法

【**ID选择器说明 id选择器**——用于标识页面上特定元素*(比如站点导航、页眉、页脚)*而且必须唯一; 也可以用来标识持久结构性元素*（如主导航、内容区域）*】

【**class选择器说明 class类选择器**——可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目】

![819169-20161216135042870-48966574.gif][]

*Diagram illustrates a typical two-column layout marked up using divs with id and class attributes.**It contains a header, footer, and horizontal navigation bar below the header.*

*The main content contains an article and sidebar on the right.*

*（翻译：上图展示典型的两列布局标记使用div的id和class类属型.它包含一个页眉，页脚，横向的导航栏.主要内容包含一篇文章和右边的侧边栏 ）*

缺点 1.不利于SEO搜索引擎对页面内容的抓取

2.文档结构定义不明确

于是HTML5出现，解决上述问题，专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签

![819169-20161216135538276-1022367566.gif][]

* The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.*

*（翻译:div元素被替换成新的元素：header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , and footer 页脚.）*

HTML5结构代码

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>header</code><code>&gt;...&lt;/</code><code>header</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>nav</code><code>&gt;...&lt;/</code><code>nav</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>article</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>section</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>...</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>section</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>article</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>aside</code><code>&gt;...&lt;/</code><code>aside</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>footer</code><code>&gt;...&lt;/</code><code>footer</code><code>&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

对HTML5语义化标签解释

<main> 定义主要内容

<header> 页眉，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;</code><code>header</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>hgroup</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code><code>&gt;页眉主标题&lt;/</code><code>h1</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code><code>&gt;页眉副标题&lt;/</code><code>h1</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>hgroup</code><code>&gt;</code> <code>&lt;/</code><code>header</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<nav> 定义**主体模块或者导航链接**的集合

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;</code><code>nav</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>ul</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>a</code> <code>href="#"&gt;Home&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>a</code> <code>href="#"&gt;About&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>a</code> <code>href="#"&gt;Contact&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>ul</code><code>&gt;</code> <code>&lt;/</code><code>nav</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>&lt;</code><code>article</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>header</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>hgroup</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code><code>&gt;这是一篇介绍HTML 5结构标签的文章&lt;/</code><code>h1</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h2</code><code>&gt;HTML 5的革新&lt;/</code><code>h2</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>hgroup</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>time</code> <code>datetime="2011-03-20"&gt;2011.03.20&lt;/</code><code>time</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>header</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;文章内容详情&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;/</code><code>article</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<aside>与一个和其余页面**内容几乎无关的部分**，被认为是独立于该内容的一部分并且可以**被单独的拆分出来**而**不会使整体受影响**。其通常表现为**侧边栏或者嵌入内容。**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>&lt;</code><code>aside</code> <code>id="sidebar"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>section</code> <code>class="widget"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h4</code> <code>class="widgettitle"&gt;Sidebar&lt;/</code><code>h4</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>ul</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>a</code> <code>href="#"&gt;WordPress&lt;/</code><code>a</code><code>&gt; (3)&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>a</code> <code>href="#"&gt;Design&lt;/</code><code>a</code><code>&gt; (23)&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>a</code> <code>href="#"&gt;Design &lt;/</code><code>a</code><code>&gt;(18)&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>ul</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>section</code><code>&gt;</code> <code>&lt;/</code><code>aside</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<section>表示文档中的一个**区域（或节）**，比如，内容中的**一个专题组**，一般来说会有包含一个**标题（heading）**。

一般通过是否包含一个标题** ([`<h1>`][h1]\-[`<h6>`][h6] element)** 作为子节点 来 辨识每一个<section>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>&lt;</code><code>section</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code><code>&gt;这里是section标题...&lt;/</code><code>h1</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;这里是section标题对于内内容...&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;/</code><code>section</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**`<figure> 元素`代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>&lt;!-- Just a figure --&gt;</code> <code>&lt;</code><code>figure</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>img</code> <code>src="figure.png" alt="figure.png图片按" title="figure图片"&gt;</code> <code>&lt;/</code><code>figure</code><code>&gt;</code> <code>&lt;</code><code>p</code><code>&gt;段落&lt;/</code><code>p</code><code>&gt;</code> &nbsp; <code>&lt;!-- Figure with figcaption --&gt;</code> <code>&lt;</code><code>figure</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>img</code> <code>src="figure.png" alt="figure.png图片按" title="figure图片"&gt;picture"&gt;&nbsp;&nbsp;&nbsp; </code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>figcaption</code><code>&gt;figure图片描述&lt;/</code><code>figcaption</code><code>&gt;</code> <code>&lt;/</code><code>figure</code><code>&gt;</code> <code>&lt;</code><code>p</code><code>&gt;段落.....&lt;/</code><code>p</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<footer> 定义了整个页面或其中一部分的**页脚（并且通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息）**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>&lt;</code><code>footer</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>原创作者;版权信息;联系方式;文档相关链接等...</code> <code>&lt;/</code><code>footer</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<hgroup> 标签用于对**网页或区段**（section）的**标题进行组合**。使用新的HTML5元素`hgroup`，可以为`header`元素添加更多的信息。**（头部主标题/副标题）**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>&lt;</code><code>hgroup</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code><code>&gt;Main title&lt;/</code><code>h1</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>h2</code><code>&gt;Secondary title&lt;/</code><code>h2</code><code>&gt;</code> <code>&lt;/</code><code>hgroup</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

【参考资料】

http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/

https://samdutton.wordpress.com/2015/04/02/high-performance-html/

https://developer.mozilla.org/CN/docs/Web/HTML/Element

http://www.cnblogs.com/houodeit/archive/2012/05/27/2519798.html

http://alistapart.com/article/previewofhtml5

https://dev.w3.org/html5/html-author/\#syntactic-overview HTML5 API

[https_www.cnblogs.com_zjf-1992_archive_2016_12_16_6182406.html]: https://www.cnblogs.com/zjf-1992/archive/2016/12/16/6182406.html
[H5_--]: https://blog.csdn.net/MYTLJP/article/details/78231369
[HTML_HTML]: https://blog.csdn.net/eeeecw/article/details/80591511
[819169-20161216135042870-48966574.gif]: /images/20220417/33a130a1264549ada9e419662d54a972.png
[819169-20161216135538276-1022367566.gif]: /images/20220417/f59581979a2947ce899f976bd7d76594.png
[h1]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/h1
[h6]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/h6