重学前端学习笔记(四)--div和span不是够用吗?
笔记说明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:[email protected]。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并不简单,它是典型的“入门容易,精通困难”的一部分知识,我在看这篇文章的时候,就发现自己有些东西是没有留意的,查漏补缺很重要,一步一步完善自己的知识架构。