HTML5屬於上一代HTML的新迭代語言，設計HTML5最主要的目的是爲了在移動設備上支持多媒體。例如video標籤和audio、canvas標籤。
HTML5新特性：
- 取消了過時的顯示效果標記<font></font>和<center></center>...
- 新表單元素引入
- 新語義化標籤的引入
- canvas標籤(圖形設計)
- 本地數據庫(本地存儲）
- 一些API
HTML5的優勢是跨平臺，缺點是PC端瀏覽器支持不是特別友好，造成用戶體驗不佳。
先來看看語義化標籤, 標籤有header、footer、nav、article、aside、section、main等。
爲什麼需要語義化標籤：
- 顧名思義，便於閱讀，易修改，易維護
- 搜索引擎友好，便於SEO
- 面向未來的HTML，瀏覽器在未來可能提供更豐富的支持。
由於語義化標籤是html5新特性，在一些舊版本瀏覽器支持不友好，比如IE8及以下都不識別語義化標籤，那麼如果要求兼容舊版瀏覽器的話，應該如何兼容做呢？這裏提供三個解決方案：
- 通過document.createElement('xxx')來創建一個語義化標籤，同時需要css樣式配合設置該標籤display爲block
- 第一種方式對於每一個語義化標籤都需要設置css， 不大方便。因此第二種方式是引入一個第三方已經寫好的語義化標籤js。
- 第三種方式（最佳解決方案）：在第二種方式的基礎上，加上一個<!--[if lte IE 8]><![endif]-->判斷，設置只有IE8及以下瀏覽器才加載這個js, 優化性能。
先看下測試效果，IE8下處理前和處理後的區別：
測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5新特性</title>
<style type="text/css">
/* 語義化標籤 */
nav { background-color: red; }
.nav { display: block; height: 40px; background-color: yellow; }
</style>
</head>
<body>
<div class="container">
<div id="tanFour">
<h3>語義化標籤</h3>
<div>爲什麼需要語義化：1、顧名思義，便於閱讀，易修改，易維護；2、搜索引擎友好，便於SEO；3、面向未來的HTML， 瀏覽器在未來可能提供更豐富的支持。</div>
<ul>
由於語義化標籤是html5新特性，在一些老版瀏覽器支持不友好，如何兼容老版瀏覽器：有三個解決方法
<li>腳本通過document.createElement('xxx')創建標籤，並且在樣式中設置該標籤display爲block</li>
<li>第一種方式對於每一個語義化標籤都需要設置css， 不大方便。因此第二種方式是引入一個第三方已經寫好的語義化標籤js。</li>
<li>第三種方式（最佳解決方案）：在第二種方式的基礎上，加上一個<!--[if lte IE 8]><![endif]-->判斷，設置只有IE8及以下瀏覽器才加載這個js, 優化性能。</li>
</ul>
<!-- 第一種兼容解決方案, 腳本創建語義化標籤，設置樣式display爲block -->
<!--<script type="text/javascript">-->
<!--document.createElement('nav');-->
<!--</script>-->
<!-- 第二種解決方案：引入第三方腳本 -->
<!--<script type="text/javascript" src="./js/html5shiv.min.js"></script>-->
<!-- 第三種解決方案：只有在ie8及以下才加載第三方腳本，優化性能，終極解決方案 -->
<!--[if lte IE 8]>
<script type="text/javascript" src="./js/html5shiv.min.js"></script>
<![endif]-->
<nav class="nav">語義化標籤1</nav>
<nav>語義化標籤2</nav>
<nav class="nav">語義化標籤3</nav>
</div>
</div>
</body>
</html>