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

時間 2019-12-13

標籤前端學習筆記 div span 不是夠用欄目 CSS 简体版

原文原文鏈接

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。html

HTML語義：div和span不是夠用了嗎？

1、語義類標籤是什麼，使用它有什麼好處？

一、語義類標籤

語義類標籤就是儘可能使用有相對應的結構的含義的Html的標籤前端

二、好處

對開發者友好，增長可讀性，網頁結構清晰，便於開發維護
利用SEO，爬蟲...

三、使用語義標籤的建議

「用對」比「不用」好，「不用」比「用錯」好。html5

2、做爲天然語言延伸的語義類標籤

做爲天然語言和純文本的補充，用來表達必定的結構或者消除歧義
winter舉了兩個例子：html5中的ruby標籤，em標籤來進行說明

好比em標籤例子算法

把「今天我吃了一個蘋果」這句話放到不一樣上下文中，表達的意思會不一樣ruby

昨天我吃了一個香蕉。
今天我吃了一個蘋果。
複製代碼

昨天我吃了兩個蘋果。
今天我吃了一個蘋果。
複製代碼

是否是感受不一樣，當沒有上下文的時候，能夠用em標籤架構

今天我吃了一個 <em> 蘋果 </em>。
今天我吃了 <em> 一個 </em> 蘋果。
複製代碼

3、做爲標題摘要的語義類標籤

語義化的 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>
......
複製代碼

生成標題結構以下ide

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>
複製代碼

標題結構以下spa

HTML 語義
- 弱語義
- 結構性元素
- ......

4、做爲總體結構的語義類標籤

正確使用總體結構類的語義標籤，可讓頁面對機器更友好

<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>
複製代碼