教訓：沒學HTML5大綱之前，寫前端頁面的時候，很少去關注一個頁面的文檔結構，總是按照自己的感覺，用了一堆堆的div，現在回去看看之前寫的代碼，確實是一坨shit。
首先參考一個大牛的博客：http://www.osmn00.com/rebuild/223.html
HTML5之前的HTML4，唯一的方式是採用<h1> ~ <h6>元素來創建大綱。因爲正常習慣下，<h1> ~ <h6>表示了從第一級到第六級的層級遞減標題，而標題之下就應該是對應的內容了。
合理正確的使用標題元素可以爲文檔賦予一個良好結構的大綱，不單單對於搜索引擎的優化，更是爲藉助於屏幕閱讀器瀏覽器網頁的盲人（或弱視力）用戶提供了巨大的幫助。
在HTML5中存在着一個大綱算法，它允許用戶從一個Web頁面生成一個信息結構目錄，以便用戶快速瀏覽網頁，定位所需內容。
在解析HTML5文檔時，瀏覽器不會將<h1>、<h2>和<ul>視作兄弟節點，<h1>比<h2>擁有更高的級別。
爲了更好地表達HTML的文檔結構、文檔語義，HTML5新增了大量標籤。這些標籤包括section、article、nav、aside等，在上面大牛的博客中，他把這些標籤分爲了三類：
1)無作爲標籤，例如div、ul等
2)開始一個新的節點的標籤，section、article、nav、aside、<h1>~<h6>。
3)可以成爲一個根節點的標籤 。《html5用戶指南》中這樣解釋“某些元素（<blockquote>、<body>、<details>、<fieldset>、<figure>、<td>）叫做成節的跟，並且它們可以擁有自己的大綱。但是，這些元素中的節和標題對於它們的祖先的大綱沒有任何影響。”
如何查看這個Web頁面的大綱？
這裏有一個在線工具，複製HTML源代碼粘貼到工具的文本框中，單擊OutLine this！按鈕，即可在瀏覽器中顯示網頁的信息結構目錄。