HTML5中，有一个特点就是语义化标签，相信大多数人和我一样，虽然在工作中也有自己学习和一个成长的习惯，但更多地，会把自己的注意力往
Javascript,css3，ES6，Vue3.0等方向发展，还包括已经热了有一段时间的Typescript， 往往，很少有人会将关注点放于HTML5了。
前言
毕竟，大家可能都已经搬砖搬地麻木了，觉得 div + css 可以走遍整个项目，殊不知，这种页面结构是相对而言比较差劲的，不利于 SEO 以及代码阅读，性能优化等。写好正确的标签，也同样能让你的项目大放光彩。
当然，如果很强烈考虑兼容 IE 的话，那么本章节应不太适合学习。
定义
正确的标签做正确的事情
好处
一般既然学习，首先要明白它的好处，这样子才会学的有意义，它的好处主要有以下三点：
-
html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的
-
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
-
使阅读源代码的人对网站更容易将网站分块，便于团队开发以及维护
常用 HTML5 纯语义化标签
指其实并没有实质性的作用，主要是纯语义化标签，用来标记当前内容块主要是写什么内容。
<article>
<article> 标签，顾名思义，用来定义文章的部分。
使用环境：
- 论坛帖子
- 博客文章
- 新闻故事
- 评论
<aside>
<aside> 标签用来表示跟当前页面的内容没有很相关的部分，通常用于显示侧边栏或者补充的内容。
使用环境：
- 目录
- 索引
<address>
<address> 标签用于表示提供住址或者联系方式等个人或者组织信息。
使用环境：
- 收货地址
- 版权信息
- 联系我们
<header>
<header> 标签表示网页的头部信息。
使用环境：
包裹顶部导航栏。
<footer>
<footer> 标签表示章节内容或者是根节点元素中的页脚。
使用环境：
包裹网页底部版权信息栏。
<hgroup>
<hgroup> 标签主要是将 <h1> 到 <h6> 之间的子元素组装到一起，所以称之为 <hgroup>。
使用环境：
文档章节所属的多级别目录。
<nav>
<nav> 标签一般表示此部分是导航栏
使用环境：
导航栏
<section>
<section> 标签表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示。
使用环境：
一个没有更具体语义元素来表示的独立部分，使用它。
<label>
<label> 标签用于为 <input> 元素做标题绑定。
使用案例：
<label for="name">姓名</label>
<input type="text" name="name" id="name" />
<caption>
<caption> 标签用于定义表格的标题。
使用环境：
表格。
常用 HTML5 语义化标签
指拥有语义化作用的同时，拥有它自己独特的作用，例如拥有独特的样式或者功能。
<noscript>
<noscript> 标签表示当前浏览器或者其他环境中，如不支持Javascript的话，显示的替代内容。
使用环境：
基本都用，也算一个兼容性配置了。
使用方案：
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<base>
<base> 标签规定页面上所有链接的默认 URL 和默认目标，不同的是，它有点类似于 <meta> 标签，是写于 <head> 文档头部中的。
使用案例：
<base href="https://www.cooldream.fun/home" target="_blank">
<del> & <ins>
<del> 标签主要是 delete 的意思，即删除部分。
<ins> 标签主要是 insert 的意思，即插入部分，是对删除部分的补充，同时，它还有两个属性
-
cite
cite 属性的值指向一个文档的 URL，该文档解释了文本被插入或修改的原因。（目前该属性还没有被主流浏览器支持）
-
datetime
该特性指示的此修改发生的时间和日期，并且该特性的值必须是一个有效的日期或者时间字符串
所以，两个标签一般来讲是配对使用，当然，也可以单独使用。
使用环境：
文档更新迭代，或者活动价等位置。
使用案例
<del>
<p>“v2.6.10”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
<p>“v3.0.0”</p>
</ins>
效果如图所示：
image.png
<figure> & <figcaption>
<figure> 标签表示一段独立的内容，经常与说明 <figcaption> 进行配合使用
使用环境：
- 需要有文字说明的图像，表格，代码段等
使用案例：
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
效果如图所示:
image.png
<summary> & <detail>
<detail> 标签可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。
<summary> 标签一般和 <detail> 标签配合使用，用作 一个 <details> 元素的一个内容的摘要，标题或图例。
使用环境：
脑经急转弯，面试题，或者个人博客的技术详解中。
使用案例：
<details>
<summary>猜猜我几岁</summary>
<p>少年永远18岁</p>
</details>
效果如图所示：
detail.gif
<sub> & <sup>
<sub> 表示下标
<sup> 表示上标
使用环境：
<sup> 一般用于平方数，立方数等。
<progress>
<progress> 标签表示进度条。它有一个 max 属性来设置进度条的最大值，以及一个 value 属性表示当前值。
使用案例：
<progress id="file" max="100" value="70"> 70% </progress>
效果如下图所示：
image.png
网友评论