HTML5语义化标签

1、HTML5简化的标签

（1）DOCTYPE文档声明

相较于之前的版本，HTML5没有指定具体版本，这就表示了最新的HTML版本。

（2）声明

HTML4.01中的meta声明决定了HTML文档中字符的编码方式，HTML5直接一个charset属性即可，

（3）标签

用来引入外部的CSS文件，在HTML4.01中

而在HTML5中无需type属性，浏览器会自动检测出CSS文本的类型。

（4）

而在HTML5中无需type属性，浏览器会自动检测出javascript文本的类型。

2、引入语义化元素的原因

先看HTML4.01中一般对于网站模板定义的结构，

	
页面标题
	
主导航区
	
侧边栏
	
主内容区
	
页脚区

可见布局容器都是由

构成，它们的区别都是用class来作用。因此引入语义化元素，它们有丰富的含义，可以让开发人员了解每部分功能，并且搜索引擎和视觉障碍人员使用的屏幕阅读器也能够方便的识别页面的每一部分。

	
页面标题
	
主导航栏
	
侧边栏
	
主内容区
	
页脚

3、语义化标签

新增的语义化标签

块标签	区块元素	article	header	footer	aside	section	nav
	内容分组标签	figure	figcaption	main
内联标签	文本级标签	time

1.

表示包含一个文档、页面、应用程序或网站中的一段独立的内容，也就是说，它能够独立地被发布或重新使用。可适用的地方有：一篇博客、一个论坛帖子、一篇新闻报道、一个用户评论...

2.

一般被放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题、简介等信息。

• 一个文档中可以包含多个header标签
• header标签不一定只能显示在页面的上方，它的内容决定该地方是否需要使用header标签
• 可以为body、article、section和aside增加header标签

3.

一般被放置在页面的底部，或者页面中某个区块元素的底部。

4.

表示页面的导航，可以通过导航连接到网站的其他页面，或当前页面的其他部分。搜索引擎和屏幕阅读器会根据nav标签确定网站内容，但并不是任何一组超链接都适合放在nav标签中，譬如登录、隐私权政策与使用条款...可实际去一些网站上检查，却发现大多都是使用div，很少用到这些，但新标准新趋势，学习学习没错。

5.

包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。可适用的地方有：页面侧边栏、广告、友情链接、文章引语（内容摘要）...

6.

一个主题性的内容分组，通常包含一个头部（header），也有可能包含一个尾部（footer）。

div 和 section 区别

• div应用更广泛，如果需要定义一个区域样式即可使用
• section包含一个明确的主题，通常含有一个标题

7.

显示页面的主题内容，每个页面只能包含一个main标签，main标签中不包含网站标题、log、主导航、版权声明等信息。

8.

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

9.

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

10.

表示一个日期，或者一个时间，或者同时表示一个日期和时间值。

    
这就是个测试
    2018年9月17日

datetime属性中格式固定的日期或时间值，可以被搜索引擎、屏幕阅读器等方便识别。标签中的文本只需要是用户识别的信息就可以，可以为“今天”、“一小时前”、“结婚纪念日”等，若没有datetime属性则其中的文本需要固定格式。

time格式

指定年月日	2018-09-17
指定年月	2018-09
指定时间（24小时制）	14：03：52
指定时间（24小时制）	14：03
指定日期和时间	2018-09-17 14：03：52
T表示时间，等同上	2018-09-17T14：03：52
Z表示使用UTC标准时间	2018-09-17T14:03Z

11.其他文本级标签

（1）i 标签

HTML4中已经存在的语义化标签，修饰文字样式，将文字显示为斜体文本。在HTML5中则表示为强调不同的情绪或声音，也可以表示为技术术语、生物分类、来自另一种语言的成语或习语、一个想法等...

（2）b 标签

HTML4中已经存在的语义化标签，修饰文字样式，将文字显示为粗体文本。在HTML5中则表示为文档中的关键字、商品名称等。

如果只想单纯的把文字的样式显示为斜体或者粗体，不建议使用这些语义化标签，更好的是在CSS中定义文字样式。

 

关注我吧

关注「前端一起学」公众号 ，让我们一起学前端，一起进步。