关于语义类标签新理解

初衷：

本篇是看过极客时间里winter老师的文章《04 | HTML语义：如何运用语义类标签来呈现Wiki网页？》写的。
由于叶叶从事的工作原因，单纯写静态页面并非自己常态化工作，更多的是实现其中业务逻辑，于是便忽略了HTML的学习，直到看到这篇文章后，才意识到自己懂得真心少。

内容：

1.什么是HTML语义化？

简单理解就是:用恰当的HTML标签、class类名，让机器和人快速理解网页内容。

2.HTML语义化的好处？

• 益于开发和维护；
• 增加可阅读性，使页面更加结构化；
• 利于SEO搜索引擎检索……

3.常见的HTML语义化标签有哪些？

body, article, nav, aside, section, header, footer, hgroup,h1-h6、address等

4.划重点：

group: 标签用于对网页或区段（section）的标题进行组合(标题组);例：

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

---

abbr:标签指示简称或缩写，比如 "WWW" 或 "NATO"。
通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
此标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。
小技巧：可以在 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。例：

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

---

hr与 VS 下边框?
hr:标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
但是阅读文章后，才意识到原来hr标签也表示故事走向的转变或者话题的转变。于是在选择hr或者使用border 的CSS时，也就有所区分了。例：

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

---

关于blockquote, q, cite 引用标签的使用？？？

不得不承认，叶叶居然是第一次看见这三个标签。真感觉瑟瑟发抖……仔细看了一下MDN以及各种文档，最后还是不太清楚，
它是怎么实现鼠标点击上去，弹出右上角的提示框，类似于a标签的title属性。
如果有清楚的同学，麻烦告诉叶叶一声，不胜感谢！ 至于它的使用，等叶叶熟悉了，再来补充。

---

5.附上一张图：

6.传送门

结语：

在实际生产中，我们需要用对的语义标签，用好语义标签，万一不懂、不会的，不用也是最佳的方案。最后，叶叶还是保持一颗“空杯心态”继续学习。