H5 語義化標籤
語義化標籤的主要是為了解決以下問題：
- 前端程式碼可讀性
- 程式碼維護成本
- SEO優化
Html的標籤可以參考以下字典：
http://www.w3school.com.cn/html5/html5_reference.asp
這裡我們用一個簡單的DEMO去理解這些語義化的H5標籤，當然，這個DEMO中也沒辦法cover到所有的標籤，不過對於在有限的範圍內去了解語義化的作用，小編覺得已經綽綽有餘了
這裡的DEMO是一個微信名片，如圖所示，當然這裡面也增加了一些別的內容，也是為了方便的理解H5標籤的語義化作用
1.首先是頁面的基本佈局，我們使用<header>
這裡來說一下header，footer，section的作用
header : 定義文件的頁面組合，通常是一些引導和導航資訊。
footer : 定義 section 或 document 的頁尾
section : 定義文件中的節（section、區段）。比如章節、頁首、頁尾或文件中的其他部分
2.接下里我們看下header裡面有什麼，其實是對這個頁面目的的一個簡要介紹，這段介紹包括一個主標題和副標題，這裡我們使用<hgroup>
<header> <hgroup> <h1>我們以微信的一個使用者名稱片為例</h1> <h2>演示H5常用的語義化標籤</h2> </hgroup> </header>
hgroup : 用於對網頁或區段的標題元素（h1-h6）進行組合
3.頁面主要的內容一共有三塊，包括使用者的基本資訊，使用者的朋友圈等額外資訊的縮圖，以及使用者可執行的操作，在每個塊上方小編也額外加入了一段簡介，這裡使用了<details>，<summary>來顯示介紹資訊
<details>
<summary>基本資訊</summary>
使用者的基本資訊
</details>details : 標籤用於描述文件或文件某個部分的細節
summary
: 標籤包含 details 元素的標題，"details" 元素用於描述有關文件或文件片段的詳細資訊
4.接下來再看看footer中包含什麼，footer中包含小編的郵箱和頁尾的版權宣告，這裡小編使用了<address>，<small>
<footer>
<address>[email protected]</address>
<small>版權所有 © 2018-2019 貓頭鷹的巢</small>
</footer>address : 標籤定義文件作者或擁有者的聯絡資訊。
如果 <address> 元素位於 <article> 元素內部，則它表示該文章作者或擁有者的聯絡資訊。
通常的做法是將 address 元素新增到網頁的頭部或底部
small : 標籤將旁註 (side comments) 呈現為小型文字。
免責宣告、注意事項、法律限制或版權宣告的特徵通常都是小型文字。小型文字有時也用於新聞來源、許可要求。
對於由 em 元素強調過的或由 strong 元素標記為重要的文字，small 元素不會取消對文字的強調，也不會降低這些文字的重要性。
當然，H5還有包含其他的標籤，比如像<picture>，<progress>，<time>，<vedio>，<audio>，<aside>，<canvas>等等，這裡在小編的這個例子中可能沒辦法一一列舉出來，看官們還是可以多多參考下文件，這些新標籤的出現也是為了能夠更好的方便開發者去開發前端頁面，即使在脫離CSS的情況下，也能呈現一個很好的文件結構，當然也有些雞肋的標籤，不過這些都是仁者見仁，智者見智，多多使用才能夠更好地拓展咱們的視野和經驗！
最後是小編html頁面整體的程式碼，就不放CSS了，理解下文件結構就好！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="testh5.css">
<title>H5 Test</title>
</head>
<body>
<header>
<hgroup>
<h1>我們以微信的一個使用者名稱片為例</h1>
<h2>演示H5常用的語義化標籤</h2>
</hgroup>
</header>
<details>
<summary>基本資訊</summary>
使用者的基本資訊
</details>
<section class = "basic-info-container">
<img src="icon.jpg" alt="" width="50px" height="50px" class = "avater">
<ul>
<li>
<strong>貓頭鷹的巢</strong>
</li>
<li>
<span>暱稱：</span>
<span>胖啄木鳥</span>
<i class = "sex"></i>
</li>
<li>
<span>微訊號：</span>
<span>kameleonX</span>
</li>
<li>
<span>地區：</span>
<span>遼寧 大連</span>
</li>
</ul>
</section>
<details>
<summary>展示資訊</summary>
使用者的朋友圈縮圖
</details>
<section class = "display-info-container">
<div class = "custom-sign">
<span>個性簽名</span>
<p>沒心沒肺的活著</p>
</div>
<hr>
<div class = "pengyouquan">
<span>朋友圈</span>
<ul>
<li>
<img src="react.jpg" alt="" width="45" height="45">
</li>
<li>
<img src="angular.jpg" alt="" width="45" height="45">
</li>
</ul>
<i class = "arrow"></i>
</div>
<hr>
<div class = "more">
<span>更多資訊</span>
<ul>
<li>
<img src="baidu.png" alt="" width="25" height="25">
</li>
<li>
<img src="bilibili.png" alt="" width="25" height="25">
</li>
</ul>
<i class = "arrow"></i>
</div>
</section>
<details>
<summary>操作按鈕</summary>
使用者的可執行的操作
</details>
<section class = "operate-container">
<div class = "button">
<i class = "message"></i>發訊息
</div>
<hr>
<div class = "button">
<i class = "vedio"></i>音視訊通話
</div>
</section>
<footer>
<address>[email protected]</address>
<small>版權所有 © 2018-2019 貓頭鷹的巢</small>
</footer>
</body>
</html>