第二篇 用HTML和CSS語言寫靜態(tài)Web頁代碼
時間：2023-09-26 08:48:02 | 來源：網(wǎng)站運營
時間：2023-09-26 08:48:02 來源：網(wǎng)站運營
第二篇 用HTML和CSS語言寫靜態(tài)Web頁代碼：
Web，也是人們對 “ World Wide Web ”的簡稱，理解Web并不容易，我們在前一章對Web和互聯(lián)網(wǎng)的概念進行了闡述，了解到這二者互為軟硬件的關系。把Web看作是基于全球互聯(lián)網(wǎng)的一個標準的信息平臺，對大多數(shù)人而言這樣的We很抽象，但是，如果我們可以把Web看作聯(lián)入互聯(lián)網(wǎng)計算機內(nèi)的所有Web頁或文檔（document）的集合，理論上，人們也可以通過互聯(lián)網(wǎng)技術共享分布在這個集合里的的所有數(shù)字文檔。這樣理解Web，或許就比較具體了。
世界上第一個Web頁由Web的發(fā)明者——蒂姆??伯納斯?李爵士（Tim Berners-Lee）設計制作，這個Web頁的內(nèi)容是一篇劃時代的文章，關于他對Web的構想和實現(xiàn)方法。
世界上第一個Web頁，盡管只有文字，其中既沒有沒有圖片、也沒有任何其他媒體信息，但沒有誰會否定這個Web的價值，它的價值就在于文檔的內(nèi)容。
今天的人們使用Web，相當大的程度也是獲取自己最關心的信息，這些信息的形式有文本、圖片、音視頻、軟件互動界面等，我們把這些信息統(tǒng)統(tǒng)稱之為“內(nèi)容”（content）。
當然也有很多人們對信息的外在形式和外觀非常在意，而人們根本關注的是信息的內(nèi)容，這就是我們經(jīng)常說的“內(nèi)容為王”。
HTML語言，也稱超文本標記語言，這是我們編寫Web內(nèi)容的語言，了解HTML語言對于使用Web語言編程是至關重要的，而學習HTML語言也是Web語言中最容易的。因此我們下面用三節(jié)篇幅，通過一些概念整合和案例，快速讓讀者掌握這個語言的使用。
2.1 HTML元素和Web頁
HTML的元素（element），在編寫HTML代碼時我們也稱之為標記，當我們使用這些標記編寫HTML代碼并運行時，就可以在計算機的Web頁中產(chǎn)生元素對象，所有這些元素對象，其內(nèi)容組合起來，就可以實現(xiàn)用HTML語言描述Web頁內(nèi)容。
HTML這個簡單語言包含有一百多個這種基本的“詞匯”，但常用的也就幾十個，這些標記在Web內(nèi)容中創(chuàng)建的則是元素（element），元素是HTML語言來組織編寫的Web頁的基本單位。
用HTML語言組織Web頁是非常簡便的，這個過程非常類似孩童時學習口語過程。我們發(fā)現(xiàn)，二三歲的孩子天生就有學習口語的能力，他們沒有什么顧慮，非常直接，就靠說出合適的詞匯來代表表達的內(nèi)容，我們在初次編寫Web程序的HTML部分時，也與孩童學口語時表達詞匯類似，即選擇HTML語言的合適詞匯（也稱為標記或元素）來代表要表達內(nèi)容。
比如 : <p>How are you ! </p>
這條HTML語句的基本標記是 <p>和</p> ， p是英文paragraph（段落）的縮寫，在HTML語言中（利用特殊字符 “ < ” 和 ” > ” 打上標識后）字符p也就代表了段落元素，即<p>和</p>，則是HTML語言表達的、可以被計算機可以區(qū)分和識別Web內(nèi)容。
一、HTML元素的基本結構
HTML標記的書寫的基本形式，根據(jù)元素是否為容器，可分為以下二種形式：
形式1：<tagName 屬性1=“……” 屬性2=“……” > 內(nèi)容 </ tagName >
或
形式2：<tagName 屬性1=“……” 屬性2=“……” >
對上面的標記的基本形式稍作分析：英文符號 < 和 > 是標記的關鍵字，初學者切不可誤輸入相應的中文符號。可用的tagName 、 屬性1、屬性2等都是HTML語言的保留的英文單詞的縮寫形式，成為標識符，如果我們對這些保留標識符的輸入錯誤，也不會產(chǎn)生錯誤反饋，這些錯誤將被瀏覽器給忽視。
這二種創(chuàng)建元素的方式的形式1會產(chǎn)生稍微復雜的結構，因為標記內(nèi)可能還包含其他的標記，形成俄羅斯套娃那樣的結構，這點我們值得未來去仔細探索。
當前我們只考慮一個標記只會在Web內(nèi)容中產(chǎn)生一個元素，在我們書寫HTML語句時，可以從HTML語言提供的一百多個元素中去“選擇“，不同元素表述不同的語義，這樣也就實現(xiàn)了Web頁的基本語義表達。
比如，在Web頁中我們需要表達一句總結性的觀點文字，這也是我們漢語常說的“ 標題 “，而英文的含義則為“ title “。這時標準的做法，我們會把這句總結性的觀點文字，寫在HTML語言的title 元素中，而不是隨意寫在Web頁的其他元素中。這樣，我們就算用HTML語言合適的標記（title）準確表達了Web內(nèi)容（內(nèi)容總結的標題）的語義。
二、構成Web頁的最基本的HTML元素（代碼）結構
HTML語言圍繞“語義“表達，經(jīng)過近二十年的版本演化，終于在HTML5版本時，確定了Web頁的HTML代碼的基本結構，列出如下：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"><title> 最初出現(xiàn)的內(nèi)容——Web頁的標題
</title> </head> <body> Web頁的內(nèi)容
</body></html>今天我們使用包含HTML代碼編寫的代碼工具，可以自動產(chǎn)生上述源代碼結構（粗體表示）。在此結構基礎上，按Web頁內(nèi)容設計的需要，我們則繼續(xù)使用HTML代碼書寫的其他內(nèi)容即可（斜體表示）。
上述HTML語言表達的Web頁基本結構，每一條代碼都有具體含義且非常重要，下面我們一一簡單描述：
<!doctype html> “ doctype ” 的英文全稱為document type ，這條語句表明本文件是采用HTML5標準編寫的源文件。
HTML5標準的語言學習使用雖然非常簡單，但這是使用層面的表象，實際上HTML5標準的內(nèi)涵非常豐富，包括了我們后面學習的CSS腳本語言和JavaScript程序語言。HTML5標準是一個被全球廣泛支持的Web應用標準體系，互聯(lián)網(wǎng)網(wǎng)絡社區(qū)和計算機業(yè)界經(jīng)歷了近二十年的漫長和探索努力，才基本實現(xiàn)了這個標準，也獲得了行業(yè)的廣泛支持。
<html lang="en">和</html>一對html標記（tag），包含了所有Web代碼的內(nèi)容，這個元素代表了當前Web文檔本身。請注意，html元素是Web語言的最外層的一個元素。
<head>和</head>一對head標記（tag），包含了歸屬于“頭部”的Web代碼內(nèi)容，這個元素是Web文檔最主要的二個元素之一，另一個元素當然是body 。如果把html比喻成一個人，則head和body則正好是這個人的頭和身體。head元素中的html語句一般都是設置和規(guī)劃性的內(nèi)容，而body元素中的html語句則表現(xiàn)的大多數(shù)Web頁實際需要顯示的內(nèi)容。
<meta charset="UTF-8">注意，這條meta元素是寫在head元素之內(nèi)的，且這條語句沒有</meta>結束標記。該語句的內(nèi)涵，我們會在后面陸續(xù)介紹，當前只要理解這條HTML語句設置了Web文檔的編碼標準，即國際通用字符編碼Unicode體系的"UTF-8"。
這條meta語句必須作為Web頁的基本結構，因為Web代碼或數(shù)據(jù)的本質上是文本字符，而文本字符的在計算機中必須使用統(tǒng)一的數(shù)字編碼，否則全球的Web上的代碼和信息就會無法溝通，不同地區(qū)的Web頁和瀏覽器會發(fā)生雞同鴨講的情況，這也就是二十年前網(wǎng)絡世界常發(fā)生“亂碼”的緣故。
<title>和</title>需要注意，title元素也是寫在head元素之內(nèi)的，title元素表達的語義是信息的結構，而非寫在body內(nèi)的內(nèi)容。
<body>和</ body>body從語義上看，用來表達Web頁的可見的“身體”，也就說出現(xiàn)在Web頁的內(nèi)容，都必須全部寫在body元素內(nèi)。
2.2 構建Web頁基本的語義結構
上一節(jié)介紹Web頁的基本元素結構，這些結構定義了Web信息的“骨架”，我們大致了解分成head和body二個部分，正如同一個人體那樣，大致分為頭部和身體。在Web頁的頭部內(nèi)部，我們當前只要知道簡單的title元素和特殊的<meta charset="UTF-8">元素（這個話題會在后面專門涉及）。而在Web身體內(nèi)部，本節(jié)我們將要使用一些常用的HTML語義標簽，定義出Web頁的內(nèi)容，構建Web頁基本的語義結構。
一、用經(jīng)典的“Hello world!”理解標簽和屬性
所有程序學習的第一步都是打印“hello world”，我們也不能免俗。下面舉例，在body元素內(nèi)，我們增加一個h1元素，用“h1 ”這個最常見的語義標簽，即一號標題字（headline）輸出文字。再通過更改body元素的屬性，實現(xiàn)黑底白字的內(nèi)容。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示HTML語言的基本結構、HTML標記的屬性</title>
</head>
<body bgcolor="black" text="white">
黑色背景色，白色文字色。
<h1>
Hello world!
</h1>
</body>
</html>
代碼在瀏覽器的運行效果如下：
我們通過二條簡單的HTML標簽，在瀏覽器中創(chuàng)建了二個有特色的元素。一是針對body元素作為Web頁的身體，通過改變body元素的text屬性和bgcolor屬性，讓Web的顏色和背景色發(fā)生了變化。二是通過h1元素創(chuàng)建了占據(jù)單獨一行空間的標題——“Hello World”文字，實際上，我們可以把h1改為h2、h3……h(huán)6，這六個標簽都是語義一樣，表示不同級別的標題元素。
我們還發(fā)現(xiàn)由h1元素控制的“Hello World”文字也發(fā)生了顏色變化，從代碼結構（body元素是h1元素的父級），我們可推斷，設置在父級級元素的屬性也許會遺傳給子級元素。
二、通過p標簽和br標簽來理解容器元素
也許你會發(fā)現(xiàn)，HTML元素的標簽寫法有二種：有些元素既有開始標簽，又有結束標簽，比如我們前面使用的h1、h2、……h(huán)6標題元素的標簽。而有些元素只有開始標簽，沒有結束標簽，比如meta元素的標簽。前一類標簽，我們稱之為“容器”元素，因為這些元素可以包含其他元素，或者說這些元素可以作為父級元素。后一類沒有結束標簽的元素，我們暫且稱之為非“容器”元素了。
下面我們使用的p標簽，可以在Web頁上產(chǎn)生段落元素（yuansu） ，而br標簽只能產(chǎn)生換行元素 ，二個元素從容器元素的角度看有區(qū)別。p是容器（container）元素，br卻不能作為容器元素，也不存在br結束標簽，下面的案例，以這二個元素為例，直觀地讓我們理解HTML標簽是否具備容器特性。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示p標簽和br標簽，對比二者在換行格式上的區(qū)別</title>
</head>
<body bgcolor="black" text="white">
<p align="center">
三國演義開篇
</p>
滾滾長江東逝水，浪花淘盡英雄。<br>
是非成敗轉頭空。<br>
青山依舊在，幾度夕陽紅。<br>
白發(fā)漁樵江渚上，慣看秋月春風。<br>
一壺濁酒喜相逢。<br>
古今多少事，都付笑談中。
<p align="right">
——調寄《臨江仙》
</p>
</body>
</html>
代碼在瀏覽器的運行效果如下：
我們發(fā)現(xiàn)可以作為容器元素的p標簽，內(nèi)部包含了詩詞文字，這些被包含的文字，從格式上受到了p元素的控制。從計算機信息的內(nèi)部看，Web頁上的這些p元素，也是一個個的內(nèi)部對象，在這些對象中，嵌入了詩詞文字信息。
而作為非容器元素的br標簽，標簽內(nèi)部沒有任何其他信息，只是單獨執(zhí)行一個特定的功能——換行，導致br標簽后面的內(nèi)容發(fā)生換行。
三、HTML元素之間的嵌套
前面介紹了p元素，其作為容器元素可以包含文字，其實這只是容器元素的最初級能力，下面我們介紹容器元素包含其他元素（也可以是容器元素），從語法上看有嵌套之意，我們就稱為HTML元素之間的嵌套。用嵌套方式，HTML語言可以表達多層次的語義，比如前面的p元素和h1元素，正是嵌套在body元素之內(nèi)。由于對我們而言，Web頁的body是天然存在的元素，不是我們創(chuàng)建的，所以我們可能沒有發(fā)現(xiàn)這個嵌套。
下面的例子，我們引入font標簽，為文字設定字體屬性，讓p元素和font元素產(chǎn)生嵌套關系，同時嘗試以下不同html元素之間，p作為段落概念和font作為字體的概念，在語義上的配合。代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示font標簽對顏色和字體的控制，了解HTML標簽間的嵌套</title>
</head>
<body bgcolor="gold">
<p align="center">
<font size="6" face="黑體" color="red">
三國演義開篇
</font>
</p>
<font size="5" face="楷體">
滾滾長江東逝水，浪花淘盡英雄。<br>
是非成敗轉頭空。<br>
青山依舊在，幾度夕陽紅。<br>
白發(fā)漁樵江渚上，慣看秋月春風。<br>
一壺濁酒喜相逢。<br>
古今多少事，都付笑談中。
</font>
<p align="right">
<font size="4">
——調寄《臨江仙》
</font>
</p>
</body>
</html>
代碼在瀏覽器的運行效果如下：
通過在p元素中嵌套font元素，我們既實現(xiàn)了對古詩文字的段落控制，也實現(xiàn)了對古詩文字的字體外觀的控制。從語義看，p和font元素各司其職，對文字的功能
四、HTML源代碼對多余空白符的忽略性
文本的空白符是指 空格、Tab、回車等字符，我們經(jīng)常連續(xù)用這些字符來對代碼的文本實現(xiàn)排版，以便讓代碼可讀性更好，但程序運行時源代碼中的多余空白符都會被忽略。HTML代碼也有這個特性，比如下面的html源文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
HTML語言對源代碼的空白符。
</title>
</head>
<body bgcolor="gold">
<p align="center">
<font size="6" face="黑體" color="red">
三國演義開篇
</font>
</p>
<font size="5" face="楷體">
滾滾長江東逝水，浪花淘盡英雄。
是非成敗轉頭空。
青山依舊在，幾度夕陽紅。
白發(fā)漁樵江渚上，慣看秋月春風。
一壺濁酒喜相逢。
古今多少事，都付笑談中。
</font>
<p align="right">
<font size="4">
——調寄《臨江仙》
</font>
</p>
</body>
</html>
我們用瀏覽器打開這個文件后，效果下圖所示：
我們發(fā)現(xiàn)源碼中，古詩正文中所有的空白符（空格、Tab、回車），只要超過2個以上，都被忽略了。瀏覽器在渲染內(nèi)容時把連續(xù)的空白符在Ｗｅｂ頁上只顯示一個空格。瀏覽器這樣解釋空白符，與分析代碼的源程序是類似的，為了讓代碼格式更符合我們的習慣，人們會用這些空白符對代碼“排版”，但而計算機在解釋這些源程序時，不需要這些多余的“排版”，編譯或解釋的系統(tǒng)只需要知道這些源代碼種的連續(xù)空白，只相當于一個空格鍵即可。
五、HTML的注釋
相對其他高級語言，HTML的注釋元素似乎不太友好，不太好記憶。注釋元素以 <!-- 開頭， 以--> 結束，中間的內(nèi)容用作注釋文字。
像所有的高級語言那樣，程序執(zhí)行時碰到注釋的開頭后，瀏覽器會把注釋結束符號之前的所有信息當作無需關心的信息。由于注釋與源代碼寫在一起，所以我們務必要把結束符寫正確，否則會導致有些代碼被當作注釋信息被忽略。
本節(jié)再增加介紹一個HTML水平劃線的元素，簡單好用，可以實現(xiàn)在瀏覽器畫出水平線，這是一個非容器類型元素，在學習HTML語言的初期，這個標記在實現(xiàn)版面劃分很有作用。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解hr標簽的特征，學習HTML語言對源代碼的注釋語句寫法。</title>
</head>
<body>
<hr color="red" size="5" width="30%">
1，hr標簽用于繪制水平線
<!-- 插入了占頁面30%寬度一條紅色線 -->
<hr color="green" size="7" width="60%">
2，hr標簽的多個屬性，可以設置線的外觀
<!-- 插入了占頁面60%寬度一條綠色線 -->
<hr color="blue" size="10" width="90%">
3，hr標簽沒有結束標簽
<!-- 插入了占頁面90%寬度一條藍色線 -->
<h1>瀏覽器不會顯示以上3條注釋！！</h1>
</body>
</html>
我們用瀏覽器打開這個文件后，效果圖顯示為：
我們上面這個案例沒有具體的內(nèi)容主題，只是為了演示注釋、水平線標簽的使用而已，初學者需要多嘗試HTML元素的不同屬性。
比如，在hr標簽中，案例連續(xù)使用了color 、 size 、 width三個屬性，用來控制hr元素的外觀，可以讓初次學習HTML語言的讀者實際了解元素屬性的寫法和作用。
對于color屬性的取值，使用了最為方便的英文單詞形式。
再比如，對于水平線粗細的size屬性取值，使用了幾個數(shù)字，HTML語言比較簡單，隱含了單位“像素”的概念。
最后，width這個屬性可能在后面的學習中經(jīng)常用到，它作為屬性在其他元素中也常常有效。我們在本例用它來來設置水平線的寬度。尤其值得注意，本例中的width的取值，我們使用了百分比的形式，這樣，我們可以動態(tài)地按瀏覽器寬度的百分比來設置水平線，這也是讓Web頁中的元素具備彈性的最基礎的方法。
六、HTML的列表標記
信息的無序是無法忍受的，在HTML內(nèi)容表達中，為了讓信息更加有序表達，設計了列表元素，列表元素分成有序（ol）和無序（ul）二類，我們用案例演示如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML的列表標簽，有序、無序的概念和寫法。</title>
</head>
<body>
<p align="center">地球生命種類</p>
<hr color="blue" size="2">
無序列表
<ul>
<li> 微生物 </li>
<li> 植物 </li>
<li> 動物 </li>
<li> 其他 </li>
</ul>
<hr color="red" size="2">
有序列表
<ol>
<li> 病毒 </li>
<li> 細菌 </li>
<li> 植物 </li>
<li> 動物 </li>
<li> 其他 </li>
</ol>
</body>
</html>
在瀏覽器中打開，上面的代碼效果如下：
我們發(fā)現(xiàn)列表分成二個層次：外層由容器元素<ul>或<ol>控制，內(nèi)層是<li> 控制，li作為列表元素，也是由容器元素。在網(wǎng)頁排版中，導航欄的語義也經(jīng)常使用無序列表控制。
七、用列表標記探索元素間的嵌套
整個Web頁，可以看作由元素互相嵌套產(chǎn)生，比如最外層的html元素，就代表Web頁本身。在Web頁的body元素中，我們可以使用許多不同的元素，來構建Web頁的清晰的語義。
下面案例中，我們可以同時使用有序列表和無序列表，把有序列表設置為父級容器，按數(shù)字次序把生命的三種形式排列出來，在每種生命形式的內(nèi)部再使用無序列表舉例。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML的標簽間嵌套和寫法，以“列表標簽”為例。</title>
</head>
<body>
<p align="center">地球生命三大種類</p>
<hr color="blue" size="2">
<ol>
<li> 微生物 </li>
<ul>
<li>病毒</li>
<li>細菌</li>
<li>藻類</li>
</ul>
<li> 植物 </li>
<ul>
<li>草本</li>
<li>樹木</li>
</ul>
<li> 動物 </li>
<ul>
<li>魚類</li>
<li>兩棲類</li>
<li>鳥類</li>
<li>哺乳類</li>
</ul>
</ol>
</body>
</html>
在瀏覽器中打開，上面的代碼效果如下：
從效果中，按照語義層次，瀏覽器可自動設定好了各列表層次的對齊方式。至此，我們還未使用任何設置HTML元素外觀的語句（CSS語句），僅使用HTML默認的語義標簽，也可較好地展現(xiàn)頁面的外觀。
八、HTML語言的字符實體
作為一門宏觀語義的語言，有一些字符被HTML作為關鍵字使用，因此我們不能再Web頁中直接輸入該字符使用，比如“ < ” 和 “ > ” 這兩個關鍵的標記符號，再比如空白鍵（多個空格、Tab、回車等）。另外，為了在HTML語言中表達一些鍵盤無法直接輸入的字符，必須使用一種特殊的表達，來突破HTML標記表達的字符限制。
我們把在Web頁中，表達不能直接在HTML語言輸出的字符，稱為HTML的特殊字符實體（Character Entities）的表達，這種表達有一個共性，就是使用符號 “ & ” 開頭，連接一些英文單詞。下面舉例說明。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML語言對字符的表達的局限性，學習常見字符實體寫法 。</title>
</head>
<body>
<h2>
下面是HTML語言無法直接書寫的，部分字符實體（Character Entities）
</h2>
<font size="6" color="#AA0000">
乘號 : ×
除號 : ÷
小于 : <
大于 : >
連接 ：&
版權 : ©
商標 : ®
</font>
</body>
</html>
在瀏覽器中打開，上面的代碼效果如下：
2. 3 Web頁內(nèi)的常見的基本元素及其常用屬性
除了前面一節(jié)介紹的表達文字的元素，作為Web頁內(nèi)容的常見組成部分，還有表達圖像類型的元素、表達超級鏈接的元素等。在學習HTML時，并不需要把常用元素都介紹一遍，作為這些組成內(nèi)容的元素，我們可以在寫代碼需要時，隨時使用，隨時查閱元素的基本寫法和屬性即可。
本節(jié)首先用案例演示了表達圖像的二種方式，即作為元素嵌入和作為背景圖像；然后介紹了文件字符集概念；最后以介紹Web超級鏈接概念和演示a元素使用作為結束。
一、外部圖像、img標記和屬性
我們編寫的HTML代碼以文件形式存在，而使用img元素嵌入的數(shù)字圖像本身也是以文件的形式存在的。
使用img元素標簽可以把圖像文件嵌入HTML內(nèi)容中，我們在下面用一個案例來作演示，案例使用了一個圖像文件，文件名為： ” birds.jpg “ ，在最初的操作中，圖像文件要放在和HTML文件同樣的文件中。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解Web頁與外部圖像文件的關系，學習img標記的寫法 。</title>
</head>
<body>
<img src="birds.jpg" border="1" width="100" >
<img src="birds.jpg" border="3" width="300">
<img src="bird.jpg" border="3" width="300" alt="演示：寫錯圖片文件的URL">
<img src="birds.jpg" border="4">
</body>
</html>
本例中，對于同一張圖像文件，我們使用img元素，將該圖像一共四次嵌入Web頁，而其中的第三次嵌入，我們在代碼中有意寫錯屬性值——文件名，效果如下圖所示：
二、元素body背景圖屬性
在HTML標記中，body元素的background屬性可以用來設置背景圖，用這種方式嵌入的背景圖與使用img元素嵌入的圖像完全不同，前者是把圖像作為背景，后者是把圖像作為內(nèi)容，前者的文字可以覆蓋圖片，而后者的文字與圖片作為同等對象，相互間可以實現(xiàn)排版。
本例需要的背景圖back.jpg ，與本html文件處于同一文件夾。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解Web頁的背景圖概念，學習通過body標記添加背景圖寫法 。</title>
</head>
<body background ="back.jpg">
<p align="center">
<font size="6" face="黑體" color="red">
三國演義開篇
</font>
</p>
<font size="5" face="楷體">
滾滾長江東逝水，浪花淘盡英雄。<br>
是非成敗轉頭空。<br>
青山依舊在，幾度夕陽紅。<br>
白發(fā)漁樵江渚上，慣看秋月春風。<br>
一壺濁酒喜相逢。<br>
古今多少事，都付笑談中。
</font>
<p align="right">
<font size="4">
——調寄《臨江仙》
</font>
</p>
</body>
</html>
打開設置背景圖的Web頁后，我們發(fā)現(xiàn)body的背景圖實現(xiàn)了重復貼圖，小小的背景圖在Web頁的可視區(qū)域內(nèi)在橫向和縱向反復重復，完整地覆蓋了整個body區(qū)域。而body區(qū)域的大小并未確定（我們以后可以使用CSS對此實現(xiàn)設置），其默認的尺寸與瀏覽器有關。
效果如下圖：
三、html文件的字符集和使用meta標記進行設置
在現(xiàn)代的HTML文件的基本結構中，有一條非常重要的語句，就是寫在head元素中的 <meta charset="UTF-8"> 。英文單詞 meta的意義是 “元“ ，因此HTML語言設計了meta元素用來對一些最基礎的情形進行設定。比如我們在本例中的字符集（charset）。
十幾年前誕生的unicode編碼，實現(xiàn)對全球文明的字符進行統(tǒng)一編碼的理想。UTF-8是unicode編碼家族中，在Web和代碼世界中，普遍使用的編碼技術。由于UTF-8編碼的歷史不長，比大多數(shù)編程語言都年輕很多，因此有些編程語言和編輯器按老習慣會導致錯誤設置。我們下面用一個案例對此演示一個經(jīng)典的錯誤。
我們使用編輯器在存盤時，采用ANSI字符集，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
本文件存盤錯誤地使用了ANSI字符集，但在meta元設置中將字符集設為UTF-8。</title>
</head>
<body background ="back.jpg">
<p align="center">
<font size="6" face="黑體" color="red">
三國演義開篇
</font>
</p>
<font size="5" face="楷體">
滾滾長江東逝水，浪花淘盡英雄。<br>
是非成敗轉頭空。<br>
青山依舊在，幾度夕陽紅。<br>
白發(fā)漁樵江渚上，慣看秋月春風。<br>
一壺濁酒喜相逢。<br>
古今多少事，都付笑談中。
</font>
<p align="right">
<font size="4">
——調寄《臨江仙》
</font>
</p>
</body>
</html>
使用錯誤的字符集導致頁面效果如下：
在上面這個案例中，我們還是按HTML5標準，使用meta元素設定了本文件采用了"UTF-8"的編碼標準。但實際上，在存盤時，我們?nèi)藶檫x擇了"ANSI"（美國標準編碼）。通過仔細觀察，我們可以發(fā)現(xiàn)，HTML文件中所有的字符，只要是英文字符，就能正確表達，而非英文字符，則發(fā)生亂碼。
在Web頁中，"UTF-8"的編碼聲明和實際存盤設置必須統(tǒng)一，特別對于一些傳統(tǒng)的文本編輯器，其可能默認的編碼方式很可能是"ANSI"，這種類似ASCII的編碼是雖然可以表達非英語的文字字符，但會與我們在HTML文件結構中設定meta字符集不一致。
四、用html字符編碼表達其他文化（非英語和中文）的字符
人類發(fā)明了文字，文字的最基本部分由字符構成，不同的文明會采用不同的文字，也就采用了不同的字符，自從unicode編碼技術誕生以來，得到了很大的普及。Web也因此可以在一個頁面中，同時顯示二種以上文明的字符。
對于使用漢語字符的中國人來說，使用計算機的鍵盤和其他輸入設備，稍作學習，就可以輕松地輸入母語和英語字符。對于其他非英語的文明，也是如此，比如日文和泰文，也可以輕松地與英文同時混合使用。但是在同一個Web頁中，能否使用二種以上非英文的字符呢？
下面這個案例演示同時顯示的字符包括：漢文、拉丁文、日文、希伯來文。具體代碼有點像字符實體的寫法，使用 HTML的關鍵字 & 開頭，再配合使用16進制的編碼，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML語言直接用編碼，書寫其他文明的字符（非本國、非英語）。</title>
</head>
<body background ="back.jpg">
<p align="center">
<font size="6" face="黑體" color="red">
HTML語言用編碼，來表達其他文明的文字
</font>
</p>
<font size="7" face="楷體" color="blue">
拉丁文：ßÞÛÜàáâ<br>
日文：あぃいぅうぇえ<br>
希伯來文：סעףפץצק<br>
</font>
</body>
</html>
用瀏覽器打開上面的html文件，效果如下：
地球上所有文明的文字字符超過十萬個以上，其中英文字符一百多，漢字字符一萬多，unicode標準也一直處于動態(tài)細化之中。文字符號的學習和理解要耗費大量時間，一般人有限的人生不可能認知二種以上的語言的文字，但從技術上理解文件字符的數(shù)字化卻不難，我們可以對此有一定的了解，讓web頁面能在全球的瀏覽器系統(tǒng)中通用，關鍵的概念包括：字符全球統(tǒng)一編碼的原理，編碼的標準和名稱等。
五、超鏈接、URL、a標記
Web文檔本質上是一個計算機文本文件，在這個文件里面，我們用各種語義化的標記信息描述Web的內(nèi)容。而通過Web的超級鏈接元素，我們可以使用簡單a標記和屬性，就可以實現(xiàn)從當前瀏覽的Web文檔跳轉到互聯(lián)網(wǎng)或本地的其他資源，這個資源可以是一個URL網(wǎng)址，也可以是任何其他的計算機文件。
下面的案例把超鏈接的a元素作為容器，容器內(nèi)部是網(wǎng)站文字名稱，這樣就實現(xiàn)了最簡單的超級鏈接。代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接標記和絕對URL</title>
</head>
<body>
<a href="
https://www.edu.cn">
教育科研網(wǎng)
</a>
<a href="
https://www.edu.cn" target="_BLANK">
CERNET
</a>
<a href="
https://mail.qq.com" target="_BLANK">
qqMail
</a>
<a href="
https://mail.qq.com">
進入QQ郵箱
</a>
</body>
</html>
用瀏覽器打開上述代碼，頁面效果如下所示：
教育科研網(wǎng) CERNET qqMail 進入QQ郵箱
點擊這些超級鏈接標記控制的文字，瀏覽器則會利用本機的http協(xié)議打開a元素的href屬性指定的地址。增加了target="_BLANK"屬性的瀏覽器則會為這個超鏈接地址增加一個新窗口，當前頁面則保留在當前窗口。
2. 4 用CSS設置HTML元素的基本外觀
為了讓HTML和CSS這兩種相對簡單的語言盡快配合使用，同時增加寫這兩種代碼的樂趣，本節(jié)我們就開始使用簡單的CSS語言控制HTML元素，從而實現(xiàn)設置Web內(nèi)容的外觀。
讓我們從一條基本的css語句的構成開始，為方便閱讀，按習慣，我們多使用回車鍵，分多行書寫，但請注意，瀏覽器其實是按一行來解釋的。一條基本的css語句的構成如下：
選擇符 {屬性1 : 值1 ; 屬性2 : 值2 ; …… }在第一行開頭的是CSS選擇符（selector），為何稱之為選擇符？大概是CSS使用這個文字來抽象表示W(wǎng)eb頁的那個或那些元素對象，也相當于我們使用CSS語句去選擇Web頁的對象。
花括號（ { } ）的開始和結束中的稱為CSS聲明塊（declaration block），我們用這些聲明是為Web頁的元素對象設置個性化新的外觀。
CSS聲明塊（declaration block）可以由許多語句組成，每條語句結束的位置要用“ ; ”（分號）隔開，單獨工作。每條語句則由屬性名（property）和屬性的取值（value）組成，屬性名和屬性值之間用“ : ” 隔開。
一、CSS語言快速為a標記設定外觀
a元素作為超級鏈接，有著默認的外觀。一般Web設計者都會按風格更改，使用CSS可以非常有效地改變頁面中超級鏈接的樣式。
CSS的書寫非常自由，我們以a的個性化外觀定義開始理解CSS的語法模式。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS語言，控制鏈接外觀</title>
<style type="text/css">
a{
font-size:25px;
color:white;
background-color:blue;
margin-right:50px;
}
</style>
</head>
<body>
<a href="
https://www.edu.cn">
教育科研網(wǎng)
</a>
<a href="
https://www.edu.cn" target="_BLANK">
CERNET
</a>
<a href="
https://mail.qq.com" target="_BLANK">
qqMail
</a>
<a href="
https://mail.qq.com">
進入QQ郵箱
</a>
</body>
</html>
運行上面的代碼，頁面的效果如下：
本例關鍵的代碼為：
<style type="text/css">
a{
font-size:25px;
color:white;
background-color:blue;
margin-right:50px;
}
</style>
為Web頁設置CSS語句的通常做法：將style元素設置在HTML文件的head元素中。style元素是HTML的容器元素之一，其中的內(nèi)容則是一種比HTML語言豐富許多的語言——CSS語言。我們在后面會快速地介紹這種表達Web頁外觀的語言的使用。
本例使用的屬性名：font-size、background-color、margin-right，其英文含義和作用比較簡單，無須浪費篇幅介紹，強調大家通過編寫代碼，手動更改屬性值，來直觀地感受字符大小的單位，顏色的書寫等等。我們發(fā)現(xiàn)，CSS的屬性名一般是二個英文單詞組合而成，中間使用減號“ - “實現(xiàn)二個單詞連接。對于寫錯的屬性名，瀏覽器的CSS解釋器會忽略本條錯誤的CSS語句。
二、HTML的表格元素
表格是使用頻繁的數(shù)據(jù)格式，HTML語言為表格設定了table元素，這個元素是容器元素，表格的一般由行列組成，在table元素中，子元素是行——tr元素，tr元素也是容器元素，tr的子元素是表格單元——td元素。從英文表達上看，table是表格之意，tr則是table row的縮寫形式，td則是table data之意，也表達了表格內(nèi)最底層的信息是數(shù)據(jù)（data）之意。
另外，有些表格可以設定一種特殊的行——th，這一行內(nèi)的文字格式默認被設為粗體，th是英文 table header的縮寫形式。
下面我們創(chuàng)建一個表格，該表格共四行，每行包含三個表格單元，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>了解HTML的表格有關標記</title>
<style type="text/css">
body{
font-size:25px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr>
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
</table>
</body>
</html>
用瀏覽器打開上述代碼構成的html文件，我們發(fā)現(xiàn)表格在未設定外觀的情況下，也即默認樣式，效果如下圖左所示，使用鼠標拖選，可以看出的確有數(shù)據(jù)格的感覺，如下圖右所示：
正常顯示如下： 反選顯示如下：
在表格開始的HTML元素位置，我們使用th作為表頭，而沒有使用td，特別值得注意，代碼中還使用了colspan 這個屬性，該屬性用于多個列的單元格合并，對這個屬性賦值3，正好將我們表格每行的3個單元格合并。這個HTML代碼片段需要特別注意：
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
另外，相對rowspan 屬性，該屬性用于多個行的單元格合并，在具體的使用中，需要我們有很強的空間抽象能力，或者配合紙筆畫畫，一般要把合并前的規(guī)則表格和合并后的表格，做出對比，才可以決定代碼如何寫，寫錯了HTML表格將變得莫名其妙，也沒法使用。也許借助一些工具可以解決這個問題，但需要強調的是：學習代碼同時要訓練抽象思考的能力，既然現(xiàn)在就有訓練抽象思維的機會，輕易借助工具會讓我們的頭腦變懶。
三、用CSS為HTML的表格元素設定外觀
HTML的表格內(nèi)容較多，必須使用CSS才能高效、方便地控制表格的樣式。
比如，下面我們只需要在style元素中，對表格元素少數(shù)幾個有關的標記選擇器，設定樣式，就可以實現(xiàn)對表格的外觀統(tǒng)一的風格進行設置，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS修飾HTML表格的外觀</title>
<style type="text/css">
body{
font-size:25px;
}
td{
border:1px solid blue ;
width:200px;
text-align:center;
}
table{
border:2px solid black ;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr>
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
</table>
</body>
</html>
用瀏覽器打開包含上面的代碼HTML文件，效果如下圖所示：
關鍵css代碼解釋如下：
body{
font-size:25px;
}
對table元素的父元素body，設定基礎字體為25px（像素）大小。這樣對于子元素table，以及table下的子元素th、tr、td等，都會繼承這個字體大小的屬性設置。
td{
border:1px solid blue ;
width:200px;
text-align:center;
}
為表格每一個數(shù)據(jù)單元格設置藍色邊框，邊框設置為1px（像素）、實線模式。
將td的寬度設為200像素，這樣3個并排的表格td，會占據(jù)600像素的寬度，加上6條邊框，共計600 + 6 ，也即606像素的寬度。
table{
border:2px solid black ;
}
為最外層的表格table元素設定黑色邊框，也是實線模式，但寬度設為2px（像素），這樣設定后，整個表格寬度可計算為： 200乘3 加 6乘1 加 2乘2 。在實際的CSS編碼時，對于我們編碼者，開展這種精確的計算并不重要，但需要知道CSS排版樣式的規(guī)則和原理。
另外，對于父級屬性是否會被繼承的問題，我們也會發(fā)現(xiàn)，對于父級（比如table）的邊框屬性的設定，并不會遺傳給子元素，而在父級元素內(nèi)設定字體和對齊屬性樣式，則會發(fā)生遺傳情況，子元素會發(fā)生繼承現(xiàn)象，比如td會繼承table元素或body元素的text-align屬性設定。
四、初識CSS的盒裝模型
不管是在PC屏幕還是手機屏幕上，盡管大小和長寬比例不同，Web瀏覽器都是一律用二維平面來顯示頁面內(nèi)容，我們也早已習慣在這種平面的方式獲取信息。同樣，組成Web頁內(nèi)容的HTML元素也都是以“矩形盒子“的形式存在，這些元素有的是容器，像一個大盒子，內(nèi)部裝著其他元素（小盒子）。
HTML語言利用這種元素嵌套描繪出來一個盒子套盒子的模式，Web頁每個元素盒子通過CSS的屬性，可以相互影響，形成Web頁最終渲染的效果，這就是CSS的Box Model（盒裝模型）。
我們下面以table這個父級元素和其子級th和td的樣式為例，驗證簡單的CSS盒裝模型（Box Model）情況，也就是說table是一個box，table中的tr、th、td都是一個盒子（bo x），為了看清楚這些盒子，我們使用css語句為盒子們設置的邊框樣式。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘗試CSS常用語法和屬性</title>
<style type="text/css">
th,td{
border:1px solid blue ;
text-align:center;
font-size:30px;
}
table{
width:600px;
height:500px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr>
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
</table>
</body>
</html>
用瀏覽器打開本W(wǎng)eb頁，效果如下圖所示：
本例關鍵的代碼是，在css樣式中，設定了table元素的寬（width）和高（height）的屬性，代碼為：
table{
width:600px;
height:500px;
}
這樣設定后，我們發(fā)現(xiàn)表格內(nèi)部變得很寬松，整個表格將成為一個固定大小的盒子，與之前表格線與內(nèi)部文字緊貼在一起不同。
通過這個例子，可以理解，表格在未設定其width 和height屬性前，table元素盒子大小是不固定的，內(nèi)部子元素的大小將決定table的大小。
Web頁內(nèi)容的主要父級元素body，同樣存在大小不固定的情況，因為在不同的終端上，瀏覽器可以顯示W(wǎng)eb頁的空間肯定也是不同的。在學習CSS樣式設計的初期，我們可以簡單地為body設定其width 和height屬性,方便我們對Web頁和這個最大盒子的控制和理解。
最后，為了看清盒裝模型的邊界，我們組成表格最基層的元素，th和td設置了盒裝模型最外層的邊框線，同時設定了文字的中間對齊等，代碼如下：
th,td{
border:1px solid blue ;
text-align:center;
font-size:30px;
}
五、CSS的類設置
前面的CSS中語句中，我們使用了標記選擇器來作選擇，本例增加一種常用CSS選擇器，類選擇器，顧名思義，這樣，我們就可以在CSS語句設置中，為Web頁元素的樣式增設一個特定類型。比如我們在樣式表中，設定了一個名為blueBack類的樣式，那么在HTML的元素書寫中，就可以直接將某些HTML元素設定為這個樣式，增加屬性：class = “blueBack “ 即可。
我們繼續(xù)上一節(jié)的案例，用CSS類的定義和使用，為表格隔行設定不同的背景色。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的顏色屬性的繼承特性</title>
<style type="text/css">
th,td{
border:1px solid blue ;
text-align:center;
font-size:30px;
}
table{
width:600px;
height:500px;
}
.gray{
background-color:gray;
color:yellow;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr class="gray">
<td>第1名</td>
<td>第2名</td>
<td>第3名</td>
</tr>
<tr>
<td>第4名</td>
<td>第5名</td>
<td>第6名</td>
</tr>
<tr class="gray">
<td>第7名</td>
<td>第8名</td>
<td>第9名</td>
</tr>
<tr>
<td>第10名</td>
<td>第11名</td>
<td>第12名</td>
</tr>
</table>
</body>
</html>
用瀏覽器打開上面的代碼，效果如下圖所示：
本例類選擇器的聲明，采用了最通用的類語法形式，就是以小數(shù)點開頭，緊接著寫類名，比如代碼為：
.gray{
background-color:gray;
color:yellow;
}
相應地，在body中，使用該類的tr行元素，必須增加相應的class屬性，代碼為：
<tr class="gray">
……
</tr>
另外，本例中，類選擇器寫為： tr.gray{…… }，效果也是完全一樣的，但這種寫法具體只有元素tr中的聲明了類gray才被選擇。若頁面中有<h1 class = “gray “>的元素，類選擇器寫為tr.gray{…… }則不會選擇h1元素，但.gray{…… }則是通用的，不會受具體某個元素的限制。
六、HTML元素的嵌套和CSS的設置
用HTML語言我們可以層次清晰地·表達出Web元素的內(nèi)容，定義盒子之間的關系層次。而使用CSS語言，我們可以獨立地設置Web元素組成的盒子的外觀樣式，當然這些樣式也存在盒子之間的繼承關系。大體上，二套語言體系分工合作，互不干擾。
為了讓這兩套語言互相配合，需要在HTML的body中做好元素父子層次的設置，同時在CSS的選擇器上做好對應，CSS選擇器可以寫出盒子元素的層次。
下面我們?nèi)匀皇褂们懊娴谋砀?，為td表格單元內(nèi)嵌入子元素img，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css處理顏色背景，統(tǒng)一表格和圖片的尺寸</title>
<style type="text/css">
th,td{
text-align:center;
font-size:30px;
background-color:black;
color:white;
}
th{
height:80px;
}
table{
width:600px;
height:500px;
}
img{
width:200px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td><img src="images/fbs-1.jpg"></td>
<td><img src="images/fbs-2.jpg"></td>
<td><img src="images/fbs-3.jpg"></td>
</tr>
<tr>
<td><img src="images/fbs-4.jpg"></td>
<td><img src="images/fbs-5.jpg"></td>
<td><img src="images/fbs-6.jpg"></td>
</tr>
</table>
</body>
</html>
用瀏覽器打開，Web頁如下圖所示：
為了讓不同的圖片尺寸完全匹配頁面，我們在CSS中統(tǒng)一設置了圖片的width屬性，顯然在Web元素體系中，img圖像也是符合盒子模型的。代碼如下：
img{
width:200px;
}
為了讓標題更協(xié)調，我們用CSS調大了表格的th元素的高度，讓標題性文字周邊的空間不那么擁擠。代碼為：
th{
height:80px;
}
在每一行的td元素中，我們嵌入了img元素，讀入本W(wǎng)eb頁文件同一層此的目錄images下的外部圖像文件，HTML相關代碼部分如下：
<tr>
<td>
<img src="images/fbs-1.jpg">
</td>
……
</tr>
img元素是非容器元素，一般被嵌入父級容器（比如div）之中，若父級元素的尺寸過小，或者img尺寸過大，則會發(fā)生父級容器被“撐大“的現(xiàn)象，造成Web頁既定的排版效果混亂。我們可以使用CSS語句為圖像設定固定width屬性，就可以為Web頁的插圖設定的合適尺寸。
對于外部圖像而言，其分辨率是確定的，我們使用CSS改變img元素的width或height屬性，都可以改變讓圖像嵌入Web頁內(nèi)分辨率，改變一個維度的分辨率（比如width），瀏覽器會自動計算另一個維度的分辨率（比如height）。保證圖像嵌入Web頁后，保障圖像內(nèi)容的縱橫比。
因此在CSS設定img元素時，我們最好不要同時改變width和height屬性，不通過精確計算，我們寫的參數(shù)是無法保證圖像保持原始的比率的。如果我們通過精確計算，得到了width或height屬性的數(shù)值，同時得到的這2個數(shù)值也是沒有意義的，因為瀏覽器會配合CSS對img元素一個屬性的設置，而自動實現(xiàn)對圖像另一個屬性的精確計算。
七、CSS對超鏈接偽類的設置
我們使用a元素實現(xiàn)在Web頁內(nèi)設置超級鏈接，a元素添加到Web頁后，在沒有任何CSS設定條件下，其實具備系統(tǒng)默認的顏色。
我們前面通過對a元素設定CSS聲明，改變超鏈接的外觀樣式。但這種改變還不夠，CSS對超鏈接有著更加強大的功能，使用偽類，為a元素與人操作實現(xiàn)了動態(tài)效果。
下面我們繼續(xù)為每個嵌入表格單元格的img元素，增加一層a元素，注意，a也是容器。這樣我們就實現(xiàn)了上例中，每個單元格內(nèi)的圖片可以被點擊的功能。
然后，我們在CSS中，使用CSS的超級鏈接偽類，動態(tài)改變用戶使用鼠標與超鏈接互動的效果。代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片用作超鏈接，超鏈接的css偽類特效</title>
<style type="text/css">
th,td{
text-align:center;
font-size:30px;
background-color:black;
color:white;
}
th{
height:80px;
}
table{
width:600px;
height:500px;
}
img{
width:120px;
border:2px solid white;
}
a:link{border:5px solid ;}
a:visited{border:5px solid gray ;}
a:hover{border:5px solid yellow ;}
a:active{border:5px solid red ;}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">福布斯2019排行榜</th>
<tr>
<td>
<a href="images/fbs-1.jpg">
<img src="images/fbs-1.jpg">
</a>
</td>
<td>
<a href="images/fbs-2.jpg">
<img src="images/fbs-2.jpg">
</a>
</td>
<td>
<a href="images/fbs-3.jpg">
<img src="images/fbs-3.jpg">
</a>
</td>
</tr>
<!—為避免類似代碼重復，……代表類似的超鏈接和插入圖片代碼 -->
<tr>
<td>……</td>
<td>……</td>
<td>……</td>
</tr>
</table>
</body>
</html>
用瀏覽器打開包含上述代碼的HTML文件后，用鼠標指向第二個人物，Web頁的效果如下圖所示：
當我們移動鼠標指針時，會發(fā)生鼠標和圖片之間有互動的效果，這種動態(tài)效果，就是CSS的超鏈接的偽類代碼實現(xiàn)的，關鍵CSS代碼如下所示：
a:link{border:5px solid ;}
a:visited{border:5px solid gray ;}
a:hover{border:5px solid yellow ;}
a:active{border:5px solid red ;}
我們發(fā)現(xiàn)，鼠標與控制超級鏈接元素—— a互動時，存在四種狀態(tài)：1、當用戶沒有動鼠標時，Web頁上所有a標簽的樣式，將遵守在a:link中的設置 ； 2、當用戶點擊了Web頁上的某個超鏈接后，相當于Web頁的這個超鏈接已經(jīng)被用戶訪問過了，這種被點擊過的鏈接的樣式，將遵守在a:visited中的設定； 3、當用戶移動鼠標指針到a元素代表的鏈接上是，a的樣式則會動態(tài)變化到a:hover偽類設定的樣式，而當用戶鼠標離開a元素范圍后，a則會恢復原樣。4、當用戶點擊a元素代表的鏈接的那一刻，a元素只在片刻（1秒左右）采用a:active設定的樣式。
值得注意的是，四種狀態(tài)的偽類： a:link 、a:visited 、 a:hover 、 a:active在CSS中定義的順序不能改變，否則這種動態(tài)超鏈接效果就會不正常。
我們發(fā)現(xiàn)，用Love/hate(愛/恨)可以輕松記住這個書寫順序。其中： link –> （l）ove 、visited–> lo（v）e ，link和visited這兩個單詞代表love。 而 hover –> （h）ate 、 active –> h(a)te ， hover和 active這二個單詞代表hate。
而事實上，如果我們用程序運行順序的思維加以分析，就可以理解這四種狀態(tài)的書寫順序了。對于超級鏈接元素的渲染，其實就是瀏覽器根據(jù)情況按順序選擇執(zhí)行這4個語句塊。
a:link狀態(tài)是超鏈接首次被渲染的外觀，如果瀏覽器發(fā)現(xiàn)這個已經(jīng)超鏈接已經(jīng)被訪問，則使用下面的程序a:visited進行渲染。如果瀏覽器當前發(fā)現(xiàn)這個超鏈接正在被鼠標指針觸及，則使用a:hover內(nèi)的代碼渲染，最后不管超鏈接處于那種狀態(tài)，只要發(fā)生什么用戶點擊，則使用最后的a:active內(nèi)的代碼進行渲染。
由于這個例子我們使用a元素作為容器，內(nèi)部內(nèi)容為圖片，超鏈接4個變化的只是圖片的邊框，效果雖有，但并不太明顯。需要練習的讀者可以嘗試使用文字作為a容器的內(nèi)容，使用背景色的變化體現(xiàn)超鏈接的4個狀態(tài)，效果則會更加明顯。
八、區(qū)分內(nèi)聯(lián)元素和塊元素
從HTML元素是否占據(jù)頁面的整行，并有換行效果來看，我們可以把HTML元素分成二類，一類是內(nèi)聯(lián)（inline）元素，另一類是塊級（block）元素。
內(nèi)聯(lián)元素，比如a、span、img、font等，這些元素會和其他文字或元素連在一起，只要父級容器提供寬度足夠，就不會發(fā)生換行現(xiàn)象。而塊級元素，比如p、h1、h2、div、ul、ol等，這些元素會獨立占據(jù)父級容器提供的寬度，在排版時，不會與其他元素在一行中并存。
從語義上看，塊級元素都是重新開啟一個新的內(nèi)容，比如新建一個段落文字，而內(nèi)聯(lián)元素一般都是原有內(nèi)容的繼續(xù)，比如下一個超級鏈接內(nèi)容。HTML語言為元素設定了內(nèi)聯(lián)元素和塊級元素的初始狀態(tài)，而CSS語言可以對此進行更改。
使用塊級div元素作為容器排版是一種習慣，下面我們也使用div元素，為Web頁設定3個區(qū)域，再使用圖片插入后面二個div元素管理的區(qū)域，探索塊級div對排版的設定，以及img元素的內(nèi)聯(lián)元素的特性，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內(nèi)聯(lián)（inline）元素和是塊級（block）元素</title>
<style type="text/css">
img{
width:150px;
border:2px solid black;
}
</style>
</head>
<body>
<div>
圖片雖是塊狀，但其實圖片是內(nèi)聯(lián)元素。
</div>
<div>
<img src="images/fbs-10.jpg">
<img src="images/fbs-9.jpg">
<img src="images/fbs-8.jpg">
<img src="images/fbs-7.jpg">
</div>
<div>
<img src="images/fbs-6.jpg">
<img src="images/fbs-5.jpg">
<img src="images/fbs-4.jpg">
<img src="images/fbs-3.jpg">
</div>
</body>
</html>
用瀏覽器打開包含上述代碼的HTML文件后， Web頁的效果如下圖所示：
我們可以動態(tài)調整瀏覽器窗口寬度的大小，感受div作為塊級區(qū)域對瀏覽器窗口寬度的控制。
2. 5 在Web頁嵌入音視頻
Web作為平臺，用一套高效標準的連接了開發(fā)者和使用者，，而Web的HTML5標準更是增加了許多現(xiàn)代的Web應用接口，為開發(fā)者提供了方便，本節(jié)我們嘗試用HTML語言的HTML5標準新增的標記，簡單地結合CSS，創(chuàng)建可以播放音視頻的Web頁。
一、利用HTML5標準，簡單地為Web頁嵌入音視頻
自從上世界90年代，有個人電腦和應用軟件以來，開發(fā)者就非常難以實現(xiàn)在軟件中嵌入音視頻，并實現(xiàn)播放控制。長期以來造成這種困難有二個原因，一是音視頻的數(shù)字化沒有統(tǒng)一標準，各種壓縮技術和版本讓用戶使用專業(yè)的軟件播放音視頻都有困難，在應用軟件中就更加困難了。二是在一個軟件應用中實現(xiàn)音視頻的解碼，對音視頻數(shù)字化的專業(yè)知識掌握和編有關碼難度也不是普通開發(fā)者能夠企及的。
HTML5的標準的出現(xiàn)讓解決問題看到了希望，Web世界在近十年對這個標準的應用中，既推動了Web視頻標準，還實現(xiàn)了簡單地使用HTML標記，就可在Web頁中嵌入和控制音視頻的功能。
下面案例示范用video標記元素嵌入和播放mp4類型的視頻文件，用audio標記元素嵌入和播放mp3類型的音頻文件，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何簡單地播放聲音和視頻文件</title>
<style type="text/css">
</style>
<script type="text/javascript">
<!--
alert(navigator.appCodeName+ "/n" +navigator.appVersion);
//-->
</script>
</head>
<body>
<div>
<!--下面音頻不保證能在你的瀏覽器中播放，有的瀏覽器不支持mp3 -->
<audio src="medias/myAudio.mp3" controls>
</div>
<div>
<!--下面視頻頻保證能在你的瀏覽器中播放，多數(shù)瀏覽器支持mp4 -->
若網(wǎng)速限制，很可能無法加載視頻，請這樣處理：
<a href="medias/myvideo.mp4">
點擊鼠標右鍵，選擇另存為，把視頻下載到本地 。
</a>
<video src="medias/myvideo.mp4" controls>
</div>
</body>
</html>
時至今日，仍然有些廠家的瀏覽器對某些音頻或視頻無法支持，下面的截圖，演示了早期的fireFox瀏覽器無法播放mp3音頻文件（這是個非技術問題，源于專利問題）的情況。
而對于mp4視頻文件，當代瀏覽器都可以較好支持，瀏覽器fireFox11.0運行效果如下圖所示：
接著使用谷歌的chrome瀏覽器，則播放上例代碼的視頻和音頻沒有問題，運行效果如下：
對于當前瀏覽器的基本信息，學習者可以用JavaScript進行輸出，比如本例Web頁打開前，使用JavaScript的alert語句，用彈窗的形式，把瀏覽器的引擎名稱和瀏覽器的引擎版本進行了輸出。
代碼如下：
<script type="text/javascript">
<!--
alert(navigator.appCodeName+ "/n" +navigator.appVersion);
//-->
</script>
沒有學習過JavaScript語言的讀者不用擔心，只要簡單地對理解3個英文單詞即可：在JavaScript語言中，navigator代表是瀏覽器對象名稱，appCodeName 和 appVersion只是瀏覽器對象中諸多屬性的二個，app指瀏覽器引擎，CodeName指引擎的名稱，appVersion指引擎的版本。
二、利用CSS簡單控制視頻大小
在瀏覽器中播放視頻時，一般提供了完整的控制界面，包括對視頻的播放、暫停、全屏、退出全屏等按鈕，視頻大小默認是以1：1的比例顯示在瀏覽器窗口中，下面我們使用div容器，將二個audio和video元素分別包住，通過css語句設定父級容器div的大小，同時為視頻設置width屬性，嘗試改變視頻文件的默認分辨率，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單控制視頻播放的大小</title>
<style type="text/css">
body{background-color:gray;}
div{
width:600px;
background-color:navy;
margin:10px;
border:2px solid white;
font-size:25px;
color:white;
}
.s{
height:100px;
}
.b{
height:400px;
}
</style>
<script type="text/javascript">
<!--
alert(navigator.appCodeName+ "/n" +navigator.appVersion);
//-->
</script>
</head>
<body>
<div>
1 ) div標簽建立塊級元素，可作為其他內(nèi)聯(lián)元素的容器。<br>
2 ) 音頻嵌入網(wǎng)頁后，只能看到一個控制播放的面板，沒有外觀大小的概念。<br>
3 ) 視頻嵌入網(wǎng)頁后，其播放尺寸由video標簽的 width 、height屬性設定。
</div>
<div class = "s">
<!--下面音頻格式，不一定能在你的瀏覽器中播放，有些老瀏覽器不支持mp3 -->
<audio src="medias/myAudio.mp3" controls>
</div>
<div class = "b">
若網(wǎng)速限制，很可能無法加載視頻，請這樣處理：
<a href="medias/myvideo.mp4">
點擊鼠標右鍵，選擇另存為，把視頻下載到本地 。
</a>
<!--下面視頻頻保證能在你的瀏覽器中播放，多數(shù)瀏覽器支持mp4 -->
<video width="600" controls>
<source src="medias/myvideo.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
本例在css語句設置中，使用了 .類名 的類選擇器定義，代碼如下：
.s{
height:100px;
}
.b{
height:400px;
}
這樣，就聲明了 .s 和 .b 二類選擇器，在HTML的元素中，就可以使用class = “.s”和class = “.b”引入這種類的設置。讓相關的HTML元素使用這個類選擇器。有關選擇器在下一節(jié)會稍作系統(tǒng)介紹，本例我們先簡單地使用即可。
通過Chrome、Edge、Safari、FireFox等現(xiàn)代瀏覽器測試，可以發(fā)現(xiàn)CSS對div容器的大小設置，不會影響容器內(nèi)的音頻的視覺效果（音頻元素顯然也不具備自己分辨率，我們看到的只是瀏覽器提供的控制播放的面板），而視頻元素可以通過width屬性控制默認分辨率的大小。
本節(jié)只是利用HTML的腳本，在Web頁中簡單地控制了音視頻文件，而當需要在Web應用中實現(xiàn)代碼個性化控制媒體元素時，則需要用到JavaScript程序實現(xiàn)對視頻對象的代碼控制，這種代碼對此時的你有難度，需要經(jīng)歷了一般的JavaScript的程序設計學習后，方可進行。
2. 6 對元素的CSS盒狀模型和語法特性的探索
在CSS排版控制中，每一個HTML元素都被視為一個矩形的盒子，這些盒子之間的關系也許是平輩關系（出現(xiàn)有前后，但層次并列），也許是父子關系（父元素是子元素的容器）。這些盒子共同分享瀏覽器可視區(qū)域，盒子互相之間有邊界，也可能有邊距，也可能互相影響，綜合實現(xiàn)了整個Web頁面的渲染。
我們下面結合CSS的語法，對CS盒子模型的排版做一些探索。
一、寫CSS選擇器的幾種語法
下面我們使用一首古詩作為Web頁的內(nèi)容，把古詩分成標題、紅色字、藍色字三類，對CSS的三種選擇器的寫法開展一些探索實踐。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS選擇器的書寫</title>
<style type="text/css">
/*這是CSS的注釋語句，下面用文字顏色為例，演示三種選擇器（tag選擇器、類選擇器、id選擇器）的寫法*/
div{font-size:38px;
width:380px;}
/*上面是tag選擇器的寫法，對應選擇body內(nèi)的div標記*/
.blueFont{color:blue;}
/*上面是類選擇器的寫法，對應選擇body內(nèi)的<p class="blueFont">標記*/
.redFont{color:red}
/*上面是類選擇器的寫法，對應選擇body內(nèi)的<p class=" redFont ">標記*/
#special{color:white;
background-color:black }
/*上面是id選擇器的寫法，對應選擇body內(nèi)的<p id="special">標記*/
</style>
</head>
<body>
<div>
<p id="special">
長歌行（漢樂府）
</p>
<p class="redFont">青青園中葵，</p>
<p class="blueFont">朝露待日晞。</p>
<p class="redFont">陽春布德澤，</p>
<p class="blueFont">萬物生光輝。</p>
<p class="redFont">常恐秋節(jié)至，</p>
<p class="blueFont">琨黃華葉衰。</p>
<p class="redFont">百川東到海，</p>
<p class="blueFont">何時復西歸?</p>
<p class="redFont">少壯不努力，</p>
<p class="blueFont">老大徒傷悲。</p>
</div>
</body>
</html>
在瀏覽器中打開上述代碼的HTML文件，瀏覽器會按CSS三種選擇器的設置，CSS引擎會將 這首“ 長歌行（漢樂府）”的文本，按HTML內(nèi)容對類和id的相應設置，渲染為三種樣式表內(nèi)定義的樣式。（效果圖略）。
二、元素對父級CSS屬性的繼承
整個html文件都是由元素一層層構成，對于那些可視元素而言，body是最外層的父級元素，body內(nèi)可以有很多層次，越內(nèi)層的元素越屬于越底層次的子孫級。父級的一些CSS樣式設置會向下“遺傳“，換句話說，子元素會”繼承“父元素的一些CSS屬性，這樣，用CSS編寫樣式，規(guī)劃好，就不需要對子級的一些屬性重復聲明了。
下面這個案例的內(nèi)容，仍然采用“長歌行（漢樂府）“，但我們僅使用屬于爺爺body、父親div、兒子p的三個元素來進行CSS特性的探索，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>關于對父輩屬性的繼承</title>
<style type="text/css">
/*這是CSS的注釋語句，body為爺爺輩，三個屬性（font-size、color、text-align）都被后輩繼承，div為父親輩，其width和font-size屬性被兒子p繼承，只有border屬性沒有遺傳性*/
body{font-size:18px;
color:blue;
text-align:center}
div{
width:480px;
border:1px solid }
p{font-size:36px;
line-height:2em;}
</style>
</head>
<body>
<div>
長歌行（漢樂府）
<p>
青青園中葵，
朝露待日晞。
陽春布德澤，
萬物生光輝。
?？智锕?jié)至，
琨黃華葉衰。
百川東到海，
何時復西歸？
少壯不努力，
老大徒傷悲。
</p>
</div>
</body>
</html>
通過瀏覽器打開上述文件，我們發(fā)現(xiàn)，body的CSS屬性完全遺傳給了子孫，即div和p，遺傳的設置為： font-size: 18px; color: blue; text-align:center 。
然后div 的CSS屬性卻沒有遺傳給兒子元素p，即 width和border的設置僅對當前元素有效，是無法遺傳給子級元素的。
由于子級元素p設置了font-size: 36px; 而body內(nèi)設置的font-size: 18px則被新的設定給“覆蓋“了，我們可以把這看作在p這一代，名為font-size的遺傳基因發(fā)生變化，若p下屬還有子元素，則font-size為36px的屬性又會遺傳給下一代。
三、CSS選擇器的優(yōu)先級
我們知道，使用CSS選擇器可以選中HTML部分設置的元素，然后為這些選中的元素設定新的樣式。然而，當我們使用不同的選擇器，都選中了某個元素x時，這時，該x元素到底該遵守哪個選擇器的CSS設置呢？這個問題，就是CSS選擇器的優(yōu)先級問題。
我們下面用一個例子，來測試id選擇器、類選擇器、標記選擇器在優(yōu)先級上的區(qū)別。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS選擇器的優(yōu)先級</title>
<style type="text/css">
/*這是CSS的注釋語句，下面用文字顏色為例，探索css選擇器的優(yōu)先級*/
div{font-size:38px;
width:480px;}
#title{
color:white;
background-color:black;
text-align:center
}
.redFont{
color:red;
background-color:gold
}
p{
color:blue;
text-align:right;
}
</style>
</head>
<body>
<div>
<p class="redFont" id="title" >
長歌行（漢樂府）
</p>
<p class="redFont">青青園中葵，</p>
<p class="redFont">朝露待日晞。</p>
<p class="redFont">陽春布德澤，</p>
<p class="redFont" >萬物生光輝。</p>
</div>
</body>
</html>
對于“ 長歌行（漢樂府） ”這段文字，采用了class="redFont" 和 id="title" 二種CSS選擇符，在選擇器內(nèi)的css樣式代碼中，這樣式代碼是相互沖突的，我們發(fā)現(xiàn)，系統(tǒng)選擇了id選擇器的樣式，說明id選擇器優(yōu)先級最高。同樣，我們也發(fā)現(xiàn)類選擇器比標記選擇器的優(yōu)先級更高。
四、父子關系元素的CSS屬性的層疊性
在前面一節(jié)我們知道，父級元素的某些屬性，比如字體大小，長寬等，在父子層次關系的元素中這些屬性會發(fā)生繼承。而在繼承時，當設定子級元素的屬性以em或 % 這種相對單位，則相對上一級父元素，子元素在繼承屬性時會發(fā)生層疊性的計算。
子級繼承父級相關屬性，同時發(fā)生相對變化，這點在Web設計中非常有用，我們下面以用em表示的相對單位為例，探索對父級font-size屬性的繼承，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS屬性的層疊性</title>
<style type="text/css">
/*下面用文字大小為例，探索css屬性的層疊性*/
body{font-size:25px;
width:500px;
border:1px solid ;
text-align:center;
color:blue;
background:url(bk1.jpg)
}
div{font-size:2em;
}
p{font-size:0.77em;}
/*從爺爺body的25px，到父親div的2倍（相對父輩）大小，再到兒子p的0.77倍（相對父輩）*/
</style>
</head>
<body>
這是body中定義的基礎字體,大小25px. <br><br>
<div>
長歌行（漢樂府）
<p>
青青園中葵，
朝露待日晞。
陽春布德澤，
萬物生光輝。
?？智锕?jié)至，
琨黃華葉衰。
百川東到海，
何時復西歸？
少壯不努力，
老大徒傷悲。
</p>
</div>
</body>
</html>
在瀏覽器中打開這個頁面，可以看出div中的字體最大，為50px，p中的字體稍小，約為38px，body的默認字體為25px。
該原理解釋如下：body作為爺爺元素， 在CSS語句： body{font-size:25px;} 設定下，其基礎字體大小為25px ， 這個屬性會遺傳給了子級元素div， 而在div中的CSS設置語句： div {font-size:2em; }， 讓div中的字體相對其父級body，長和寬都增大到2倍（2em），則其字體大小為50px。 最后，p作為div的子元素繼承div的字體大小，同時層疊自己的設定：p{font-size:0.77em;} ，其字體大小計算的表達是：50px乘0.77，約為38px 。
五、容器關系的盒裝模型div排版
根據(jù)Web頁的可視內(nèi)容大小和多少，body區(qū)域大小是動態(tài)的，因此我們一般不設定body區(qū)域的width和height屬性，從語義上看，body作為最基礎的元素，可以不承載Web頁的視覺區(qū)域，我們只在body中設定一些頁面的基本參數(shù)，比如記錄Web頁基礎字體的大小。
本例我們在body內(nèi)使用一個div元素作為Web頁內(nèi)容的父級，二個div元素作為Web頁內(nèi)容的子級，div元素是塊級元素，默認會占據(jù)父級所有的寬度，而高度卻由自己的內(nèi)容確定。
通過本例，借助為每個div設定邊框，結合padding和margin屬性，可以初步探索父子容器的排版，以及各容器元素寬度和高度的關系。代碼分為二個階段：
第一階段代碼如下：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型，block level元素繼承父級寬度，而高度則按內(nèi)容動態(tài)確定</title>
<style type="text/css">
body{font-size:30px;}
#boxDad{
width:500px;
border:2px solid gray;
margin:10px;
}
#boxSon1,#boxSon2{
width:400px;
border:1px solid black;
margin:20px ;
text-align:center;
}
</style>
</head>
<body>
<div id="boxDad">
<div id="boxSon1">
鹿柴
[唐]王維
</div>
<div id="boxSon2">
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
</div>
</body>
</html>
用瀏覽器打開上面代碼的文件，效果如下圖所示：
父級 #boxDad和二個子級#boxSon1,#boxSon2都設定了邊框，可以清晰地看到盒子的大小和位置。
由于設定父級其width為500px， 相對二個子級width為400px的設定， 可以看出父容器#boxDad 比二個子容器寬度要多100px 。
而二個子級通過margin為20px的設定，讓子級盒子之間，子級盒子與父級盒子之間邊距有了20px的空間，我們發(fā)現(xiàn)二個子級,#boxSon1,#boxSon2之間的margin值沒有疊加，，仍然為20px，垂直方向的margin不做疊加是CSS的盒狀模型的排版特性。
第二階段代碼如下：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型再接觸，block level元素繼承父級寬度，而高度則按內(nèi)容動態(tài)確定</title>
<style type="text/css">
body{font-size:30px;}
#boxDad{
width:500px;
border:2px solid gray;
margin:10px;
height: 400px;
}
#boxSon1,#boxSon2{
width:400px;
border:1px solid black;
margin:80px 40px;
text-align:center;
}
</style>
</head>
<body>
……相同代碼略……
</body>
</html>
本階段代碼的區(qū)別是對#boxSon1和#boxSon2二個子容器，設定了 margin:80px 40px; 對于盒狀模型，其margin屬性是盒子最外層的邊距空間，單獨不可直接看見，只能在與其他對象的接觸中體現(xiàn)，理解盒子的margin屬性是非常重要的。
margin若只設定一個值，則作用在盒子四周，相當于設定了margin-left、margin-right、margin-top、margin-bottom。
margin若只設定了二個值，如本例所示，第一個值相當于設定了margin-top、margin-bottom ; 而第二個值相當于設定了margin-left、margin-right。
用瀏覽器打開修改margin設定的Web頁，效果如下圖所示：
第三階段代碼如下：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型第三次接觸，使用margin、padding屬性</title>
<style type="text/css">
body{font-size:30px;}
#boxDad{
width:500px;
border:2px solid gray;
margin:10px;
height: 400px;
}
#boxSon1,#boxSon2{
width:400px;
border:1px solid black;
margin:40px auto;
text-align:center;
}
#boxSon1{
padding-top: 20px;
padding-bottom:30px;
}
#boxSon2{
padding-top: 30px;
padding-bottom:40px;
line-height:2em;
}
</style>
</head>
<body>
……相同代碼略……
</body>
</html>
本階段代碼的區(qū)別是對#boxSon1和#boxSon2二個子容器，設定了 margin:40px auto;
margin只設定了二個值，第一個值相當于對margin-top、margin-bottom 設定了40px的高度，第二個值對margin-left、margin-right進行設定，本例使用了auto這個值，使用auto在CSS值中比較常見，也非常神奇，會產(chǎn)生空間平均分配的特性，在本例造成了子元素盒子在父容器的左右margin空間對等，有子元素在父元素內(nèi)有左右對齊的效果。
另外，對于#boxSon1和#boxSon2二個子容器盒子，為了讓盒子內(nèi)部的文字（古詩）與邊框產(chǎn)生“距離美“，本例對 padding-top和 padding-bottom 做了精確地設置，本例這里全部采用了簡單的像素單位進行設置，隨著學習者CSS控制能力的加強，可以去使用em單位進行控制，這樣就可以讓Web頁的CSS排版更適用于多種不同屏幕。
用瀏覽器打開本階段修改的Web頁，效果如下圖所示：
六、對元素盒裝模型的深入探索
塊級元素常用來當作Web內(nèi)容的容器，比如使用div元素當作容器，參加排版，而在div元素內(nèi)部，我們還可再增加p等塊級元素，這種層次設計，也比較符合HTML的語義，div是division的縮寫，p則是paragraph的縮寫。對于這些塊級元素而言，一般都是繼承關于父級的寬度，而塊級元素的高度，則是由內(nèi)容確定。
我們下面使用三首不同規(guī)格的古詩作為內(nèi)容，把古詩區(qū)分為文字、標題、整體三個盒子，進行盒子模型的屬性和排版的探索。代碼共分為四個階段。
第一階段，創(chuàng)建盒子模型的基礎代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型案例1（繼承父級寬度）</title>
<style type="text/css">
body{font-size:30px;}
div{
border:2px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div id="box1">
<p>
鹿柴
[唐] 王維
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div id="box2">
<p>
竹里館[唐] 王維
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<div id="box3">
<p>
送元二使安西
[唐] 王維
</p>
渭城朝雨浥輕塵，
客舍青青柳色新。
勸君更盡一杯酒，
西出陽關無故人。
</div>
</body>
</html>
本例中，代碼有意沒有設定body的寬度，我們發(fā)現(xiàn)這種情況body會主動利用瀏覽器的最大寬度，而作為body子元素的三個作為古詩容器的div盒子，則會繼承body的寬度，效果如下圖所示：
在上述基礎上，第二階段我們利用盒狀模型特有屬性，對三個div進行調整。代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型案例2（border、margin、padding）,字體大小的繼承性</title>
<style type="text/css">
body{font-size:30px;}
div{
border:2px solid gray;
padding:1em;
width:500px;
margin:1em auto ;
text-align:center;
line-height:2em;
background:url("bk2.jpg");
}
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
p{
font-weight:bold;
border:1px solid ;
}
</style>
</head>
<body>
<div id="box1">
……略
</div>
<div id="box2">
……略
</div>
<div id="box3">
……略
</div>
</body>
</html>
對于三首古詩的容器div，我們統(tǒng)一設定了盒子的以下基本屬性：
border:2px solid gray;
padding:1em;
width:500px;
margin:1em auto ;
text-align:center;
line-height:2em;
background:url("bk2.jpg");
讓每首古詩盒子都有了合適的內(nèi)外邊距空間、對齊方式等，為節(jié)約篇幅，下面僅累出第一個盒子排版效果如下：
另外，由于第三首古詩文字相對較多，相對第一二首，其字體大小必須稍作調整：
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
此處給出的調整單位為 em ，這樣盒子字體的大小，會相對父級body的設置的基礎字體大小，瀏覽器系統(tǒng)自動實現(xiàn)計算和渲染。
代碼第三階段，探索css3新增的border-radius屬性代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型案例3（border-radius）</title>
<style type="text/css">
body{font-size:30px;
}
div{
width:500px;
border:2px solid ;
border-radius:2em;
margin:1em auto ;
padding:0.5em;
padding-bottom:1.5em;
text-align:center;
line-height:2em;
}
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
p{
border:1px solid ;
border-radius:1em;
letter-spacing:0.2em;
}
</style>
</head>
<body>
<div id="box1">
……略。
</div>
<div id="box2">
<p>
竹里館 [唐]王維
</p>
……略。
</div>
<div id="box3">
……略。
</div>
</body>
</html>
我們對div和p都使用了border-radius的屬性設置，設定了盒子邊框的弧線角，這個角度的取值，也使用了em這個相對字體大小的單位。其中最后一首古詩的排版效果如下圖所示：
代碼第四階段，設定背景屬性，探索css3新增的text-shadow屬性代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型案例4(background、text-shadow)</title>
<style type="text/css">
body{font-size:30px;
}
div{
width:500px;
/*border:2px solid ;*/
border-radius:2em;
margin:1em auto ;
padding:0.5em;
padding-bottom:1.5em;
text-align:center;
line-height:2em;
background:url("bk2.jpg");
}
div#box1,div#box2{
font-size:1.32em;
}
div#box3{
font-size:1em;
}
p{
border-radius:1em;
background:url("bk1.jpg");
letter-spacing:0.2em;
text-shadow:0.05em 0.02em rgb(250,100,0) ;
}
</style>
</head>
<body>
<div id="box1">
<p>
鹿柴 [唐]王維
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div id="box2">
<p>
竹里館 [唐]王維
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<div id="box3">
<p>
送元二使安西 [唐]王維
</p>
渭城朝雨浥輕塵，
客舍青青柳色新。
勸君更盡一杯酒，
西出陽關無故人。
</div>
</body>
</html>
本例假設背景圖片：bk1.jpg、 bk2.jpg與本例的HTML源文件在同一位置，因此可以簡單地對background屬性，使用url("bk1.jpg")或url("bk2.jpg")的值來設定背景圖的路徑。
本例還使用了CSS3的文字特效屬性text-shadow，其值 0.05em 0.02em rgb(250,100,0) 由三個參數(shù)組成，參數(shù)中間有空格間隔，第一、二個參數(shù)，代表文字陰影在x和y軸的位移，此處我們使用了em作為單位， rgb(250,100,0)是文字陰影的顏色值。其中第一首古詩的效果如下圖所示：
2. 7元素定位的控制和Web頁的排版流
出現(xiàn)在Web頁中的元素，按照它們對應的標記，在HTML代碼中是有先后順序的，一般而言，寫在前面的標記和文字將先渲染出來，寫在后面的則慢一些顯示出來。排版的順序也是按照當代人類的閱讀習慣，從左到右，從上到小，順序顯示。
對于不同的屏幕和瀏覽器，Web頁的大小和比例是動態(tài)的，因此Web頁內(nèi)的元素的位置也是不固定的，這點和印刷排版完全不同，但Web頁內(nèi)各元素在相互排列過程中，又是遵守CSS規(guī)則，是有規(guī)律可循的，就像流水一樣，我們把此稱為排版流。本節(jié)我們通過案例來體驗對Web頁內(nèi)排版流的控制。
從Web頁內(nèi)的元素位置看，有些元素的位置由排版流決定，而通過CSS的position屬性設定，則可以變更元素原來默認的位置，我們也將在本節(jié)討論四種position屬性的設置。
一、position的四種定位方式
下面利用HTML元素div來探索元素的幾種點位方式，內(nèi)容為了演示較多篇幅，所以采用了6首古詩文字，古詩的題目被換成div定位的方式，便于我們對比相應設定的古詩position模式，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box的四種position定位方式</title>
<style type="text/css">
body{
font-size:16px;
width:600px;
border:1px solid ;
}
div{
border:2px solid blue ;
font-size:1.9em;
margin:10px auto;
padding:1em;
text-align:center;
line-height:2em;
width:200px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
div#static{
position:static ;
/**下面二句坐標設置無效，static定位遵守瀏覽器對文本流的排版**/
left:3em;
top:-5em;
}
div#relative{
position:relative ;
left:3em;
top:-5em;
background:rgb(200,250,200);
}
div#absolute{
position:absolute ;
left:450px;
top:350px;
background:rgb(200,200,250);
}
div#fixed{
position:fixed ;
top:50px;
right:50px;
background:rgb(250,200,200);
}
</style>
</head>
<body>
<h1>滾動鼠標，查看各div定位效果</h1>
<div>
<p>
不設position
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div id="static">
<p>
position：static
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<div id="relative">
<p>
position：relative
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div id="absolute">
<p>
position：absolute
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<div>
<p>
不設position
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div id="fixed">
<p>
position：fixed
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
</body>
<!--
對比發(fā)現(xiàn)，box元素若未設置position屬性，與position設為static效果相同
-->
</html>
本例代碼增加使用了一些新寫法：
比如，div>p 表示 div元素下的p元素，這種選擇器非常嚴格地限定，指div是元素，同時p是子元素的情況。如果選擇器寫成 ： div p 則有所不同，這表示div只要是p的父級就行，爺爺級也行，并不要像前者那樣，即div>p的div必須是p嚴格意義的父元素。
我們在HTML代碼中，對于div元素的id的名稱的命名，我們采用了CSS的標識符，比如：
div#relative{
position:relative ;
……
}
relative是CSS的position屬性的特定取值，但對于relative這個標識符，我們卻可以在命名HTML元素id的時候重復使用，因為HTML和CSS二套語言的代碼，在瀏覽器中上是完全獨立隔開運行的，不會因為互相使用了相同的標識符而造成混亂。而我們需要知道，這兩套語言寫的代碼，其實是通過瀏覽器的CSS選擇器實現(xiàn)溝通的。
另外，本例需要大家用瀏覽器實際打開頁面進行驗證，通過鼠標滾動屏幕，上下互動查看各個div的位置，因而在此不便給出截圖。
二、absolute定位和重疊
通過前面的探索我們發(fā)現(xiàn)，元素若未設置position屬性，或者position設為static，元素將規(guī)規(guī)矩矩地融入Web頁的“排版流“，并嚴格執(zhí)行，從上到下、從左到右的排版。若position屬性設為relative，基本也是按“排版流“實現(xiàn)錯位排版。
但若我們把元素的position屬性設置為absolute時，元素將脫離Web頁原有的排版流，實現(xiàn)元素“自由“的任意位置的排版，正如absolute單詞的中文含義那樣，絕對的位置，而非像前面那樣，元素的位置基本上都是適應按排版流的相對位置。
當元素position屬性為absolute時，由于元素脫離了Web頁的“排版流“，實現(xiàn)按坐標自由定位，瀏覽器頁不會考慮元素與周邊元素的關系，這就可能導致元素和其他按”排版流“排版的元素發(fā)生重疊關系，重疊則會涉及元素顯示的優(yōu)先級屬性——z-index設置。
下面我們?nèi)允褂霉旁娮鳛閮?nèi)容的例子進行探索，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute定位z-index次序</title>
<style type="text/css">
body{
font-size:16px;
/*由于absolute定位脫離了文本流，因此下面定義寬度已經(jīng)沒有意義*/
width:600px;
background:rgb(100,100,100);
color:white; }
div{
color:black;
border:2px solid blue ;
font-size:1.9em;
margin:10px auto;
padding:1em;
text-align:center;
line-height:2em;
width:200px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
div#abs1{
position:absolute ;
left:1em;
top:2em;
background:rgb(200,250,200);
z-index:3 ;
}
div#abs2{
position:absolute ;
left:6em;
top:6em;
background:rgb(200,200,250);
z-index:2 ;
opacity:0.3;
}
div#abs3{
position:absolute ;
left:10em;
top:10em;
background:rgb(250,200,200);
z-index:1 ;
}
</style>
</head>
<body>
<h1>absolute定位導致的重疊</h1>
<div id="abs1">
<p>
abs1,z-index:3
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div id="abs2">
<p>
abs2,z-index:2
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<div id="abs3">
<p>
abs3,z-index:1
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
</body>
</html>
用瀏覽器打開上面代碼，效果如下圖所示：
通過調整abs2的left和top屬性，我們可以探索處于absolute模式的元素的定位。通過對三個div 的z-index屬性值得大小處理，我們可以探索各div在重疊時的遮擋秩序。
最后，我們?yōu)樘幱赼bsolute模式的div設定了opacity屬性，這個CSS屬性的取值是0至1之間的小數(shù)，可以設置元素處于透明狀態(tài)。
三、在父元素容器中，實現(xiàn)子元素absolute模式的定位
前面我們直接為某個元素設定了absolute模式的定位模式，元素則以瀏覽器窗口為坐標體系，比如瀏覽器窗口左上角為坐標的原點（x:0,y:0）。但在實際拍中，我們不需要元素以瀏覽器為參考系，而更需要元素以自己的父級容器為參考系，實現(xiàn)自己的“自由“定位。
為了實現(xiàn)absolute元素以自己的父級容器為參考系來確定坐標，我們要將其父級元素的position屬性設置為relative。
本例使用二首古詩作為內(nèi)容，實現(xiàn)以body元素為參考系的absolute定位，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>relative和absolute配合定位</title>
<style type="text/css">
body{
position:relative ;
font-size:16px;
width:400px;
height:500px;
border:2px solid ;
}
div{
position:absolute ;
border:1px solid blue ;
font-size:1.2em;
margin:10px auto;
padding:0.5em;
text-align:center;
line-height:2em;
width:120px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
div#abs1{
left:1em;
top:1em;
background:rgb(250,200,200);
}
div#abs2{
right:1em;
bottom:3em;
background:rgb(200,200,250);
}
</style>
</head>
<body>
父親body的定位類型是relative，二個兒子div則是absolute.
<div id="abs1">
<p>
(左:1,上:1)
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div id="abs2">
<p>
(右:1,下:3)
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
</body>
</html>
本例關鍵的代碼是：
body{
position:relative ;
……
}
div{
position:absolute ;
……
}
配合二個古詩區(qū)域的定位：
div#abs1{
left:1em;
top:1em;
background:rgb(250,200,200);
}
div#abs2{
right:1em;
bottom:3em;
background:rgb(200,200,250);
}
從代碼可以看出，第一首古詩區(qū)域采用傳統(tǒng)的left、top坐標設定，而第二首古詩區(qū)域采用另一類的right、bottom坐標設定，讓我們可以直觀地設定距離body邊界的右邊和底邊的距離。效果如下圖所示：
四、元素的float屬性及Web的元素排版流
初學者最初總誤以為自己電腦創(chuàng)作出來的Web頁，也當然會在他人電腦屏幕有同樣的效果。而Web頁的渲染，在不同的瀏覽器和終端屏幕上，實際結果情況是有可能是不同的。我們本節(jié)談到的排版流（Normal document flow）現(xiàn)象，就是造成不同屏幕寬度有不同效果的原因。
排版流是指Web頁內(nèi)的元素在被渲染時默認的行為，行內(nèi)（inline）類型的元素內(nèi)的文本，會從左到右排列，當遇到父級容器的寬度限制就會自動換到下一行；而塊級（block）類型元素內(nèi)的文本則不管內(nèi)部文字的多少，均在開頭和結束時都執(zhí)行獨立換行。
我們實時改變?yōu)g覽器大小時，會發(fā)現(xiàn)，Web頁內(nèi)的所有元素對象，包括元素內(nèi)的文本內(nèi)容，這些內(nèi)容就像水流那樣，充滿瀏覽器窗口，按規(guī)則排列，當瀏覽器窗口發(fā)生變化時，這些Web元素形成的盒子又會像流水那樣，動態(tài)適應瀏覽器的窗口。
排版流的特征比固定的印刷術更靈活，也給我們Web頁的設計開發(fā)者帶來了困難，需要我們理解和利用Web頁內(nèi)盒子模型的一些特征。
下面我們看看，塊狀盒子元素設定了float特性后，該盒子與整個Web排版流的關系，我們?nèi)匀灰怨旁妰?nèi)容構成的div盒子元素為例，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排版流的浮動排版，從上到下、從左到右</title>
<style type="text/css">
body{
font-size:16px;
}
div{
font-size:1.9em;
margin:10px;
padding:1em;
text-align:center;
line-height:2em;
background:url("bk1.jpg");
float:left;
width:200px;
}
div>p{
font-size:0.8em;
font-weight:bold;
}
</style>
</head>
<body>
<h1>各Block-level塊會在父元素空間內(nèi)，從上到下、從左到右浮動。調整瀏覽器寬度可動態(tài)排版</h1>
<div>
<p>
1鹿柴 [唐]王維
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div>
<p>
2竹里館 [唐]王維
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<div>
<p>
3鹿柴 [唐]王維
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<div>
<p>
4竹里館 [唐]王維
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<div>
<p>
5鹿柴 [唐]王維
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
</body>
</html>
本例關鍵的代碼是設置了div元素的float屬性和width屬性：
div{
……
float:left;
width:200px;
}
設置了float為left的元素，會脫離正常排版流，主動向父容器左上流動，該元素作為盒子元素，內(nèi)部會獨立實現(xiàn)CSS排版，外部也會按盒子模型的margin設置，與周邊元素拉開間距。
本例需要鼠標動態(tài)調整瀏覽器窗口大小，互動查看float效果，因此需要學習者在瀏覽器中打開查看。
五、float元素和環(huán)繞的文本流
Web頁內(nèi)處于float狀態(tài)的元素，可以脫離原來的排版流，但該處于float狀態(tài)的元素與周邊的其他HTML對象之間，在排版上還是要相互影響的，注意：處于float狀態(tài)的元素并非處于absolute狀態(tài)的元素。本例我們把2首古詩創(chuàng)作稱為2個div，讓其分別處于左右浮動狀態(tài)，通過增加為古詩注釋的文字，探索一下浮動的div與周邊的文本流或其他元素的關系。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定義為float的box模型，會被文本流包裹起來</title>
<style type="text/css">
body{
font-size:16px;
width:500px;
border:1px solid ;
margin:0 auto ;
}
div{
font-size:1.9em;
margin:10px;
padding:0.5em;
text-align:center;
line-height:2em;
background:url("bk1.jpg");
float:left;
width:200px;
}
div>p{
color:blue;
font-size:0.8em;
font-weight:bold;
text-indent:0em;
line-height:0em;
}
p{
color:gray;
font-size:1.30em;
text-indent:2em;
text-align:justify; /*這個屬性取值不是默認值，類似印刷標準，比較美觀*/
padding:0.5em;
line-height:2.5em;
}
/*上面兩句，利用p的不同選擇器,實現(xiàn)了不同情況p元素的選擇，實現(xiàn)了不同設置*/
</style>
</head>
<body>
<h1>各Block-level塊在父元素空間內(nèi)，浮動后，可以被inline-level元素（比如文字）環(huán)繞起來</h1>
<div>
<p>
鹿柴 [唐]王維
</p>
空山不見人，
但聞人語響。
返景入深林，
復照青苔上。
</div>
<p>
這里演示的文字是《鹿柴》的現(xiàn)代文解讀?！?br>
</p>
<div style="float:right">
<p>
竹里館 [唐]王維
</p>
獨坐幽篁里，
彈琴復長嘯。
深林人不知，
明月來相照。
</div>
<p>
這里演示的文字是《竹子里面》的現(xiàn)代文解讀?！?br>
</body>
</html>
用瀏覽器打開含上面代碼的文檔，可以看出二個div元素，由于其float屬性的設置，分別漂浮到排版流的左邊和右邊，而與相應div臨近的p元素內(nèi)的文本流，就像水流一樣，對div元素形成了環(huán)繞，部分效果如下圖所示：
對容器body元素內(nèi)CSS代碼的解讀：
body{
font-size:16px;
width:500px;
border:1px solid ;
margin:0 auto ;
}
在本例中，需要對Web頁的body元素的width進行設置，這樣body的width屬性將對內(nèi)部的div和p有寬度的限制，將約束p中的文本流寬度，讓p形成自動換行，于是形成對div元素的環(huán)繞。
body中基礎字體大小使用了px作為單位，而div和p中的樣式屬性中，包括：text-indent 、 padding 、 line-height 等均使用了em作為單位，em單位的設定既方便，也非常直觀，便于修改和調整。
其他代碼細節(jié)方面的難點，請參考本例CSS代碼中的注釋，形式：/* CSS代碼注釋 */。
2. 8 實現(xiàn)Web頁的浮動排版綜合案例
本節(jié)綜合運用前面的盒狀模型和float排版，結合HTML5的新增語義標簽，用探索和實驗的方式，逐步實現(xiàn)一個通用的Web頁的浮動排版案例。
一、HTML5新增語義結構標簽
HTML5是一個劃時代的標準，為Web開發(fā)者帶來新東西，我們還有待完成JavaScript學習后才能真正理解，但其語義標簽上的新增的結構標簽，我們可以馬上進行實驗。
對于一個Web頁，按我們對內(nèi)容的理解，大致應該分為頭部、導航欄、主體、腳部四個部分，其中主體也許還可劃分為二個區(qū)域。
我們下面將再Web頁的主要結構中，放棄傳統(tǒng)的div元素，而分別使用header、 nav、section、article、footer這五個具備語義的結構標簽，實現(xiàn)Web區(qū)域的內(nèi)容劃分，注意我們使用HTML語義標簽劃分的只是內(nèi)容，與標簽的外觀無關，標簽的樣式的外觀完全交給CSS，從CSS層面看，使用五個div和五個語義結構效果完全一樣。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5語義標簽和排版1</title>
<style type="text/css">
*{
border:3px solid blue ;
margin:20px;
text-align:center;
}
/***在css語言中，" * " 符號代表通用選擇器 */
header{
}
nav{
}
section{
}
article{
}
footer{
}
</style>
</head>
<body>
<header>
header：主標題區(qū)域
</header>
<nav>
nav：導航區(qū)
</nav>
<section>
section：部分區(qū)
</section>
<article>
article：主文章區(qū)
</article>
<footer>
footer：腳部區(qū)
</footer>
</body>
</html>
用瀏覽器打開含上面代碼的文檔，我們可以發(fā)現(xiàn)，header（頭部）、nav（導航）、section（部分）、article（文章區(qū)）、footer（腳部）5個區(qū)域，均勻地分布在body容器中，效果如下圖所示：
本例我們使用了css的 * 通配符，選擇了Web頁中所有的元素對象，并給這些對象設置了三個CSS聲明，其中border屬性為每個元素都增加了一個藍色3像素的邊框。代碼如下：
*{
border:3px solid blue ;
margin:20px;
text-align:center;
}
我們發(fā)現(xiàn)，新的五個語義標簽設定了外框，但在這五個標簽外，還套了二層藍色邊框，這說明，Web內(nèi)容區(qū)域外還有二個元素，顯然這二個元素分別這5個語義標簽的父級和爺爺級。 通過查看HTML源碼部分，我們可以發(fā)現(xiàn)，這二個元素正是我們可能熟視無睹的body和html元素。
整個Web頁，可以看作只由一個html元素組成，html其實是最大的語義標簽，但幾乎所有人都不會對html元素作樣式修改，本例由于對通配符 * 設定了margin、border屬性，這使得html元素也有了邊框的外觀設計，也使得本例的這個Web頁看上去有些奇怪。
二、body作為頁面的基礎容器
對前面的Web頁，由于既沒有設定容器的大小，內(nèi)部元素文字的大小和數(shù)量加上margin也較小，這使得整個頁面顯得非常小，比例也不協(xié)調。為解決這個基本問題，下面我們把body當作整個Web頁的基本容器，為body設定width和height屬性，讓五個語義標簽能夠在body容器內(nèi)分配空間，實現(xiàn)Web頁的排版。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body基礎容器+*通配符的探索</title>
<style type="text/css">
*{
border:2px solid blue ;
margin:20px;
text-align:center;
}
/* 下面對html重新定義，可以消除對html元素的邊框和邊距設定 */
html{border:0 ;margin:0}
body{
width:600px;
height:500px;
border:0 ;
}
header{
}
nav{
}
section{
}
article{
}
footer{
}
</style>
</head>
<body>
<header>
header：主標題區(qū)域
</header>
<nav>
nav：導航區(qū)
</nav>
<section>
section：部分區(qū)
</section>
<article>
article：主文章區(qū)
</article>
<footer>
footer：腳部區(qū)
</footer>
</body>
</html>
在 * 通配符后，重新定義html元素和body元素后，整個Web頁在視覺上只留下了五大語義定義的區(qū)域，從header到footer五個區(qū)域，組成這五個區(qū)域元素顯然屬于塊級元素，它們平均分攤了容器body元素設定的width和height設定的區(qū)域，如下圖所示：
三、探索容器內(nèi)的元素空間分配
在body元素內(nèi)，五個語義區(qū)域平均分配了body的縱向空間。本例我們作一些修改，讓五個區(qū)域能夠按百分比的方式，簡單地分配body的height屬性指定的高度。
代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body基礎容器+子元素通過height的設定實現(xiàn)空間分配</title>
<style type="text/css">
……略
header{
height: 15%;
}
nav{
height: 10%;
}
section{
height: 5%;
}
article{
height: 45%;
}
footer{
height: 5%;
}
</style>
</head>
<body>
……略
</body>
</html>
用瀏覽器打開上面更改后的HTML文件，效果如下圖所示：
本例說明：子元素使用百分比的方式設定高度，可以依據(jù)父級容器的高度，按百分比的方式逐個為子元素分配高度空間，同時也實現(xiàn)了子元素相對容器空間的設定。
四、對2個float元素實現(xiàn)左右并列排版
若對塊級元素的width屬性程序不做設置，則塊級元素會自動繼承父級容器的寬度，inline類型的元素寬度由其內(nèi)容決定，當元素的寬度超過父級容器寬度，則會發(fā)生換行現(xiàn)象，這點我們在前面的案例中已經(jīng)驗證。
本例我們希望對section區(qū)域和article區(qū)域實現(xiàn)并列排版，為了不讓它們自動使用父級的寬度，我們要為兩個區(qū)域設定width屬性，這點與前面對子元素height的值設定一樣，用百分比形式設定width屬性，可以較好地實現(xiàn)規(guī)劃，下面我們對section區(qū)域和article區(qū)域的寬度分別設定為35%和65%。探索這兩個區(qū)域能否按我們設置的比率，精確地分配容器的width空間，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float排版（探索margin的問題）</title>
<style type="text/css">
*{
border:2px solid blue ;
text-align:center;
margin:20px;
/*上句去除，看看是否避免section和article浮動時不能精確對齊*/
}
html{border:0 ;}
body{
width:600px;
height:500px;
border:0 ;
}
header{
height:15%;
background:url("bk1.jpg");
}
nav{
height:10%;
}
section{
width:35%;
height:65%;
float:left;
background:url("bk1.jpg");
}
article{
/*可以嘗試把article的width屬性去除，看看系統(tǒng)會自動計算嗎？*/
width:65%;
height:65%;
margin-left:35%;
/*可以嘗試把margin-left屬性的改變，看看能否對齊？*/
background:url("bk2.jpg");
}
footer{
height:10%;
}
</style>
</head>
<body>
<header>
header：主標題區(qū)域
</header>
<nav>
nav：導航區(qū)
</nav>
<section>
section：部分區(qū)
</section>
<article>
article：主文章區(qū)
</article>
<footer>
footer：腳部區(qū)
</footer>
</body>
</html>
用瀏覽器打開上面代碼的HTML文件，效果如下圖所示：
顯然，雖然實現(xiàn)了section和article區(qū)域的并列，但對齊效果較差，另外，對于我們在通配符 * 內(nèi)設定的 margin為20px ，這條語句讓五個元素區(qū)域之間的邊距保持在20個像素，讓排版區(qū)域的間距顯得比較大，也存在浪費Web頁空間的問題。
學習者可以按照CSS源碼中用注釋提示的方式，改變一些屬性的參數(shù)的設置，嘗試改良或解決上述各區(qū)域間隙過大和浮動元素無法對齊的問題。
五、容器的box-sizing屬性設置
在盒狀模型的排版中，一個盒子元素的width屬性，在默認情況下，僅僅是其中內(nèi)容的寬度，即：content-box，而在實際排版中，這樣整個盒子的占據(jù)空間的寬度為：width + padding + border + margin 四項之和。
這種情況下，在CSS中，box-sizing屬性默認設為content-box，我們在排版中，對盒子寬度的計算必須自己手工計算盒子占據(jù)寬度的空間，而不能把盒子的width當作盒子的寬度。
當把box-sizing屬性的值設置為border-box時，情況就不同了，在實際排版中，border-box盒子的占據(jù)空間的寬度為：width + margin 二項之和。這樣我們設置好width，CSS就可以根據(jù)padding和border的值，自動來調整盒子內(nèi)容的真實寬度了，對設計著來說，似乎實現(xiàn)了自動計算。
我們繼續(xù)上面的案例改進，把section和article二個區(qū)域設置為border-box,同時把盒子周邊的margin值全部設置為0 。借此，看看浮動排版是否可以精確進行。代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float排版，調整box-sizing和margin-left</title>
<style type="text/css">
*{
border:2px solid blue ;
text-align:center;
/*
把margin:10px;這句去除，可消除section和article浮動時不能精確對齊問題
*/
}
html{border:0 ;margin:0;}
body{
width:600px;
height:500px;
border:0 ;
}
header{
height:15%;
background:url("bk1.jpg");
}
nav{
height:10%;
}
/*
下面對section和article二個盒子，設定box-sizing屬性
設置box-sizing為 border-box ,系統(tǒng)默認為box-sizing為content-box
*/
section{
box-sizing: border-box ;
height:65%;
width:35%;
float:left;
background:url("bk1.jpg");
}
article{
box-sizing: border-box ;
/*可以嘗試把article的width屬性去除，看看系統(tǒng)會自動計算嗎？*/
width:65%;
height:65%;
background:url("bk2.jpg");
}
footer{
height:10%;
}
</style>
</head>
<body>
……略……
</body>
</html>
用瀏覽器打開存放上面代碼的HTML文件，可以發(fā)現(xiàn)各區(qū)域的對齊非常精確，如下圖所示：
從上面效果圖看出，article區(qū)域似乎浮動到最左邊，與section發(fā)生了重疊，為解決這個問題，我們?yōu)閍rticle區(qū)域，增加margin-left屬性，值為section的寬度即可，代碼如下：
article{
margin-left:35%;
}
修改后，重新刷新瀏覽器，頁面的效果圖如下：
六、能實現(xiàn)容器浮動且自動對齊的排版
通過前面的探索，我們發(fā)現(xiàn)了box模型，作為容器在浮動排版的一些關鍵要素，比如box-sizing設為 border-box是關鍵，否則容器內(nèi)的任何內(nèi)邊距和邊框的變化，都會讓排版發(fā)生錯位，再比如，也要把box模型的margin都設為0，否則浮動的容器也會發(fā)生錯位問題。
上例的排版雖然接近完美，但由于需要對article區(qū)域的margin-left屬性進行設置，似乎感覺CSS這樣有點不夠完美，人為控制的參數(shù)似乎太多，但事實并非如此。
下面我們重新構建一下上面的案例代碼，盡量用少的參數(shù)，讓CSS自動實現(xiàn)浮動排版的有關計算，讓代碼變得更加完美，也盡量少出錯誤，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自動浮動的排版(最精簡代碼)</title>
<style type="text/css">
body{
width:600px;
height:500px;
text-align:center;
font-size:22px;
}
header{
height:15%;
background:url("bk1.jpg");
}
nav{
height:10%;
}
section{
box-sizing: border-box ;
height:65%;
width:30%;
float:left;
background:url("bk1.jpg");
}
article{
box-sizing: border-box ;
height:65% ;
background:url("bk2.jpg");
/*嘗試把article的width屬性去除，即width:70%;系統(tǒng)會自動計算！*/
/*嘗試把margin-left屬性去除，即margin-left:35%;系統(tǒng)也會自動計算！*/
}
footer{
height:10%;
}
nav,footer{
border:1px solid;
}
section,article{
padding-top:20%;
}
</style>
</head>
<body>
<header>
header：主標題區(qū)域
</header>
<nav>
nav：導航區(qū)
</nav>
<section>
section：部分區(qū)
</section>
<article>
article：主文章區(qū)
</article>
<footer>
footer：腳部區(qū)
</footer>
</body>
</html>
本例我們把body定義成為固定了寬和高的容器，代碼：
body{ width:600px; height:500px;} ，
讓5個語義塊級元素在body內(nèi)實現(xiàn)浮動排版。讓header、nav、section、article、footer五個區(qū)域通過分配高度空間來實現(xiàn)版面空間的分配。
對于關鍵的浮動排版的二個元素，我們用最精煉的方法設置：對于section區(qū)域,設定其width屬性和float屬性即可；而對于article區(qū)域，我們無需對其作width和margin-left的設置，把任務交給了CSS，就實現(xiàn)了自動計算。有關代碼如下：
section{
width:30%;
float:left;
}
article{
/*嘗試把article的width屬性去除，即width:70%;系統(tǒng)會自動計算！*/
/*嘗試把margin-left屬性去除，即margin-left:35%;系統(tǒng)也會自動計算！*/
}
用瀏覽器打開存放上述代碼的HTML文件，效果如下圖所示：
七、基于box Model浮動排版的案例應用
前面我們通過六個階段，用探索的方式，創(chuàng)作了一個精煉的浮動排版的方式，通過整個思想，我們?yōu)檫@五個塊級元素添加一些圖文內(nèi)容，實現(xiàn)一個較為豐富多彩的綜合案例。
本例引用白居易的《長恨歌》詩文為內(nèi)容，加入到我們的排版語義結構之中，把前面實現(xiàn)精煉的左右浮動代碼當作結構骨架，本例再添加一些文本和圖像的效果細節(jié)。代碼相對以前稍長一些，我們把代碼分成二個部分實現(xiàn)：一是HTML的語義和內(nèi)容，二是CSS的表現(xiàn)和外觀效果。
第一部分：HTML語義區(qū)和內(nèi)容這一步要選擇合適的語義標簽，也要確保各元素的層次結構準確，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型和浮動排版的應用</title>
<style type="text/css">
/*……詳見第二部分……*/
</style>
</head>
<body>
<header>
古典賞析---選自白居易
</header>
<nav>
<ul>
<li>首頁</li>
<li>歷史</li>
<li>典故</li>
<li>舊址</li>
<li>價值</li>
</ul>
</nav>
<section>
<img src="girl.jpg" alt="楊家有女天生麗質">
</section>
<article>
長恨歌·白居易<br>
漢皇重色思傾國<br>
御宇多年求不得<br>
楊家有女初長成<br>
養(yǎng)在深閨人未識<br>
天生麗質難自棄<br>
一朝選在君王側<br>
回眸一笑百媚生<br>
六宮粉黛無顏色<br>
……略……
</article>
<footer>
CSS盒裝模型和浮動排版CopyRight 2020 歡迎學習
</footer>
</body>
</html>
說明：html文件相當于對整個案例的內(nèi)容規(guī)劃，這一步要保證內(nèi)容的準確和豐富，但無需考慮這些內(nèi)容的外觀（顏色、大小、對齊、背景等）；本例采用的外部圖片（"girl.jpg"、"bk1.jpg"、"bk2.jpg"）與本HTML文件放在同一個位置；本例還使用了ul元素的列表項目，通過CSS的特殊設定，可以把這些塊級元素設為inline類型，作為Web頁nav中的橫向菜單的各個菜單元素。
用瀏覽器打開含該html代碼的文件，在未設置樣式之前，僅使用HTML語義標簽的效果圖如下：
第二部分：CSS表現(xiàn)區(qū)和樣式在第一部分的內(nèi)容和區(qū)域劃分基礎上，接著對案例的區(qū)域進行分配空間、排版和浮動、最后實現(xiàn)對每個局部用CSS語句實現(xiàn)精裝修，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒裝模型和浮動排版的應用</title>
<style type="text/css">
body{
margin:0 auto;
width:650px;
height:550px;
text-align:center;
font-size:20px;
}
header{
height:15%;
background:url("bk1.jpg");
font-size:1.9em;
letter-spacing:0.3em;
color:rgb(150,150,255);
text-shadow:0.05em 0.03em black;
}
nav{
height:10%;
}
section{
box-sizing: border-box ;
height:65%;
width:30%;
float:left;
background:url("bk1.jpg");
}
section>img{
width:100%;
opacity:0.5;
margin:25% 0 ;
}
article{
box-sizing: border-box ;
height:65% ;
background:url("bk2.jpg");
font-size:1.5em;
line-height:2em;
letter-spacing:0.3em;
overflow:auto;
color:rgb(150,150,255);
text-shadow:0.05em 0.03em black;
}
footer{
height:10%;
}
nav,footer{
border:1px solid;
background:rgb(200,200,250)
}
nav>ul>li{
display:inline;
font-size:1.2em;
margin-right:3%;
letter-spacing:0.5em;
padding:0.1em;
background:rgb(100,200,250);
color:white;
cursor:pointer;
}
nav>ul>li:hover{background:rgb(0,200,100)}
nav>ul>li:active{background:rgb(200,250,0)}
header,footer{
padding-top:0.5em;
}
</style>
</head>
<body>
<!--……詳見第一部分……-->
</body>
</html>
用瀏覽器打開存放上述代碼的HTML文件，鼠標指向“典故“菜單，效果如下圖所示：
本例中，對前面未使用過的一些CSS代碼的技巧解讀：
對body的設定 margin:0 auto; 可以保證在任何寬度屏幕下，Web頁面都是居中顯示。
對section區(qū)域的圖片，采用section>img選擇器，并設定了margin:25% 0 ，其中第一個參數(shù)設為25%，讓圖片上下通過margin形式，上下留出空間，圖片左右無多余空間，因此第二個參數(shù)設置為0。
對article區(qū)域，與section要實現(xiàn)互動，后者簡單地設置height:65%即可，其他交由CSS自動地實現(xiàn)article元素寬度的計算。
另外由于article區(qū)域的內(nèi)容《長恨歌》比較長，這里使用了overflow:auto;的設置，讓超出article區(qū)域的內(nèi)容被article遮擋,而瀏覽器會給article提供一個滾動窗口的工具，實現(xiàn)內(nèi)容的滾動查看。關鍵代碼：
article{ box-sizing: border-box ; height:65% ; overflow:auto; }
對于nav區(qū)的ul實現(xiàn)的菜單，使用選擇器: nav>ul>li 實現(xiàn)了對每個li（菜單的選擇），然后對于其一些屬性的關鍵設定，改變了li的形態(tài)，把列表轉變成為菜單，同時為li元素設定了鼠標指針接觸和點擊的偽類，實現(xiàn)了菜單的互動，關鍵代碼如下：
nav>ul>li{
display:inline;
margin-right:3%;
background:rgb(100,200,250);
color:white;
cursor:pointer;
}
nav>ul>li:hover{background:rgb(0,200,100)}
nav>ul>li:active{background:rgb(200,250,0)}
2. 9 CSS代碼與HTML代碼的整合和分離
HTML代碼中的元素以表達語義為主，這些元素也都有默認的外觀和樣式。在編寫HTML代碼時，更需要關注選擇合適的語義標記，設定合理的層次文檔結構，最終實現(xiàn)頁面的元素結構的清晰表達。在編寫HTML代碼時，對Web頁面的外觀樣式完全不需要考慮，只使用默認的外觀樣式即可。
為把CSS樣式應用到HTML文檔，我們可以選擇三種不同的方式，分別如下：
一、寫在HTML元素style屬性的inline樣式
每個HTML元素都可以有style屬性，當把CSS樣式代碼直接寫在元素的style屬性中，比如：
<p style = "color: red; background: yellow;"> Look out! </p>這種方式可以單獨為該元素設置css樣式，比如上面示范的p，將呈現(xiàn)紅字黃底效果。這種方式優(yōu)先級最高，當我們在其他地方也對p元素設有其他顏色和背景時，當前這個p將以inline樣式的是設置為準。
我們不建議使用inline樣式的寫法，因為這種寫法將表現(xiàn)語義的HTML代碼和表現(xiàn)樣式的CSS代碼，混在一起，當頁面內(nèi)容稍微復雜，就會造成代碼管理的混亂。
另外，當我們使用JavaScript修改HTML元素對象的樣式時，相當于動態(tài)使用程序代碼改變了HTML元素的inline樣式，實現(xiàn)動態(tài)的Web頁樣式，由于JavaScript的代碼可以規(guī)范管理，大量使用這種操作，也不會造成代碼管理的低效。
二、嵌入樣式表（embed stylesheet）
這種方式我們經(jīng)常使用，這種方式把css代碼寫在一個樣式表（stylesheet）中，再把這個樣式表嵌入HTML文檔的style元素中，其規(guī)范語法為：
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
樣式表...
</style>
</head>
<body>
Web頁內(nèi)容...
</body>
</html>
習慣上，我們把style元素嵌入到head元素中，這也是我們一直采用的方式。但實際上這種方式并非規(guī)則，有時候為了讓頁面的性能更好，也可以把嵌入樣式表（也就是包含css代碼的style元素 ），放在HTML文檔結束前的位置，比如</html>標記之前。
三、外部樣式表（external stylesheet）
當HTML代碼完成之后，Web頁在當今的“看臉”時代，其外觀是非常重要的。有時候人們甚至把設計CSS樣式和編寫CSS代碼的工作分開，由不同的人配合完成，為了方便配合和管理，把CSS樣式代碼和HTML代碼分離，用不同的文件存放是常見的做法。把Web頁的CSS代碼單獨存放在一個文本文件中，這種文件就是外部樣式表文件。
創(chuàng)建時把css代碼組成的樣式表單獨存儲為文件，一般以css作為文件后綴名，使用時再通過腳本指令把外部樣式表文件讀入，這種方式在較大代碼量的項目中經(jīng)常使用。
這種方式的的優(yōu)勢是管理效率高，當Web頁面文件較多時，多個html文件可以同時引用同一個外部樣式文件，這些html文件的外觀則可由單獨一個樣式表控制，提高多頁面修改的效率。
我們在之前的案例中，一般都是直接把CSS代碼嵌入在HTML文檔的head元素的子元素style之中，這種方式在學寫代碼時使用，操作上簡便高效。
外部樣式表的方式也有缺點，主要是體現(xiàn)在性能上，畢竟外部文件都是存放在低速IO的設備中，這種方式一般需要另外多讀取一個或多個外部文件，尤其在網(wǎng)絡上訪問文件的速度還存在響應時間的不確定的。
外部樣式表有二種方式引入HTML文檔。
一是在HTML文檔中，使用link元素把外部樣式文件引入。
例如：
<head>
<link rel="stylesheet" type="text/css" href="mySite.css" media="all"></head>
二是在嵌入樣式表中，使用@import指令引入外部樣式表文件。
例如：
<style type="text/css">@import url(site.css
);@import url(navbar.css
); body {background: yellow;}
這是嵌入樣式表（embedded stylesheet）
</style>和HTML文檔一樣，這些以css為后綴的外部樣式文件，本質上也是文本文件，我們可以使用文本編輯器來編輯它們，同時在這些寫在HTML文件之外的css代碼中，就不再需要使用style標簽作為容器來實現(xiàn)“包含”了。比如mySite.css:
mySite.css文件開始：
body{
margin:0 auto;
width:650px;
height:550px;
……
}
header{
height:15%;
background:url("bk1.jpg");
font-size:1.9em;
……
}
…………
mySite.css文件結束。
把CSS代碼和HTML代碼分離，以及我們后面主要的程序語言JavaScript代碼，也存在同樣情況，通過多個文件分開管理不同類型代碼，這是人們管理具有網(wǎng)站或代碼的習慣和需要。
而我們在學習Web代碼時，實現(xiàn)代碼分離是正確方向，但大多數(shù)情況下，為實現(xiàn)所謂的“代碼分離”，我們把Web頁的三種代碼分散在二三個文件中，分別管理完全是沒有必要的。
因為在學習階段編寫的代碼絕大多數(shù)在幾百行之內(nèi)，我們只要簡單在不同類型的代碼間多敲入幾個回車鍵，就可以在功能上按模塊把源代碼分離開來，我們不需要人為地將一個文件劃分為多個文件。
最后，在學習階段，我們一般會按知識點把案例做成文件，比如本書涉及的學習源代碼文件超過一百個，每個文件包含一般都包含一個案例，但隨著難度的深入和階段備份代碼的需要，我們又可能要按理解有意將這個文件分成文件，若此時再增加管理一些外部CSS樣式文件，或js程序文件，就會無形間增加許多沒有價值的繁瑣操作，因此建議本書的學習不要注重把代碼分成若干文件，分開管理，除了大量的數(shù)據(jù)外，Web語言寫的代碼用一個文件管理就足以。
在線咨詢