重学前端学习笔记（四）--div和span不是够用吗？

时间 2019-12-13

标签前端学习笔记 div span 不是够用栏目 CSS 繁體版

原文原文链接

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，天天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的能够加入winter的专栏学习【原文有winter的语音】，若有侵权请联系我，邮箱：kaimo313@foxmail.com。html

HTML语义：div和span不是够用了吗？

1、语义类标签是什么，使用它有什么好处？

一、语义类标签

语义类标签就是尽可能使用有相对应的结构的含义的Html的标签前端

二、好处

对开发者友好，增长可读性，网页结构清晰，便于开发维护
利用SEO，爬虫...

三、使用语义标签的建议

“用对”比“不用”好，“不用”比“用错”好。html5

2、做为天然语言延伸的语义类标签

做为天然语言和纯文本的补充，用来表达必定的结构或者消除歧义
winter举了两个例子：html5中的ruby标签，em标签来进行说明

好比em标签例子算法

把“今天我吃了一个苹果”这句话放到不一样上下文中，表达的意思会不一样ruby

昨天我吃了一个香蕉。
今天我吃了一个苹果。
复制代码

昨天我吃了两个苹果。
今天我吃了一个苹果。
复制代码

是否是感受不一样，当没有上下文的时候，能够用em标签架构

今天我吃了一个 <em> 苹果 </em>。
今天我吃了 <em> 一个 </em> 苹果。
复制代码

3、做为标题摘要的语义类标签

语义化的 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>
......
复制代码

生成标题结构以下ide

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>
复制代码

标题结构以下spa

HTML 语义
- 弱语义
- 结构性元素
- ......

4、做为总体结构的语义类标签

正确使用总体结构类的语义标签，可让页面对机器更友好

<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并不简单，它是典型的“入门容易，精通困难”的一部分知识，我在看这篇文章的时候，就发现本身有些东西是没有留意的，查漏补缺很重要，一步一步完善本身的知识架构。code