網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目三（HTML5與CSS3基礎(chǔ)）

項目導(dǎo)讀1.能夠使用DreamweaverCC設(shè)置網(wǎng)頁內(nèi)容。任務(wù)描述是網(wǎng)頁制作必備技術(shù)。HTML5是HTML的最新版本。使用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)。瀏覽器能夠識別并解析這些HTML在20世紀(jì)90年代發(fā)展迅速，從HTML2.0版本發(fā)展到3.2版本、4.0版本，再到4.01版本。在這之后，為了擁有更強(qiáng)的功能性與適用性，HTML開始向其他方向演化，發(fā)展出了XHTML與XHTML2.0版本，但因為沒能取得良好的兼容性而宣告失敗。最終，向HTML5的演化取得了成功，因為HTML5在開發(fā)時就綜合考慮了當(dāng)前與未來的發(fā)展趨勢，所以它向后兼容，且包含了HTML4.0的全部特性，并在此基礎(chǔ)上進(jìn)行了(1)雙標(biāo)簽。指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的標(biāo)簽，法格式為：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>(2)單標(biāo)簽。也稱為空標(biāo)簽，基本語法格式為：<標(biāo)簽名/><hr/>,單標(biāo)簽中的"/"可以省略(3)注釋標(biāo)簽。是HTML5中的一種特殊標(biāo)簽。注釋標(biāo)簽的內(nèi)本語法格式為：<!--注釋內(nèi)容-->開頭和結(jié)尾處添加注釋標(biāo)簽可方便其他開發(fā)人員修改和理解代碼個屬性，標(biāo)簽名和屬性名之間要用空格隔開，屬性之間不分先后順序。標(biāo)簽的屬性省略時將使用它設(shè)置標(biāo)簽屬性的語法格式為：<標(biāo)簽名屬性1="屬性值1"屬性2="屬性值2">內(nèi)容</標(biāo)簽名>3.塊級標(biāo)簽與行內(nèi)標(biāo)簽：HTML5中標(biāo)記內(nèi)容的標(biāo)簽有塊級標(biāo)簽和行內(nèi)標(biāo)簽之分，它們的特點如下。(1)塊級標(biāo)簽的內(nèi)容在瀏覽器中顯示時獨占一行，類似于在其(1)塊級標(biāo)簽的內(nèi)容在瀏覽器中顯示時獨占一行，類似于在其內(nèi)容首尾各添加了一個換行符。例：<h1>與<p>標(biāo)簽都是塊級標(biāo)簽，使用它們標(biāo)記的內(nèi)容將獨占一行，且這些標(biāo)簽之后的內(nèi)容同樣也會另起一行。(2)行內(nèi)標(biāo)簽的內(nèi)容在瀏覽器中顯示時不能獨占一行。若行內(nèi)標(biāo)簽前后沒有塊級標(biāo)簽，則它們可顯示在同一行中。例如，用于標(biāo)記斜體的<i>標(biāo)簽就是一個行內(nèi)標(biāo)簽。行介紹。行介紹。HTML5使用元素描述頁面結(jié)構(gòu)，最基本的HTML5文檔結(jié)構(gòu)包括DOCTYPE聲明、html元素、head元素與body元素，如圖所示。除此之外，HTML5還提供了一些其他結(jié)構(gòu)元素，用于標(biāo)記頁面的不同區(qū)域，下面分別進(jìn) 奈 口 文件(F)編綴(E)查看(V)插入(1)工具(T)查找(D)站點(S)窗口(W)幫助(H)代碼拆分實時視圖D.D黃甲明…Untitled-1×7本地文件+文檔頭部一般包括以下幾種元素：(1)網(wǎng)頁標(biāo)題。使用<title>…</title>標(biāo)簽可以設(shè)置網(wǎng)頁標(biāo)題，瀏覽器會將該標(biāo)題顯示在標(biāo)題欄或狀態(tài)欄中。(2)網(wǎng)頁元信息。使用<meta/>標(biāo)簽可以標(biāo)記網(wǎng)頁元信息，在其中設(shè)置網(wǎng)站的相關(guān)屬性能夠方便搜索引擎檢索網(wǎng)頁。此外，它還可以標(biāo)記文檔的字符編碼，如圖3-1中的代碼"charset="utf-8""即表示將網(wǎng)頁文檔的字符編碼設(shè)置為“utf-8”。(3)網(wǎng)頁視口。網(wǎng)頁視口就是瀏覽器中顯示網(wǎng)頁頁面的那部分區(qū)域，通過設(shè)置視口的寬度、縮放比例等屬性可以使網(wǎng)頁適配各種屏幕尺寸的設(shè)備，具體設(shè)置方法見其他結(jié)構(gòu)元素在對網(wǎng)頁文檔排版時需要將大量標(biāo)簽放在下列表示結(jié)構(gòu)的元素中，也就是將表示內(nèi)容的標(biāo)簽裝進(jìn)不同的描述頁面的標(biāo)題欄或一個內(nèi)容塊的標(biāo)題區(qū)域。可包含多個header元素，如：網(wǎng)站Logo、主導(dǎo)航和搜索框等。描述頁面導(dǎo)航的鏈接組?？砂鄠€nav元素，導(dǎo)航性質(zhì)的鏈接組都可以放置在nav元素中，如主導(dǎo)航欄或側(cè)邊導(dǎo)航欄等。頁腳的導(dǎo)航一般不放在該元素中。描述頁面中的一個獨立內(nèi)容，如新聞文章、博客條目、用戶評論等。用于描述網(wǎng)頁中的一節(jié)，對頁面內(nèi)容進(jìn)行分區(qū)。如網(wǎng)頁中的章節(jié)、頭部或尾部等，可嵌套在article元素中。用于描述一個與頁面其余內(nèi)容幾乎無關(guān)的部分，可包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊廣告等。面底部。除上述結(jié)構(gòu)元素之外，還有div元素，對應(yīng)的標(biāo)簽<div>為塊級標(biāo)簽，span元素對應(yīng)的<span>標(biāo)簽為行內(nèi)標(biāo)簽，在頁面中靈活使用它們進(jìn)行布局，可以使網(wǎng)頁更具結(jié)構(gòu)化。作同中國中統(tǒng)女本會×李大釗任務(wù)描述網(wǎng)文當(dāng)?shù)呢?fù)擔(dān)，使網(wǎng)頁文檔的結(jié)構(gòu)更加清晰。理隨著HTML功能的不斷完善，結(jié)構(gòu)代碼和樣式代碼的混合使用讓HTML文檔的代碼結(jié)構(gòu)十分混亂，為網(wǎng)頁的維護(hù)工作增加了難度。此時CSS應(yīng)運而生，它將網(wǎng)頁的結(jié)構(gòu)層和表現(xiàn)層分離開來,大大簡化了HTML代碼。年12月開始制定CSS3標(biāo)準(zhǔn)。到目前為止該標(biāo)準(zhǔn)還沒有最終定稿，但主流瀏覽器已經(jīng)開始支持其CSS3樣式表是由一個或多個CSS3樣式組成的。CSS3樣式是由選擇器和聲明組成的，其基本格式如圖所示。選擇器樣式分隔符聲明聲明分隔符聲明樣式分隔符屬性屬性值屬性屬性值(2)聲明可有N(2)聲明可有N個，聲明之間用分號隔開并放置在一對大括號(即樣式分隔符)中，它們用于命令瀏覽器如何渲染指定對象。聲明由屬性和屬性值兩部分組成。(3)屬性是用于設(shè)置樣式的具體效果項，屬性名一般由一個或多個單詞組成，多個單詞中間用連字符連接。(4)屬性值是設(shè)置屬性效果的參數(shù)，可以是數(shù)值或關(guān)鍵字。11HTML與CSS是兩種不同的語言，要讓它們同時對一個網(wǎng)頁產(chǎn)生作用，必須在HTML文檔中引入CSS。在HTML文檔中引入CSS的3種方式分別為行內(nèi)樣式、內(nèi)嵌樣式表與鏈接樣式表。內(nèi)嵌樣式表與鏈接樣式表：添加方法是單擊“CSS設(shè)計器”面板中“源”窗格左側(cè)的加號按鈕，在展開的列表中可以看到3個選項。其中，"在頁面中定義"選項表示設(shè)置內(nèi)嵌樣式表，“創(chuàng)建新的CSS文件”與“附加現(xiàn)有的CSS文件”選項表示設(shè)置鏈接樣式豐選項表示設(shè)置鏈接樣式豐(1)內(nèi)嵌樣式表。選擇“在頁面中定義”選項后，文檔窗口即自動生成<style>標(biāo)簽，在其中輸入樣式代碼即可。使用該方式添加的樣式代碼可作用于當(dāng)前整個頁面，無法作index,html'index,html'1<1doctypehtml定”,系統(tǒng)將自動創(chuàng)建一個CSS樣式文件，并在網(wǎng)頁頭按鈕，打開樣式文件，即可在其中輸入樣式代碼，設(shè)置(styletype="text/css")<linkhref=indaxcssrelstyleshaetT)有條件使用(可選)定助X選擇“附加現(xiàn)有的CSS文件”選項后，將打開“附加現(xiàn)有的CSS文件”對話框，其與“創(chuàng)建新的CSS文件”對話框基本相同，單擊“瀏覽”按鈕，打開“選擇樣式表文件”對話框，在其中選擇想要附加的樣式表文件，單擊“確定”按鈕即可將本地的CSS文件附加到網(wǎng)頁文檔中。用它來統(tǒng)一設(shè)置某類元素的基本樣式。HTML文檔是由標(biāo)簽組成的，標(biāo)簽選擇器就是直接引用標(biāo)簽名的選擇器。以“”為前綴，后面跟隨一個自定義類名。需要為標(biāo)簽設(shè)置class屬性(class屬性可以包含多個屬性值，各屬性值之間用空格隔開),屬性值就是類選擇器的名稱如.p1{.}以“#”為前綴，后面跟隨一個自定義的ID名。使用ID選擇器需要為標(biāo)簽設(shè)置id屬性，具有唯一性，每個標(biāo)簽只能設(shè)置一個id屬性值，屬性值就是ID選擇器的名稱。如#p2{..}如<pid="p2">.</p>。擇器表示其后代元素。子選擇器通過“>”連接兩個選擇器，如div>p{.},前面選擇器表示父元素，后面選擇器表示其子元素。通過“+”連接兩個選擇器，只有滿足這個連接順相鄰選擇器素才會成功匹配。例如，在HTML文檔中有</div>,可使用h1+p{..}選擇與h1元素相鄰的，同級的一個p元素。兄弟選擇器通過"~"連接兩個選擇器，它在相鄰選擇器的基礎(chǔ)上，通過連接順序匹配相鄰的元素之后，會將后續(xù)同級別的同類元素一同匹配。例如，在HTML文檔中有<div><h1>.</h1><p>.</p><p>.</p></div>,可使用h1~p{..}選擇緊鄰在h1元素后出現(xiàn)的所有同級別的p元素。屬性選擇器：根據(jù)標(biāo)簽的屬性來匹配元素，一般有以下7種類型：是最基本的屬性選擇器，用于匹配所有擁有attr屬性的E元素，無論attr屬性值是什么。用于匹配attr屬性值為“value”的E元素，它縮小了匹配范圍，能夠更加精確地匹配需用于匹配attr屬性值列表中包含了“value”的E元素，不需要完全匹配。如果"value"是一個列表，需要用空格隔開。用于匹配attr屬性值以"value"開頭的E元素，例如：navalangzhbackgroundf選擇器選擇器只用于設(shè)置鏈接的樣式，包括“:link”和":visited",它們分別表示鏈接被訪問前的狀態(tài)與鏈接被訪問后的狀態(tài)?？捎糜谠O(shè)置任意元素的樣式，包括":hover"".active"和":focus"等，它們分別表示鼠標(biāo)指針移動至元素上時、鼠標(biāo)指針單擊元素區(qū)域但不松開時與元素獲得焦點時的狀態(tài)?？梢愿鶕?jù)文檔的結(jié)構(gòu)來匹配元素①:first-child。匹配父元素的第一個子元素。②:last-child。匹配父元素的最后一個子元素。③:nth-child(n)。匹配父元素的第n個子元素。④:empty。匹配沒有子元素的元素。⑤:root。匹配根元素。是":not()",它能夠過濾掉括號內(nèi)匹配的元素。擇器，常用的有以下3種。①:enabled。匹配指定范圍內(nèi)所有可用的元素。②:disabled。匹配指定范圍內(nèi)所有不可用的元素。③:checked。匹配指定范圍內(nèi)所有選擇類的元素。(2)類、偽類與屬性選擇器：10。(4)通配選擇器：0。肥火肥火“今”(節(jié)選)的李大釗我以為世間最可寶貴的就是“今”,最易喪失的也是“今”,因為他最容易喪為什么“今”最可寶貴呢?最好借哲人那昱孫所說的話答這個疑問：“爾若愛天還不確實，爾能確有把掘的就是今日。為什么“今”最易喪失呢?因為宇出大化，刻刻流轉(zhuǎn)，絕不停留。時間這個東西，也不因為再人貴他愛他稍稍在人何密念。試問吾人說“今”說“現(xiàn)在”,茫茫“今”,是開人的“現(xiàn)在”呢?例剛說他是“今”是“現(xiàn)在”,他早已風(fēng)馳也犁的一般，已成“過去”了，開人若要糊糊涂涂把他去掉，豈不可惜?學(xué)說學(xué)說兒絡(luò)在項目實訓(xùn)——制作“圖書交易網(wǎng)”主頁“網(wǎng)站介項目實訓(xùn)——制作“圖書交易網(wǎng)”主頁“網(wǎng)站介紹”模塊參考本項目兩個任務(wù)的任務(wù)實施，制作“圖書交易網(wǎng)”主頁的“網(wǎng)站介紹”模塊，效果如圖所示。圖書圖書(2)內(nèi)容標(biāo)簽添加在<body>→<mainid="contain">→<articleid="contain2">→<divid="#conind">標(biāo)簽內(nèi)，標(biāo)題使用<h3>標(biāo)簽，段落使用<p>標(biāo)簽。(3)標(biāo)題的選擇器為#conindh3,將其color屬性(文本