前端Html5（1）之html語義化

zhunny發表於2019-02-28
前端HTML

  在找工作之際，我將系統性的複習前端的知識架構，把我的一些總結和自己的理解記錄下來並分享出來，方便自己以後的複習，也希望與大家交流。
  在介紹html語義化之前，我先簡單介紹一下html5的歷史以及html5的優點。它的的新特性,今天只總結語義化標籤，其他的特徵我將在後續繼續總結。

html5歷史及其優點

  2008年1月22日，Html5的第一份正式草案公佈，它是W3C與WHATWG合作的結果。它的主要目的是為了在移動裝置上支援多媒體。因此一些瀏覽器可能不支援某些html5的特性。

  1. 多裝置跨平臺，相容PC端與移動端、Windows與Linux、安卓與IOS。
  2. 新增的video和audio標籤相比於flash使得視訊音訊播放更佳流暢，效能高。
  3. 有利於首屏優化（SEO），因為html5的語義化標籤，使得html5的程式碼不僅讓開發者好理解，搜尋引擎也能更好的識別關鍵字。

  結合html5的新特性可以總結出更多的優點。

語義化標籤

什麼是語義化？

  語義化是指用合適的標籤來標記內容。比如說以前你寫一個網頁佈局可能是這樣的：

<div>
    <div class="header">頁首</div>
    <div class="content">
        <div class="aside">側邊</div>
        <div class="article">文章</div>
    <div>
    <div class="footer">頁尾</div>
</div>
複製程式碼

  而當你學會用語義化標籤來寫網頁之後，你的程式碼可能就是這樣的：

<header>頁首</header>
<section>
    <article>文章</article>
    <aside>側邊</aside>
</section>
<footer>頁尾</footer>
複製程式碼

  這樣你是不是會覺得這段程式碼更好理解呢，你沒必要讀css程式碼，你可能就已經大概知道每個部分分佈在網站的什麼位置了。

語義化標籤的優點

  1. 寫更少的程式碼，布更好的局。（更少的程式碼載入更快）
  2. 脫去css的外衣之後，不至於裸奔。（結構鮮明）
  3. 你看得懂，搜尋引擎也看得懂。（有利於SEO）
  4. 團隊合作更愉快。（語義化的可讀性）

html5新增的語義化標籤

<main> 定義主要內容
<header> 頁首，對主頁的介紹
<nav> 定義主體模組或者導航連結的集合
<section> 表示文件中的一個區域（或節），比如，內容中的一個專題組，一般來說會有包含一個標題（heading）
<article> 是一個特殊的section標籤，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用。例如一篇完整的論壇帖子，一篇部落格文章，一個使用者評論等等。一般來說，article會有標題部分（通常包含在header內），有時也會包含footer。article可以巢狀，內層的article對外層的article標籤有隸屬關係。例如，一篇部落格的文章，可以用article顯示，然後一些評論可以以article的形式嵌入其中。
<aside> 與一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。其通常表現為側邊欄或者嵌入內容。
<section> 表示文件中的一個區域（或節），比如，內容中的一個專題組，一般來說會有包含一個標題（heading）。
<footer> 定義了整個頁面或其中一部分的頁尾（並且通常包含原創作者，版權資訊，聯絡方式和站點地圖,文件相關的連結等資訊）
<figure> 元素代表一段獨立的內容.用於對元素進行組合。多用於圖片與圖片描述組合。
<hgroup> 標籤用於對網頁或區段（section）的標題進行組合。使用新的HTML5元素hgroup，可以為header元素新增更多的資訊。（頭部主標題/副標題）
複製程式碼

  語義化標籤參考：www.cnblogs.com/zjf-1992/ar…

相關文章