重学前端学习笔记(四)--div和span不是够用吗?

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

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


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

查看所有标签

猜你喜欢:

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

UNIX环境高级编程

UNIX环境高级编程

W.Richard Stevens、Stephen A.Rago / 尤晋元、张亚英、戚正伟 / 人民邮电出版社 / 2006年 / 99.00元

本书是被誉为UNIX编程“圣经”的Advanced Programming in the UNIX Environment一书的更新版。在本书第1版出版后的十几年中,UNIX行业已经有了巨大的变化,特别是影响UNIX编程接口的有关标准变化很大。本书在保持了前一版风格的基础上,根据最新的标准对内容进行了修订和增补,反映了最新的技术发展。书中除了介绍UNIX文件和目录、标准I/O库、系统数据文件和信息......一起来看看 《UNIX环境高级编程》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具