H5概述
Html5
HTML5 是定義 HTML 標準的最新的版本。 該術語表示兩個不同的概念：
它是一個新版本的HTML語言，具有新的元素，屬性和行爲，
它有更大的技術集，允許更多樣化和強大的網站和應用程序。
這個集合有時稱爲HTML5和朋友，通常縮寫爲HTML5。
HTML5 約等於 HTML + CSS + JS
Html5優勢
跨平臺:唯一一個通吃PC MAC Iphone Android等主流平臺的跨平臺語言（所依的賴瀏覽器，瀏覽器無跨平臺）
快速迭代（迭代只需服務端更新）
降低成本（開發快）
導流入口多（吸引流量的方式多種多樣）
分發效率高（衆多傳播方式）
Html5特性
1.DOCTYPE和瀏覽器渲染模式
DOCTYPE，或者稱爲 Document Type Declaration（文檔類型聲明，縮寫 DTD）
通常情況下，DOCTYPE 位於一個 HTML 文檔的最前面的位置，位於根元素 HTML 的起始標籤之前。
因爲瀏覽器必須在解析 HTML 文檔正文之前就確定當前文檔的類型，以決定其需要採用的渲染模式，
不同的渲染模式會影響到瀏覽器對於 CSS 代碼甚至 JavaScript 腳本的解析
到目前爲止，各瀏覽器主要包含了三種模式。在 HTML5 草案中，更加明確的規定了模式的定義：
傳統名稱 HTML5 草案名稱 document.compatMode 返回值
standards mode(strict mode) no-quirks mode CSS1Compat
almost standards mode limited-quirks mode CSS1Compat
quirks mode quirks mode BackCompat
document.compatMode（返回當前瀏覽器渲染模式）
document.compatMode 屬性最初由微軟在 IE 中創造出來，這是一個只讀的屬性，返回一個字符串，
只可能存在兩種返回值：
BackCompat：標準兼容模式未開啓（怪異模式）
CSS1Compat：標準兼容模式已開啓（標準模式）
在現代主流瀏覽器中，其實怪異模式的渲染和標準與幾乎標準間沒有太大的差別（ie9+ 谷歌 火狐 ...）
ie5.5之前都是ie自己的渲染模式，怪異模式
ie6纔開始慢慢支持標準，標準模式，在ie6 中怪異和標準模式的區別最大
ie7 8 9都是基於標準模式升級的，他們理論上存在怪異模式
HTML5提供的<DOCTYPE html>是標準模式，向後兼容的,等同於開啓了標準模式，
那麼瀏覽器就得老老實實的按照W3C的 標準解析渲染頁面
一個不含任何 DOCTYPE 的網頁將會以 怪異(quirks) 模式渲染
2.DTD
當 doctype 信息如上時，表明該頁面是遵守了 HTML5 規範的，瀏覽器會選擇 Standards Mode，這種 doctype 是最推薦的一種，
我們平時設計頁面都應該加上這一個 doctype。
HTML5 不基於 SGML,所以不需要引用 DTD,瀏覽器內部本身有對標籤進行解析渲染驗證的模塊
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
當 doctype 如上時，瀏覽器同樣會選擇 Standards Mode，雖然和第一種 doctype 有一些區別，但是幾乎可以認爲是一樣的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
當 doctype 如上時，瀏覽器會選擇 Almost Standards Mode，渲染時和標準會有一些區別
當 doctype 缺失的時候，瀏覽器會選擇 Quirks Mode，這是非常不推薦的方式，
當 doctype上面有註釋，標籤或者空行時，某些瀏覽器都會認爲該頁面不具有doctype。
我們應該儘量避免 Quirks Mode，這對一個 web 應用是非常不利的地方。
3.每種doctype在瀏覽器中對應的渲染模式
https://en.wikipedia.org/wiki/Quirks_mode
H4 and H5
H4中的根元素:
<html xmlns="http://www.w3.org/1999/xhtml">
首先這個標記沒有任何問題，你喜歡的話,那就背下來繼續用。它是有效的。
但這個標記中的很多字節在Html5中我們都可以省略了
xmlns:這是XHTML1.0的東西，
它的意思是在這個頁面上的元素都位於http://www.w3.org/1999/xhtml這個命名空間內
但是HTML5中的每個元素都具有這個命名空間，不需要在頁面上再顯示
H5中的根元素:
<html></html>
head元素
MIME類型:
每當瀏覽器請求一個頁面時，web服務器會在發送實際頁面內容之前，先發送一些頭信息。
瀏覽器需要這些信息來決定如何解析隨後的頁面內容。最重要的是Content-Type
比如: Content-Type:text/html
text/html:即這個頁面的"內容類型",或者稱爲MIME類型。這個頭信息將唯一確定某個資源的本質是什麼
也決定了它應該如何被呈現。
圖片也有自己的MIME類型
jpg:image/jpeg
png:image/png
js也有自己的MIME類型，css也有自己的MIME類型，
任何資源都有自己的MIME類型，整個web都依靠MIME類型來運作
<meta charset="UTF-8">:
告訴瀏覽器你應該使用哪種編碼來解析網頁
語義化標籤
在HTML 5出來之前，我們用div來表示頁面頭部，章節，頁腳等。但是這些div都沒有實際意義。
各大瀏覽器廠商分析了上百萬的頁面，從中發現了DIV名稱的通用id名稱大量重複。例如，很多開發人員喜歡使用
div id="footer"來標記頁腳內容，所以Html5元素引入了語義化標籤（一組新的片段類元素）
https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/idlist-url.htm
https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/classlist-url.htm
<hgroup></hgroup>
<header></header>
<nav></nav>
<section></section>
<footer></footer>
以上五個爲常用
<article></article>
<aside></aside>
語義化的好處
HTML5可以讓很多更語義化結構化的代碼標籤代替大量的無意義的div標籤
這種語義化的特性提升了網頁的質量和語義
對搜索引擎更加的友好
他們這些標籤功能就是代替
功能中的一部分，他們沒有任何的默認樣式，除了會讓文本另起一行外；
https://gsnedders.html5.org/outliner/
https://gsnedders.html5.org/outliner/
hgroup元素代表 網頁 或 section 的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合
<hgroup>
<h1>HTML 5</h1>
<h2>這是一篇介紹HTML 5語義化標籤和更簡潔的結構</h2>
</hgroup>
hgroup使用注意：
如果只需要一個h1-h6標籤就不用hgroup
如果有連續多個h1-h6標籤就用hgroup
如果有連續多個標題和其他文章數據，h1-h6標籤就用hgroup包住，和其他文章元數據一起放入header標籤
header 元素代表 網頁 或 section 的頁眉。
通常包含h1-h6元素或hgroup
<header>
<hgroup>
<h1>網站標題</h1>
<h2>網站副標題</h2>
</hgroup>
</header>
header使用注意：
可以是“網頁”或任意“section”的頭部部分
沒有個數限制。
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
nav元素代表頁面的導航鏈接區域。用於定義頁面的主要導航部分。
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
nav使用注意：
用在整個頁面主要導航部分上，不合適就不要用nav元素；
section元素代表文檔中的 節 或 段，段可以是指一篇文章裏按照主題的分段；節可以是指一個頁面裏的分組。
<section>
<h1>section是啥？</h1>
<article>
<h2>關於section</h1>
<p>section的介紹</p>
<section>
<h3>關於其他</h3>
<p>關於其他section的介紹</p>
</section>
</article>
</section>
section使用注意：
section不是一般意義上的容器元素，如果想作爲樣式展示和腳本的便利，可以用div。
article、nav、aside可以理解爲特殊的section，
所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div
article元素最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網站中自成一體的內容
<article>
<h1>一篇文章</h1>
<p>文章內容..</p>
<footer>
<p><small>版權：html5jscss網所屬，作者：damu</small></p>
</footer>
</article>
article使用注意：
獨立文章：用article
單獨的模塊：用section
沒有語義的：用div
aside元素被包含在article元素中作爲主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等
在article元素之外使用作爲頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日誌串連，其他組的導航，甚至廣告，這些內容相關的頁面。
<article>
<p>內容</p>
<aside>
<h1>作者簡介</h1>
<p>小北，前端一枚</p>
</aside>
</article>
aside使用總結：
aside在article內表示主要內容的附屬信息，
在article之外則可做側邊欄
如果是廣告，其他日誌鏈接或者其他分類導航也可以用
footer元素代表 網頁 或 section 的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。
<footer>
COPYRIGHT@damu
</footer>
footer使用注意：
可以是 網頁 或任意 section 的底部部分；
沒有個數限制，除了包裹的內容不一樣，其他跟header類似。