語義化標籤的理解
在學習HTML階段的最後，我們會涉及到學習語義化標籤，明明用div等標籤就可以構成頁面，那麼爲什麼還會有語義化標籤的存在？語義化標籤到底是什麼？學好語義化標籤又會在哪方面應用？接下來會從上面幾個方面說一下我的理解。
1、 語義化標籤是什麼？
常用的語義化標籤包括
<header></header>頭部
<nav></nav>導航欄
<section></section>區塊（有語義化的div）
<main></main>主要區域
<artical></artical>主要內容
<aside></aside>側邊欄
<footer></footer>底部
2、 爲什麼會用語義化標籤？
平時，我們都會採用DIV+CSS佈局我們的頁面。但是這樣的佈局方式不僅使我們的文檔結構不夠清晰，而且不利於瀏覽器對頁面的讀取。所以HTML5新增了很多新的語義化標籤。並且，在我們未給頁面添加css樣式時，用戶體驗並不好。語義化標籤也能讓瀏覽器更好的讀取頁面結構。再就是便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
1、 頁面佈局
如下圖，如果我們用div來實現此圖的佈局，那麼就要涉及到加類名或者選擇符的問題，還有起名字，很多時候就會弄混。直接用語義化標籤就會標記出每個區域的作用並且更好是實現頁面佈局。
2、 在移動端佈局方面應用
學習一階段的最後我們會學習到移動端的佈局與書寫，那麼此時選擇使用語義化標籤往往要比div書寫更簡單優化。比如移動端佈局中我們要採用百分比佈局或者rem佈局方式，就會涉及到彈性盒中的固比固。比如在我們移動端頁面中，拿QQ舉例。
QQ的頁面中就可以劃分狀態欄，header，main，footer。三個區域。在我們的消息區域，有很多消息時，要想查看最底部消息就要下拉，但與此同時header與footer是不動的。那麼我們就用到了語義化標籤。用到了彈性盒中的固比固（固定高 ： flex：1 ： 固定高）；
3、 舉例
這是在學習移動端佈局時所寫的一個練習，之所以拿出來它，是因爲它是一個很典型的案例，頁面中都運用了語義化標籤。
給大家看一下頁面結構的代碼：
<div class="all">
<header>
<ul>
<li><i class="iconfont"></i></li>
<li>
<a href="#" class="cur">熱點</a>
<a href="#">關注</a>
</li>
<li><i class="iconfont"></i></li>
</ul>
</header>
<nav>
<ul>
<li>足球現場</li>
<li class="cur">足球廣場</li>
<li>足球美女</li>
</ul>
</nav>
<main>
<figure>
<img src="images/img1.jpg"/>
<figcaption>我也不看足球，這裏沒什麼文字時代復分</figcaption>
</figure>
<figure>
<img src="images/img2.jpg"/>
<figcaption>我也不看足球，這裏沒什麼文字時代復分</figcaption>
</figure>
<figure>
<img src="images/img3.jpg"/>
<figcaption>我也不看足球，這裏沒什麼文字時代復分</figcaption>
</figure>
<figure>
<img src="images/img4.jpg"/>
<figcaption>我也不看足球，這裏沒什麼文字時代復分愛</figcaption>
</figure>
<figure>
<img src="images/img1.jpg"/>
<figcaption>我也不看足球，這裏沒什麼文字時代復分</figcaption>
</figure>
</main>
<footer>
<ul>
<li>
<i class="iconfont"></i>
<p>首頁</p>
</li>
<li>
<i class="iconfont"></i>
<p>首頁</p>
</li>
<li>
<i class="iconfont"></i>
</li>
<li>
<i class="iconfont"></i>
<p>首頁</p>
</li>
<li>
<i class="iconfont"></i>
<p>首頁</p>
</li>
</ul>
</footer>
</div>
3、 總結
其實總結起來也就是一句話，沒有沒有用的東西，div等無語義化的標籤有他們的好處，語義化標籤也有語義化標籤的好處，不可一概而論。但是語義化標籤也不是亂用的，視我們頁面需求與情況而定。