學習要點： 1.大綱演算法 2.section和div 3.結構分析 主講教師：李炎恢 本章主要開始使用學慣用HTML5和CSS3來構建Web頁面，第一個項目採用PC端 固定佈局來實現。 一．大綱演算法 在HTML5中有一個很重要的概念，叫做HTML5大綱演算法(HTML5Outliner)，它的用途是為 ...
學習要點：
1.大綱演算法
2.section和div
3.結構分析
主講教師：李炎恢
本章主要開始使用學慣用HTML5和CSS3來構建Web頁面，第一個項目採用PC端 固定佈局來實現。
一．大綱演算法
在HTML5中有一個很重要的概念，叫做HTML5大綱演算法(HTML5Outliner)，它的用途是為用戶提供一份頁面的信息結構目錄。比如我們經常使用的手冊就是一個非常好的大綱 結構：
合理的使用HTML5元素標簽，可以生成一個非常清晰的文檔大綱，我們可以通過各種 工具去查看當前頁面，比如谷歌和火狐的插件可以查看當前的HTML5大綱。這裡我們推薦 使用一個伺服器端的測試工具：HTML 5 Outliner，網址如下：
測試工具：https://gsnedders.html5.org/outliner/
這個工具可以上傳本地html文件，也可以填寫URL，或者直接在多行文本框上編寫HTML5代碼均可瞭解大綱。
通過我們將上一節課的代碼編寫，發現這個頁面的大綱非常的難看，出現三個Untitled Section，這個意思表示頁面此處缺少大綱標題，不規範。如果你的頁面在這裡測試，大綱都比較清晰，那麼HTML5頁面是比較規範的。
//大綱目錄結構
1.UntitledSection
1.UntitledSection
1.瓢城旅行社
2.UntitledSection
二．section和div
首先，我們暫不探討怎麼讓html5頁面大綱合乎規範。先探討一下section和div的區別。
div元素在html5之前就是非常常用的標簽，它本身沒有任何語義，用來頁面佈局和 CSS樣式以及JS調用。那麼，div的用途已經說的很清楚了：
1.如果是頁面佈局，且不是header、footer之類的專屬區域，都應該使用div；
2.如果只是單純的對一個端內容進行CSS樣式定義，那麼也應該使用div;
3.如果想對一段內容進行JS控制，那麼也應該使用div。
html5中，section並不是用來取代div的。在基礎課程中已經簡單的瞭解過，它是具有語義的文檔標簽。表示一段文檔中的章節，比如包含一個標題和一個段落，而大綱規範 中，至少要包含一個標題。
//section至少需要一個h1~h6
<section> <h2>Bootstrap</h2> <p>Bootstrap是一款html5開源框架</p> </section>
通過上訴說明，我們對於下方的section標簽，增加一個h2即可實現大綱要求。最終 大綱變成如下結構：
//大綱目錄結構
1.UntitledSection
1.UntitledSection
1.瓢城旅行社
2.波特四抓
那麼發現最後一個UntitledSection已經擁有了標題，已經符合規範。對於前面還 有兩個，待會兒再說。現在再探討一個問題，既然div用於沒有任何語義的佈局和樣式定 義，那麼我們就需要探討一下如下代碼用div還是section。
//這裡改用section還是div呢？
<section class="center"> <h1 class="logo"> 瓢城旅行社</h1> <ul class="link"> <li class="active"> <a href="###"> 首頁</a> </li> <li> <a href="###"> 旅游資訊</a> </li> <li> <a href="###"> 機票訂購</a> </li> <li> <a href="###"> 風景欣賞</a> </li> <li> <a href="###">公司簡介</a> </li> </ul> </section>
從結構上來看，section需要包含至少一個h1~h6，這裡是符合的。但容易混淆的 部分是，section是某個區域章節的標題，h1其實是整個網站的標題。而ul部分是導航超 鏈接，嚴格來講，也不算章節的內容。最重要的是這塊的section用於的佈局樣式定義， 所以我個人認為這裡使用div更加妥當一些。
註：section本身使用頻率並不是很高，而section並不是代替div的元素。
//比較合理的做法
<div class="center"> <h1 class="logo">瓢城旅行社</h1> <ul class="link"> <li class="active"> <a href="###">首頁</a> </li> <li> <a href="###">旅游資訊</a> </li> <li> <a href="###">機票訂購</a> </li> <li> <a href="###">風景欣賞</a> </li> <li> <a href="###">公司簡介</a> </li> </ul> </div>
這裡大綱進行了一個很有趣的變化，如下：
//改變後的大綱
1.UntitledSection
1.瓢城旅行社
2.波特四抓
通過目前的大綱，我們可以瞭解到，還剩一個標題就可以實現完美大綱。這個剩下的標 題是哪個元素下的呢？答案是：body元素。我們只要在body元素下創建一個h1，寫上標 題名稱，即可。
//增加body標題，解決大綱問題
<body> <h1>Body大標題</h1> ... </body>
雖然在body增加標題解決了大綱問題，但問題是我們本身頁面設計根本不需要在body 創建一個h1啊。難道創建後，再隱藏這種多此一舉的方法嗎？這個問題，稍後再看，先再 探討一下頭部的結構問題。
三．結構分析
首先，探討一下nav元素。這個元素本質上是用來存放一組作為導航的鏈接，比如ul。
我們第一節課，把整個頭部全部存放進去，顯得不是特別合理，所以，最好在ul的外圍。 而LOGO+導航，我們可以理解為header頭部，所以，最終改寫成如下結構：
//頭部元素換成了header，nav元素只包含ul
<header id="header"> <div class="center"> <h1 class="logo">瓢城旅行社</h1> <nav class="link"> <ul> <li class="active"> <a href="###">首頁</a> </li> <li> <a href="###">旅游資訊</a> </li> <li> <a href="###">機票訂購</a> </li> <li> <a href="###">風景欣賞</a> </li> <li> <a href="###">公司簡介</a> </li> </ul> </nav> </div> </header>
在去掉<body><h1>...</h1></body>的情況下，我們發現，這種結構的主標題大綱居 然是：瓢城旅行社。而<nav>下則又出現一個UntitledSection，由此可得到幾個結論：
1.header元素不需要強制標題h1~h6，如果有標題，算body的。這樣主大綱標題就有了；
2.section和nav元素大綱要求有標題h1 ~ h6，但section必須有才規範，而nav如果沒有標題，也是合理的。當然，添加上標題會讓大綱更加好看，頁面中可以隱藏。
//最終格式如下：
<header id="nav"> <div class="center"> <h1 class="logo">瓢城旅行社</h1> <nav class="link"> <h2 class="none">網站導航</h2> <ul> <li class="active"> <a href="###">首頁</a> </li> <li> <a href="###">旅游資訊</a> </li> <li> <a href="###">機票訂購</a> </li> <li> <a href="###">風景欣賞</a> </li> <li> <a href="###">公司簡介</a> </li> </ul> </nav> </div> </header>
根據改變的元素內容，適當更改一下CSS即可。
