HTML5语义化标签上海迅速网络

13916016158

关注迅速公众平台

关注微信联系人

企业电话：021-64391578

HTML5语义化标签

1、HTML5简化的标签

（1）DOCTYPE文档声明

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

（2）<meta>声明

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

<meta charset="UTF-8">
（3）<link>标签

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

<link rel="stylesheet" type="text/CSS" href="xxx.css">
而在HTML5中无需type属性，浏览器会自动检测出CSS文本的类型。

（4）<script>标签

用于引入外部的JavaScript文档，HTML4.01中

<script type="text/javascript" src="xxx.js"></script>
而在HTML5中无需type属性，浏览器会自动检测出javascript文本的类型。

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

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

<body>
   <div class="header">页面标题</div>
   <div class="nav">主导航区</div>
   <div class="aside">侧边栏</div>
   <div class="main">主内容区</div>
   <div class="footer">页脚区</div>
</body>
可见布局容器都是由<div>构成，它们的区别都是用class来作用。因此引入语义化元素，它们有丰富的含义，可以让开发人员了解每部分功能，并且搜索引擎和视觉障碍人员使用的屏幕阅读器也能够方便的识别页面的每一部分。

<body>
   <header>页面标题</header>
   <nav>主导航栏</nav>
   <aside>侧边栏</aside>
   <main>主内容区</main>
   <footer>页脚</footer>
</body>
3、语义化标签

新增的语义化标签
块标签   区块元素   article   header   footer   aside   section   nav
内容分组标签   figure   figcaption   main
内联标签   文本级标签   time
1.<article>

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

2.<header>

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

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

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

4.<nav>

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

5.<aside>

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

6.<section>

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

div 和 section 区别

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

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

8.<figure>

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

9.<figcaption>

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

10.<time>

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

<header>
    <h3>这就是个测试</h3>
    <time datetime="2018-09-17">2018年9月17日</time>
</header>

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中定义文字样式。
————————————————
版权声明：本文为CSDN博主「柏大乖要乖呀」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bertZuo/article/details/82726944