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

栏目: JavaScript · 发布时间: 6年前

内容简介：重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，语义类标签就是尽量使用有相对应的结构的含义的Html的标签“用对”比“不用”好，“不用”比“用错”好。

笔记说明

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Beginning XML with DOM and Ajax

Sas Jacobs / Apress / 2006-06-05 / USD 39.99

Don't waste time on 1,000-page tomes full of syntax; this book is all you need to get ahead in XML development. Renowned web developer Sas Jacobs presents an essential guide to XML. Beginning XML with......一起来看看《Beginning XML with DOM and Ajax》这本书的介绍吧!

码农工具