重學前端學習筆記（四）--div和span不是夠用嗎？

凱小默發表於2019-04-26
前端筆記

筆記說明

重學前端是程劭非（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並不簡單，它是典型的“入門容易，精通困難”的一部分知識，我在看這篇文章的時候，就發現自己有些東西是沒有留意的，查漏補缺很重要，一步一步完善自己的知識架構。

相關文章