Html5基础之标签

前言

本文主要简单的记录了在学习Html5标签时自己的一些理解

正文

内容区块是指将HTML页面按语义分割后的单位。对于页面网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。html5提供的标签根据语义划分可以具体代表某个内容区块

ignore：在表现的效果来看基本和div展现的效果一致，因此从语义上划分并应用在页面中可以让页面结构清晰，阅读代码时很快明白代表的含义（html5中用于增强语义的一个标签而已。语义化有利于网页的SEO。）

article

article标签定义独立的内容。
article标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
article的潜在来源：

• 论坛帖子
• 博客文章
• 新闻故事
• 评论

可参考HTML5的article和section的区别
标签效果：经过简单的测试article跟div展现的效果一致，只不过它们代表的意义不同。看到article就知道它是一个独立的内容且这些内容是有内涵的向外界传达信息的（帖子、文章、说说、心情、故事，评论，请假条）

section

section标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

• section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段；
• 一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素
• section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素；
• 如果article、nav、aside元素都符合某条件，那么就不要用section元素定义；
• section元素中的内容可以单独存储到数据库中或输出到word文档中。

可参考HTML5的article和section的区别

看了section的介绍感觉它好可怜，给我一个感觉就是比上有余比下不足。article、nav、aside蕴含的情感比section丰富，因此能用article、nav、aside就不要用section。在html5中div作为一个容器而section却不能做为一个容器应用，它只不过是一个用来分块的可怜人

标签效果：section和div展现的效果一致都是块元素，具体代表的含义是分块

header

header具体玩法如下
- header 标签定义文档或者文档的一部分区域的页眉。
- header 元素应该作为介绍内容或者导航链接栏的容器。
- 在一个文档中，您可以定义多个header元素。
- header标签不能被放在footer、address 或者另一个 header 元素内部。

header可以作为一个容器，在header中使用nav标签，也可以放置在article标签中。
可参考：浅析HTML5中header标签的用法

标签效果：header和div展现的效果一致都是块元素，具体代表的含义是作为页面的页头或者文章的页头（标记定义一个页面或一个区域的头部）

nav

nav 标签定义导航链接的部分。
并不是所有的 HTML 文档都要使用到 nav 元素。nav 元素只是作为标注一个导航链接的区域。
在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

标签效果：nav和div展现的效果一致都是块元素，具体代表的含义是标记定义导航链接(只是html5中用于增强语义的一个标签而已。语义化有利于网页的SEO。)
可参考：HTML中nav实际上起了什么作用呢

aside

aside 标签定义article标签外的内容。
aside 的内容应该与附近的内容相关。
aside 的的内容可用作文章的侧栏
可参考：HTML5中aside标签的两种使用方法

标签效果：aside和div展现的效果一致都是块元素，具体代表的含义是文章的附属信息以及在文章之外作为侧栏（标记定义页面内容部分的侧边栏）

hgroup

hgroup标签被用来对标题元素进行分组。
当标题有多个层级（副标题）时，hgroup元素被用来对一系列 h1- h6元素进行分组。
可参考：html5知识点补充—hgroup元素的使用

标签效果：hgroup和div展现的效果一致都是块元素，具体代表的含义对标题进行分组，按照主要等级从上到下罗列

figure

figure 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

可参考：定义图文并茂的html5新标签-figure、figcaption
标签效果：figure 和li展现的效果一致都是块状元素且和左边有一定的空白，但是它没有li的黑色小点

figcaption

figcaption 标签为 figure 元素定义标题。
figcaption 元素应该被置于figure 元素的第一个或最后一个子元素的位置。

可参考：[定义图文并茂的html5新标签-figure、figcaption ]

标签效果：figcaption 和p展现的效果一致都是块状元素且和左边有一定的空白，但是它没有li的黑色小点

footer

footer 标签定义文档或者文档的一部分区域的页脚。
footer 元素应该包含它所包含的元素的信息。
在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
在一个文档中，您可以定义多个 footer 元素。

它和header相对应,可参考：HTML5 footer标签元素 html底部footer css布局教程

标签效果：footer和div展现的效果一致都是块状元素且在语义上表示页面或者文章的页脚

参考资料

Html中行内元素有哪些？块级元素有哪些？
浅析HTML5中header标签的用法
HTML5的article和section的区别
HTML中nav实际上起了什么作用呢
HTML5中aside标签的两种使用方法
html5知识点补充—hgroup元素的使用
定义图文并茂的html5新标签-figure、figcaption
HTML5 footer标签元素 html底部footer css布局教程