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

2019年9月1日 169次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（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并不简朴，它是典范的“入门轻易，通晓难题”的一部分学问，我在看这篇文章的时刻，就发明本身有些东西是没有注意的，查漏补缺很主要，一步一步完美本身的学问架构。

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019002779
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞