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

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