者有話要說(shuō)：此文是作者自己的學(xué)習(xí)總結(jié)，供大家參考，不足之處還請(qǐng)見諒和指正~

在學(xué)習(xí)完了基本的HTML+CSS標(biāo)簽之后，就可以嘗試寫一些簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)啦~練習(xí)的過(guò)程是充滿成就感的，值得反復(fù)體會(huì)和思考！

網(wǎng)頁(yè)結(jié)構(gòu)

簡(jiǎn)單提一下常用于表示網(wǎng)頁(yè)機(jī)構(gòu)的標(biāo)簽：

header 整個(gè)頁(yè)面的標(biāo)題（也可表示一個(gè)內(nèi)容區(qū)塊）

main 頁(yè)面主體部分

footer 整個(gè)頁(yè)面的腳注（也可表示一個(gè)內(nèi)容區(qū)塊）

article 一塊與上下文無(wú)關(guān)的獨(dú)立內(nèi)容

section 表示一個(gè)內(nèi)容區(qū)塊，常嵌套于article中

aside 在article之外與其內(nèi)容相關(guān)的輔助信息

nav 頁(yè)面中的導(dǎo)航欄

figure 表示一段獨(dú)立的流內(nèi)容

三欄布局

一個(gè)網(wǎng)頁(yè)最少由header、main、footer三部分組成，那么從三欄布局開始練習(xí)吧。無(wú)論是上-中-下結(jié)構(gòu)還是左-中-右結(jié)構(gòu)，關(guān)鍵都在于設(shè)置中間部分的寬高或位置。我們知道網(wǎng)頁(yè)的主體內(nèi)容（版心）是處于居中位置、隨網(wǎng)頁(yè)縮放而縮放的。那么左右（或上下）兩欄固定后，須使中間部分自適應(yīng)。以下總結(jié)了幾種三欄布局的方法，以左-中-右結(jié)構(gòu)為例：

先寫左中右三個(gè)盒子。

1.使用float

需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否則right盒子會(huì)跑到下一行右側(cè)）。以上代碼中，設(shè)置center盒子的左右外邊距來(lái)實(shí)現(xiàn)寬度自適應(yīng)，若父盒子layout無(wú)高度要求，可用min-height實(shí)現(xiàn)高度自適應(yīng)。不加高度自適應(yīng)也可，在未設(shè)置center盒子高度的情況下本身高度會(huì)隨文本內(nèi)容的擴(kuò)充而自動(dòng)增加。

2.使用position

三個(gè)盒子都分別使用絕對(duì)定位，left、right分別距離窗口左右端為0，center距離窗口左端的間距為left盒子的寬度，距離窗口右端的間距為right盒子的寬度。

3.使用flex

須給父盒子layout加上彈性盒屬性，給center盒子設(shè)置大于0的flex值，利用彈性盒自動(dòng)拉伸效果實(shí)現(xiàn)center盒子的寬度自適應(yīng)。

4.使用table

給父盒子layout設(shè)置為table，寬度為整個(gè)窗口，給三個(gè)子盒子都設(shè)置為table-cell，此時(shí)三個(gè)盒子就有了表格的屬性。固定left、right盒子的寬度，center盒子自動(dòng)占滿父盒子剩余寬度。需要注意的是，因?yàn)楦负凶泳哂斜砀駥傩?，?dāng)left、center、right三者中任意一個(gè)盒子高度改變時(shí)，其他兩個(gè)盒子會(huì)跟著改變。

5.使用grid

將父盒子layout設(shè)置為grid，寬度為整個(gè)窗口，用template-rows設(shè)置行高，用template-columns分別設(shè)置三個(gè)盒子的寬度，其中auto實(shí)現(xiàn)center盒子的寬度自適應(yīng)。需要注意的是，這里用template-rows設(shè)置了固定的行高，因此center的高度不會(huì)自適應(yīng)。

仿寫練習(xí)

適合初學(xué)者練習(xí)的網(wǎng)頁(yè)有很多，可以打開網(wǎng)址之家去里面挑一挑，以靜態(tài)頁(yè)面為主的網(wǎng)站。作者自己是以豆瓣首頁(yè)（局部）進(jìn)行練習(xí)的。練習(xí)過(guò)程中，千萬(wàn)不要去看網(wǎng)站源碼（此時(shí)你也有很多地方看不懂），先試著自己分析和思考，用所學(xué)的知識(shí)看看能做到哪一步。

放上對(duì)比圖，還是有很多不一樣的地方，網(wǎng)頁(yè)也沒(méi)有功能，作為初學(xué)者這都是正常的。靜態(tài)網(wǎng)頁(yè)練習(xí)的主要目的是熟悉HTML+CSS布局，培養(yǎng)做網(wǎng)頁(yè)的思維。具體細(xì)節(jié)隨著學(xué)習(xí)的深入，可以讓網(wǎng)頁(yè)更還原、頁(yè)面更精美，網(wǎng)頁(yè)功能也能逐步完善起來(lái)，實(shí)現(xiàn)真正的網(wǎng)站開發(fā)。

頁(yè)可以分為靜態(tài)網(wǎng)頁(yè)、動(dòng)態(tài)網(wǎng)頁(yè)兩種類型。關(guān)于這兩種網(wǎng)頁(yè)的介紹如下。

1.靜態(tài)網(wǎng)頁(yè)

靜態(tài)網(wǎng)頁(yè)包含的諸如文本、圖像、Flash動(dòng)畫、超鏈接等內(nèi)容，在編寫網(wǎng)頁(yè)源代碼時(shí)已經(jīng)確定。除非網(wǎng)頁(yè)源代碼被重新修改，否則這些內(nèi)容不會(huì)發(fā)生變化。例如，某汽車品牌的網(wǎng)站首頁(yè)就是一個(gè)靜態(tài)網(wǎng)頁(yè)，具體如圖所示。

靜態(tài)網(wǎng)頁(yè)具有以下幾個(gè)特點(diǎn)。

? 靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，一旦上傳至網(wǎng)站服務(wù)器，無(wú)論是否有用戶訪問(wèn)，內(nèi)容都會(huì)一直保存在網(wǎng)站服務(wù)器上。

? 靜態(tài)網(wǎng)頁(yè)被訪問(wèn)的速度快，訪問(wèn)過(guò)程中無(wú)須連接數(shù)據(jù)庫(kù)。

? 靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，內(nèi)容更新與維護(hù)比較復(fù)雜。

? 靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。

值得一提的是，靜態(tài)網(wǎng)頁(yè)上展示的內(nèi)容并非完全靜止的，它也可以有各種視覺(jué)上的動(dòng)態(tài)效果，如GIF動(dòng)圖、Flash動(dòng)畫、滾動(dòng)字幕等。

2.動(dòng)態(tài)網(wǎng)頁(yè)

相比靜態(tài)網(wǎng)頁(yè)，動(dòng)態(tài)網(wǎng)頁(yè)有數(shù)據(jù)庫(kù)支撐、包含程序以及提供與用戶交互的功能，如用戶登錄、用戶注冊(cè)、信息查詢等功能，根據(jù)用戶傳入的不同參數(shù)，網(wǎng)頁(yè)會(huì)顯示不同的數(shù)據(jù)。例如，登錄某網(wǎng)站后查詢百度公司信息的頁(yè)面是一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)，如圖所示。

動(dòng)態(tài)網(wǎng)頁(yè)具有以下一些特點(diǎn)。

? 動(dòng)態(tài)網(wǎng)頁(yè)一般以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)。

? 動(dòng)態(tài)網(wǎng)頁(yè)并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件，只有當(dāng)用戶發(fā)送請(qǐng)求時(shí)，服務(wù)器才會(huì)返回完整的網(wǎng)頁(yè)。

? 采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、在線調(diào)查、用戶管理、訂單管理等。

對(duì)于網(wǎng)絡(luò)爬蟲來(lái)說(shuō)，靜態(tài)網(wǎng)頁(yè)的內(nèi)容都寫在源代碼中，比較容易抓取;動(dòng)態(tài)網(wǎng)頁(yè)的內(nèi)容不一寫在網(wǎng)頁(yè)源代碼中，可能需要用戶登錄后才能顯示完整，這增加了抓取難度。