重學前端學習筆記（四）--div和span不是夠用嗎？
摘要：
筆記說明
重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系
，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯絡我，郵箱：kaimo313@...
筆記說明
重學前端是程劭非（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並不簡單，它是典型的“入門容易，精通困難”的一部分知識，我在看這篇文章的時候，就發現自己有些東西是沒有留意的，查漏補缺很重要，一步一步完善自己的知識架構。