共计 1584 个字符，预计需要花费 4 分钟才能阅读完成。
笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天 10 分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入 winter 的专栏学习【原文有 winter 的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。
HTML 语义：div 和 span 不是够用了吗？
一、语义类标签是什么，使用它有什么好处？
1、语义类标签
语义类标签就是尽量使用有相对应的结构的含义的 Html 的标签
2、好处
- 对开发者友好，增加可读性，网页结构清晰，便于开发维护
- 利用 SEO，爬虫 …
3、使用语义标签的建议
“用对”比“不用”好，“不用”比“用错”好。
二、作为自然语言延伸的语义类标签
- 作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义
- winter 举了两个例子：html5 中的 ruby 标签，em 标签来进行说明
比如 em 标签例子
把“今天我吃了一个苹果”这句话放到不同上下文中，表达的意思会不同
昨天我吃了一个香蕉。今天我吃了一个苹果。 昨天我吃了两个苹果。今天我吃了一个苹果。是不是感觉不同，当没有上下文的时候，可以用 em 标签
今天我吃了一个 <em> 苹果 </em>。今天我吃了 <em> 一个 </em> 苹果。三、作为标题摘要的语义类标签
语义化的 HTML 能够支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法
例如：<h1>HTML 语义 </h1>
<p>balah balah balah balah</p>
<h2> 弱语义 </h2>
<p>balah balah</p>
<h2> 结构性元素 </h2>
<p>balah balah</p>
......h1-h6 是最基本的标题，它们表示了文章中不同层级的标题。避免副标题可以使用 html5 的 hgroup 标签
<h1>JavaScript 对象 </h1>
<h2> 我们需要模拟类吗？</h2>
<p>balah balah</p>
......生成标题结构如下
-
JavaScript 对象
- 我们需要模拟类吗？
- …
<hgroup>
<h1>JavaScript 对象 </h1>
<h2> 我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
......
生成标题结构如下
-
JavaScript 对象——我们需要模拟类吗？
- …
section 标签的嵌套会使 h1-h6 下降一级
<section>
<h1>HTML 语义 </h1>
<p>balah balah balah balah</p>
<section>
<h1> 弱语义 </h1>
<p>balah balah</p>
</section>
<section>
<h1> 结构性元素 </h1>
<p>balah balah</p>
</section>
......
</section>标题结构如下
-
HTML 语义
- 弱语义
- 结构性元素
- ……
四、作为整体结构的语义类标签
正确使用整体结构类的语义标签，可以让页面对机器更友好
<body>
<header>
<nav> …… </nav>
</header>
<aside>
<nav> …… </nav>
</aside>
<section> …… </section>
<section> …… </section>
<section> …… </section>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<footer>
<address>……</address>
</footer>
</body>个人总结
HTML 并不简单，它是典型的“入门容易，精通困难”的一部分知识，我在看这篇文章的时候，就发现自己有些东西是没有留意的，查漏补缺很重要，一步一步完善自己的知识架构。
正文完
发表至： javascript
2019-04-26
