第12章 CSS3+HTML5網頁排版
【學習重點】
- 正確使用HTML5結構標簽
- 正確使用HTML5語義元素
- 能夠設計符合標准的網頁結構
12.1 使用結構標簽
在制作網頁時，不僅需要使用<div>標簽來構建網頁，還要使用下面幾類標簽完善網頁結構：
- <h1>、<h2>、<h3>、<h4>、<h5>、<h6>：定義文檔標題；
- <p>：定義段落文本；
- <ul>、<ol>、<li>：定義信息列表、導航列表、榜單結構等；
- <table>、<tr>、<td>等：定義表格結構；
- <span>：定義行內包含框。
12.1.1 使用div和span
文檔結構基本構成元素是div，div表示區塊（division）的意思，它提供了將文檔分割為有意義的區域的方法。
為了減少使用不必要的標簽，應該避免不必要的嵌套。
與div不同，span元素可以用來對行內元素進行分組。
12.1.2 使用id和class
HTML5是簡單的文檔標識語言，文檔結構大部分使用<div>標簽來完成。
為了能夠識別不同的結構，一般通過定義id或class給它們賦予額外的語義，給CSS樣式提供有效的“鈎子”。
使用id標識元素時，id名必須是唯一的。在整個網站上，id名應該應用於語義相似的元素以避免混淆。
與id不同，同一個class可以應用於頁面上任意數量的元素，因此class非常適合標識樣式相同的對象。
12.1.3 認識顯示類型
在常規網頁設計中，CSS把標簽分為兩種基本顯示形態：Block（塊狀）和Inline（行內）。塊狀元素的寬度一般為100%，占據一行；即使寬度不為100%，塊狀元素也始終占據一行。常用塊狀元素有：address、blockquote、div、dl、fieldset、form、h1-h6、hr、noframes、noscript、ol、p、pre、table、ul、li、legend。
行內元素沒有固定的大小，定義它的width和height屬性無效。行內元素可以在行內自由流動，但可以定義邊界、補白、邊框和背景，它顯示的高度和寬度只能夠根據所包含內容的高度和寬度來確定。常用行內元素有：a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、i、img、input、kbd、label、map、object、q、samp、script、select、small、span、strike、strong、sub、textarea、tt、var。
CSS3新增了box顯示類型，詳見第13章。
12.1.4 正確嵌套標簽
【規則1】
body元素能夠直接包含的元素有ins、del、script和block類型元素。
- block表示塊狀類型的元素，也就是說，body元素能夠直接包含任何塊狀元素；
- script是頭部隱藏顯示的腳本元素，也就是說除了頭部網頁信息區域外，網頁中（body元素內）能夠包含腳本，但是不能夠包含任何樣式（style元素）；
- ins和del是兩個行內元素，其中ins元素表示插入到文檔中的文本，而del元素表示文本已經從文檔中刪除。
【規則2】
ins和del元素能夠直接包含塊狀元素和行內元素等不同類型的元素，但是行內元素禁止包含塊狀元素。
【規則3】
p、h1、h2、h3、h4、h5和h6元素可以直接包含行內元素和純文本內容，但不能直接包含塊狀元素——但可以間接包含塊狀元素。
例如，object、map和button行內元素中可以包含塊狀元素。
【規則4】
ul和ol元素只能夠直接包含li元素，但是可以在li元素中包含其他元素。
【規則5】
dl元素只能夠包含dt和dd元素，不能夠包含其它元素。同時dt元素內只能包含行內元素，不能包含塊狀元素，而dd元素能夠包含任何元素。
【規則6】
form元素不能直接包含input元素。因為input元素是行內元素，而form元素僅能夠包含塊狀元素。
【規則7】
table元素能夠直接包含caption、colgroup、col、thead、tbody和tfoot，但是不能夠包含tr以及其它元素。如果在table元素中直接包含tr，則瀏覽器會自動在table和tr之間嵌入tbody元素。建議養成使用thead、tbody和tfoot元素的習慣。
caption元素只能夠包含行內元素。tr元素只能夠包含th和td元素。而th和td元素能夠包含任何元素。
12.2 設計HTML5結構
為了使文檔的結構更加清晰明確，HTML5新增與頁眉、頁腳、內容塊等文檔結構相關聯的結構元素。
內容塊是指將HTML頁面按邏輯進行分割后的區域單位。例如，對於正文內容來說，導航菜單、文章正文、文章的評論等每一個部分都可稱為內容塊。
12.2.1 定義文章塊
article元素用來表示文檔、頁面中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論獨立的插件等。
另外，一個article元素通常有它自己的標題，一般放在一個header元素里面，有時還有自己的腳注。
當article嵌套使用時，內部的article元素內容必須和外部article元素內容相關。article元素支持HTML5全局屬性。
12.2.2 定義內容塊
section元素用於對網站或應用程序中頁面上的內容進行分區。
一個section元素通常由內容及其標題組成。
div元素也可以用來對頁面進行分區，但section元素並非一個普通的容器元素，當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div元素，而非section元素。
在使用section元素時應該注意幾個問題：
- 不要將section元素當做設置樣式的頁面容器，對於此類操作應該使用div元素；
- 如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素；
- 不要為沒有標題的內容區塊使用section元素。
12.2.3 定義導航塊
nav元素是一個可以用作頁面導航的鏈接組，其中的導航元素鏈接到其它頁面或當前頁面的其它部分。
並不是所有的鏈接組都要放進nav元素，只需要將主要的、基本的鏈接組放進nav元素即可。
具體來說，nav元素可以用於以下場合：
- 傳統導航條，作用是當前畫面跳轉到網站的其它主要頁面上去；
- 側邊欄導航，將頁面從當前文章或當前商品跳轉其它文章或其它商品頁面上去；
- 頁內導航，作用是在本頁面幾個主要的組成部分之間進行跳轉；
- 翻頁導航，翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章之間滾動。
12.2.4 定義側邊欄
aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其它類似的有別與主要內容的部分。aside元素有以下兩種使用方法：
- 作為主要內容的附屬信息部分，包含在article元素中，其中的內容可以是與當前文章有關的參考資料、名詞解釋等。
article之內側邊欄1 <header> 2 <h1>HTML5</h1> 3 </header> 4 <article> 5 <h1>HTML5歷史</h1> 6 <p>HTML5草案的前身名為web Application1.0，於2004年初被WHATWG提出，於2007年被W3C接納，並成立了新的HTM L工作團隊。HTML5的第一份正式草案已於2008年1月22日公布。2014年10月28日，W3C的HTML工作組正式發布了HTML5的官方推薦標准</p> 7 <aside> 8 <h1>名詞解釋</h1> 9 <dl> 10 <dt>WATWG</dt> 11 <dd>Web Hypertext Application Technology Working Group，HTML工作開發組的簡稱，目前與W3C組織同時研發HTML5.</dd> 12 </dl> 13 <dl> 14 <dt>W3C</dt> 15 <dd>World Web Consortium，萬維網聯盟，萬維網聯盟是國際著名的標准化組織。1994年成立后，至今已發布近百項相關萬維網的標准，對萬維網發展做出了接觸的貢獻。</dd> 16 </dl> 17 </aside>
- 作為頁面或站點全局的附屬信息部分，在article元素之外使用。
在article之外使用
1 <aside> 2 <nav> 3 <h2>友情鏈接</h2> 4 <ul> 5 <li><a href="#">網站1</a></li> 6 <li><a href="#">網站2</a></li> 7 <li><a href="#">網站3</a></li> 8 </ul> 9 </nav> 10 </aside>
12.2.5 定義主要區域
main元素表示網頁中的主要內容。主要內容區域是指與網頁標題或應用程序中本頁主要功能直接相關或進行擴展的內容。
每個網頁內部只能夠放置一個main元素。不能將main元素放置在任何article、aside、footer、header或nav元素內部。
main元素不會對頁面內容進行分區或分塊。
12.2.6 定義標題欄
header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題。
在一個網頁中可以多次使用header元素。
在HTML5中，header元素通常包含h1~h6元素，也可以包含hgroup、table、form、nav等元素，只要是應該顯示在頭部區域的語義標簽，都可以包含在header元素中。
12.2.7 定義標題組
hgroup元素可以為標題或子標題進行分組，通常它與h1~h6元素組合使用，一個內容塊中的標題與其子標題可以通過hgroup元素組成一組。
如果文章只有一個主標題，則不需要hgroup元素。
<header> <hgroup> <h1>主標題</h1> <h2>副標題</h2> <h3>標題說明</h3> </hgroup> <p> <time datetime="2017-12-05">發布時間：2017年12月5日</time> </p> </header>
12.2.8 定義腳注欄
footer元素可以作為內容塊的注腳，如在父級內容塊中添加注釋，或者在網頁中添加版權信息等。
與header元素一樣，頁面中也可以重復使用footer元素。
可以為article元素或section元素添加footer元素。
12.3 浮動顯示
浮動布局不同於流動模式，它能夠讓對象脫離左右相鄰元素，在包含框內向左或向右側浮動顯示，但是浮動元素不能脫離文檔流，依然受文檔流影響。
12.3.1 定義浮動顯示
默認情況下，任何元素都不具有浮動特性，可以使用CSS的float屬性定義元素向左或向右浮動，語法如下：
float: none | left | right
其中left表示元素向左浮動，right表示向右浮動，none表示消除浮動。
浮動布局模型有以下幾個特征：
- 浮動元素以塊狀顯示，可以定義width和height屬性。
- 浮動元素與流動元素可以混合使用，不會重疊，都遵循先上后下顯示規則，都收到文檔流影響。但浮動元素能夠改變相鄰元素的顯示位置，可以向左或向右並列顯示。
- 浮動元素僅能改變水平顯示方式，不能改變垂直顯示方式，依然受文檔流影響。流動元素總會以流動的形式環繞浮動元素左右顯示。
- 浮動元素可並列顯示，如果包含框寬度不夠，則會錯行顯示。
12.3.2 清除浮動
使用CSS的clear屬性可以清除浮動，定義與浮動相鄰的元素在必要的情況下換行顯示，這樣可以控制浮動元素記載一行內顯示。取值包括：
- left：清除左邊的浮動元素，如果左側存在浮動元素，則當前元素會換行顯示；
- right：清除右邊的浮動元素，如果右側存在浮動元素，則當前元素會換行顯示；
- both：清除左右兩邊浮動元素，不管哪邊存在浮動元素，則當前元素都會換行顯示；
- none：默認值，允許兩邊存在浮動元素。
12.3.3 浮動嵌套
浮動元素可以互相嵌套，嵌套規律與流動元素嵌套相同。浮動的包圍元素總會自動調整自身高度和寬度以實現對浮動子元素的包含。
如果把浮動元素嵌入流動元素之內，則父元素不能夠自適應子浮動元素的高度。
12.3.4 混合浮動布局
略
12.4 定位顯示
精確定義網頁元素的顯示位置，可以是絕對位置，也可以是相對位置。
12.4.1 定義定位顯示
在CSS3中可以通過position屬性定義元素定位顯示，語法如下：
position:static | relative | absolute | fixed
- static：表示不定位，遵循HTML5默認的流動模型；
- relative：表示相對定位，通過left、right、top、bottom屬性確定元素在正常文檔流中偏移位置；
- absolute：表示絕對定位，將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對於其最近的一個具有定位屬性的父定位包含框進行絕對定位。如果不存在這樣的定位包含框，則相對於瀏覽器窗口，而層疊順序則通過z-index屬性來定義。
- fixed：表示固定定位，於absolute定位類型類似，但他的定位包含框是視圖本身，由於視圖本身是固定的，固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流影響。
12.4.2 定位框
CSS定位包含框（定位框）是絕對定位的基礎。
定位框是為絕對定位元素提供坐標偏移和顯示范圍的參照物，即確定絕對定位的偏移起點和百分比長度的參考。
如果定義了包含元素為定位包含框以后，對於被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來決定自己的顯示位置。
12.4.3 相對定位
相對定位元素的偏移量是根據它在正常文檔流里的原始位置計算的。相對定位元素的偏移量與絕對定位一樣。
相對定位元素遵循的是流動布局模型，存在於正常的文檔流中，但他的位置可以根據原位置進行偏移。由於相對定位元素占有自己的空間，即原始位置保持不變，因此它不會擠占其它元素的空間，但可以覆蓋在其它元素之上進行顯示。
與相對定位不同，絕對定位元素完全被拖離正常文檔流中原來的空間，且原來空間不再被保留，被相鄰元素擠占。
把絕對定位元素設置在可視區域之外會導致瀏覽器窗口的滾動條；而設置相對定位元素設置在可視區域之外不會導致滾動條出現。
12.4.4 定位層疊
定位元素之間可以重疊顯示，與圖像合成類似。
在流動布局和浮動布局中是無法實現這種重疊效果的，而利用定位重疊技術可以創建動態網頁。
在CSS中可以通過z-index屬性來確定定位元素的層疊等級。
z-index屬性只有在元素的position屬性取值為relative、fixed或absolute時才可以使用。
z-index屬性值越大，層疊級別越高；如果屬性值相同，則根據結構順序層疊。
如果z-index屬性值為負值，則將隱藏在文檔流的下面。
12.4.5 混合定位布局
混合定位是利用相對定位的流動模型優勢和絕對定位的層布局優勢，實現網頁定位的靈活性和精確性優勢互補。
例如：如果給父元素定義為position:relative，給子元素定義為position:absolute，那么子元素的位置將隨着父元素進行變化。