天天捕鱼最新版本

書名： HTML+CSS+JavaScript網(wǎng)頁設(shè)計(jì)與布局：從新手到高手
作者名：王修洪張振
本章字?jǐn)?shù)： 335字
更新時(shí)間： 2019-12-09 14:36:08

2.3 HTML5的主體結(jié)構(gòu)

標(biāo)準(zhǔn)的超文本標(biāo)記語言文件都具有一個(gè)基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對(duì)出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語言文件的開頭與結(jié)尾標(biāo)志和超文本標(biāo)記語言的頭部與實(shí)體兩大部分。下面將向用戶介紹HTML5的基本文檔結(jié)構(gòu)和新增的語義化標(biāo)簽。

2.3.1 HTML5結(jié)構(gòu)性標(biāo)簽體系

HTML5變革最明顯的地方，是讓人機(jī)交互、人網(wǎng)交互變得更加舒適，更貼合用戶。這對(duì)文檔結(jié)構(gòu)和語義化標(biāo)簽體系的革新，起到了很大的作用。

如同XHTML語義化一樣，HTML5語義化標(biāo)簽的使用也應(yīng)該遵循：每個(gè)標(biāo)簽都有它特定的意義，而語義化，就是讓用戶在適當(dāng)?shù)奈恢糜眠m當(dāng)?shù)臉?biāo)簽，以便讓人和機(jī)器（機(jī)器可理解為瀏覽器，也可理解為搜索引擎）都一目了然。

1. 語義更明確簡潔的結(jié)構(gòu)

從“頭”說起，一個(gè)標(biāo)準(zhǔn)的XHTML頭部代碼應(yīng)該是這樣：

能記住嗎？你會(huì)去死記硬背嗎？當(dāng)然不會(huì)！用戶只需要機(jī)械地復(fù)制粘貼即可。再看看一個(gè)標(biāo)準(zhǔn)的HTML5頭部是怎樣的。

現(xiàn)在的DOCTYPE好記多了。同DOCTYPE變化一樣，字符集的聲明也被簡化了。

HTML5的頭部可以如此簡單，可以輕易地記住！并且，可以忽略大小寫，引號(hào)以及最后一個(gè)尖括號(hào)前的反斜線。

為什么可以如此松散？其實(shí)，如果把XHTML當(dāng)成text/html發(fā)送，瀏覽器一樣可以很好地解析，瀏覽器并不在乎代碼的語法。所以，HTML5是形而上的，它可能會(huì)破壞原有的一些標(biāo)準(zhǔn)，但仍可在瀏覽器中有很好地表現(xiàn)。

當(dāng)然，為了團(tuán)隊(duì)協(xié)助與后續(xù)維護(hù)的方便，用戶還是應(yīng)該統(tǒng)一一種自己喜歡的風(fēng)格的寫法，例如：

使用新的DOCTYPE后，瀏覽器默認(rèn)以標(biāo)準(zhǔn)模式顯示頁面。例如，使用Firefox打開一個(gè)HTML5頁面，然后執(zhí)行【工具】|【頁面信息】命令，將打開【頁信息】對(duì)話框，其中標(biāo)注出當(dāng)前頁面是以標(biāo)準(zhǔn)模式顯示的。

另外，目前HTML5雖然并不為所有瀏覽器所支持，但這個(gè)能省去100多字節(jié)（對(duì)于日PV百萬級(jí)以上的站點(diǎn)，能省下不少的流量）的頭部已可以完美地兼容了。如果對(duì)瀏覽器解析模式有研究的話，應(yīng)該知道，頁面在沒有定義DOCTYPE的情況下會(huì)觸發(fā)怪異模式，而只要定義了<!doctype html>瀏覽器就可以在標(biāo)準(zhǔn)模式下解析頁面，而不需要指定某個(gè)類型的DTD。

2. 新的語義化標(biāo)簽體系

語義化編碼是一個(gè)合格前端開發(fā)者必備的技能，但隨著網(wǎng)頁的日漸豐富化，僅僅用原有的XHTML標(biāo)簽去語義化顯然已經(jīng)力不從心。于是，HTML5提供了一系列新的標(biāo)簽及相應(yīng)屬性，以反應(yīng)現(xiàn)代網(wǎng)站的典型語義。下面以具體的實(shí)例來說明，如下所示。

上面是一個(gè)簡單的博客頁面部分HTML，由頭部、文章展示區(qū)、右側(cè)欄、底部組成。編碼整潔，也符合XHTML的語義化，即便是在HTML5中也可以有很好的表現(xiàn)。

但是對(duì)瀏覽器來說，這就是一段沒有區(qū)分開權(quán)重的代碼，而不是以一個(gè)讓機(jī)器也能讀懂語義的標(biāo)簽來定義相應(yīng)的區(qū)塊。例如，標(biāo)準(zhǔn)瀏覽器（例如Firefox、Chroome甚至新版的IE）都有一個(gè)快捷鍵可以帶引客戶直接跳轉(zhuǎn)到頁面的導(dǎo)航，但問題是所有的區(qū)塊都是用DIV定義的，并且DIV的ID值是同開發(fā)者定的，所以，瀏覽器并不知道哪個(gè)應(yīng)該是導(dǎo)航鏈接所在區(qū)塊。

那么，將上面的代碼換成HTML5就可以寫成如下形式。

原來，HTML的頁面結(jié)構(gòu)可以如此之美，不用注釋也能一目了然。對(duì)于瀏覽器，找到對(duì)應(yīng)的區(qū)塊也不再會(huì)茫然無措。

2.3.2 新增的主體結(jié)構(gòu)標(biāo)簽

HTML5相比于HTML 4，改變最大的就是增加了很多新的標(biāo)簽，新增加的標(biāo)簽較以往的標(biāo)簽更加語義化。其中，用于控制頁面主體內(nèi)容的結(jié)構(gòu)標(biāo)簽，可以劃分為主體結(jié)構(gòu)標(biāo)簽。

1. article標(biāo)簽

該標(biāo)簽表示文檔、頁面、應(yīng)用程序或站點(diǎn)中的自包含成分所構(gòu)成的一個(gè)頁面的一部分，并且這部分專用于獨(dú)立地分類或復(fù)用。例如，一個(gè)博客的帖子、一篇文章、一個(gè)視頻文件等。

示例2-1：article.html

上面的示例可以看到article里面嵌套了header、footer、p標(biāo)簽（見下圖）。

可以看到相比于HTML 4，XHTML更加語義化。header表示文章的頭部（標(biāo)題），p表示文章的正文，footer表示文章的底部。需要注意的是article可以嵌套article。

示例2-2：article1.html

此示例比上一個(gè)示例是一篇更加完善的博文，不僅有正文，還有正文的評(píng)論。整體使用了article標(biāo)簽，與上一示例一樣，header表示文章頭部，正文還是p標(biāo)簽，section標(biāo)簽區(qū)分正文與評(píng)論。評(píng)論也是獨(dú)立的內(nèi)容部分，也包含header和p（見下圖）。

2. section標(biāo)簽

該標(biāo)簽用來定義文檔中的節(jié)（Section），例如章節(jié)、頁眉、頁腳或文檔中的其他部分。用于成節(jié)的內(nèi)容，會(huì)在文檔流中開始一個(gè)新的節(jié)。它主要用于表示對(duì)網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊。section標(biāo)簽通常由內(nèi)容及其標(biāo)題組成，如下代碼所示。

提示

section和article的區(qū)別是：section的作用是對(duì)頁面上內(nèi)容進(jìn)行分塊，article是獨(dú)立的完整的內(nèi)容。語義上有區(qū)別。

3. nav標(biāo)簽

HTML5結(jié)構(gòu)標(biāo)簽<nav>標(biāo)簽用于構(gòu)建一個(gè)頁面或一個(gè)站點(diǎn)內(nèi)的鏈接，表示一個(gè)可以用作頁面導(dǎo)航的鏈接組。其中的導(dǎo)航標(biāo)簽鏈接到其他頁面或當(dāng)前頁面的其他部分。

但是，并不是鏈接的每一個(gè)集合都是一個(gè)<nav>，比如：贊助商的鏈接列表及搜索結(jié)果頁面就不是，因?yàn)樗鼈兪钱?dāng)前頁面的主內(nèi)容。如下代碼所示：

提示

<nav>標(biāo)簽適用的版塊包括普通的導(dǎo)航、側(cè)邊欄的導(dǎo)航、頁內(nèi)導(dǎo)航。

4. aside標(biāo)簽

該標(biāo)簽定義article以外的內(nèi)容，aside的內(nèi)容應(yīng)該與article的內(nèi)容相關(guān)，表示當(dāng)前頁面或文章的附屬信息部分，可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、導(dǎo)航條以及廣告；或者Web 2.0博客網(wǎng)站的tag。用于成節(jié)的內(nèi)容，會(huì)在文檔流中開始一個(gè)新的節(jié)。

此實(shí)例第一個(gè)aside展示了文章版權(quán)信息，第二個(gè)aside展示了相關(guān)文章的友情鏈接。aside標(biāo)簽的主要用法如下所述。

被包含在<article>標(biāo)簽中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文檔有關(guān)的參考資料、名詞解釋等。

在<article>標(biāo)簽之外使用，作為頁面或網(wǎng)站全局的附屬信息部分（見下圖）。

5. time標(biāo)簽與微格式

time標(biāo)簽代表24小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期，表示時(shí)刻時(shí)允許帶時(shí)差，可以包括如下格式。

在上面的代碼中，日期與時(shí)間之間要用“T”字符隔開；以“Z”結(jié)尾的格式表示使用UTC標(biāo)準(zhǔn)時(shí)間編碼；最后一種格式為添加時(shí)差。

time標(biāo)簽的“pubdate”是一個(gè)可選的boolean型屬性，可以用在article標(biāo)簽中的time標(biāo)簽上，表示具體發(fā)布日期，如下代碼所示。

2.3.3 新增的非主體結(jié)構(gòu)標(biāo)簽

與主體結(jié)構(gòu)標(biāo)簽相對(duì)應(yīng)的，就是非主體結(jié)構(gòu)標(biāo)簽。這些標(biāo)簽，用于放置輔助主體內(nèi)容的信息。例如，放置主體內(nèi)容的標(biāo)題，將標(biāo)題進(jìn)行群組化，添加頁面的頁眉頁腳等。

1. header標(biāo)簽

header標(biāo)簽是頁面加載的第一個(gè)標(biāo)簽，包含了站點(diǎn)的標(biāo)題、Logo、網(wǎng)站導(dǎo)航等，是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)標(biāo)簽，通常用來放置整個(gè)頁面或頁內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題。

一個(gè)網(wǎng)頁內(nèi)并未限制header標(biāo)簽的個(gè)數(shù)，可以擁有多個(gè)，可以為每個(gè)內(nèi)容區(qū)塊增加一個(gè)。header標(biāo)簽中可以包含多個(gè)"h1～h6"標(biāo)簽、hgroup標(biāo)簽、nav標(biāo)簽、form標(biāo)簽、table標(biāo)簽等。

2. hgroup標(biāo)簽

hgroup標(biāo)簽是將標(biāo)題及其子標(biāo)題進(jìn)行分組的標(biāo)簽，通常用于對(duì)網(wǎng)頁或區(qū)段（Section）的標(biāo)題進(jìn)行組合，特別慣用于標(biāo)題類的組合，例如文章的標(biāo)題與副標(biāo)題。

3. footer標(biāo)簽

footer標(biāo)簽包含了與頁面、文章或是部分內(nèi)容有關(guān)的信息，可以作為其上層父級(jí)內(nèi)容區(qū)塊或是一個(gè)根區(qū)塊的腳注，通常包括其相關(guān)區(qū)塊的腳注信息，例如說文章的作者或是日期。作為頁面的頁腳，其有可能包含了版權(quán)或是其他重要的法律信息。

一個(gè)頁面中也未限制footer標(biāo)簽的個(gè)數(shù)?？梢詾閍rticle標(biāo)簽或section標(biāo)簽添加footer標(biāo)簽。

4. address標(biāo)簽

address標(biāo)簽用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔或文檔維護(hù)者的名字、郵箱、電話號(hào)碼等。

一般包含版權(quán)數(shù)據(jù)、導(dǎo)航信息、備案信息、聯(lián)系方式等內(nèi)容，如下代碼所示。

2.4 HTML5文件的編寫方法

對(duì)于比較熟悉HTML5代碼的用戶，可以直接手寫HTML5文件。而對(duì)于對(duì)HTML5代碼不太熟悉的用戶，則需要借助HTML編輯器來編寫HTML5文件，例如使用Dreamweaver來編寫HTML5文件。

2.4.1 手工編寫HTML5

由于HTML5是一種標(biāo)記語言，而標(biāo)記語言是以文本形式存在的，因此所有的記事本工具都可以作為它的開發(fā)環(huán)境（見下圖）。

若要使用記事本編寫HTML5文件，則需要執(zhí)行【程序】|【記事本】命令，打開一個(gè)記事本，并在記事本中輸入HTML代碼。

編輯完HTML文件后，執(zhí)行【文件】|【保存】命令，或按Ctrl+S快捷鍵保存記事本，在彈出的【另存為】對(duì)話框中，將其擴(kuò)展名保存為.html或.htm（如下圖）。

單擊【保存】按鈕，即可保存該文件。然后，使用瀏覽器打開該文件，在瀏覽器中預(yù)覽最終效果（如下圖）。

2.4.2 使用Dreamweaver編寫

對(duì)于一些不太熟悉HTML代碼的用戶來講，為了避免代碼編寫錯(cuò)誤及編寫效率低下等問題，還需要使用專門的HTML網(wǎng)絡(luò)編寫軟件進(jìn)行編寫。使用HTML網(wǎng)頁編寫軟件，在編寫的過程中可以出現(xiàn)語法錯(cuò)誤和格式提示，便于用戶更改與查閱。最常用的HTML代碼編寫軟件便是由MACROMEDIA公司開發(fā)的Adobe Dreamweaver軟件了。

Adobe Dreamweaver簡稱“DW”，其中文名稱為“夢想編織者”，是目前業(yè)界最流行的靜態(tài)網(wǎng)頁制作與網(wǎng)站開發(fā)工具。Dreamweave是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得的網(wǎng)頁編輯器，不僅可以幫助不同層次的用戶快速設(shè)計(jì)網(wǎng)頁，還可以借助其內(nèi)置的功能使用ASP、JSP、PHP、ASP.net和CFML等服務(wù)器語言為網(wǎng)站服務(wù)。

1. 歡迎界面

當(dāng)用戶啟用Dreamweave CC時(shí)（見下圖），會(huì)出現(xiàn)一個(gè)歡迎界面，以幫助用戶進(jìn)行相應(yīng)的操作，包括組建瀏覽的文件、新建、了解等操作。

2. 工作界面

在歡迎界面中執(zhí)行某項(xiàng)操作之后，便可以進(jìn)入到工作界面中。Dreamweave CC 2015所提供的工作界面是一種可伸縮、自由定制的界面，用戶可以根據(jù)工作習(xí)慣自由設(shè)置界面。其中，默認(rèn)的灰色界面顏色使整個(gè)界面顯得更加緊湊。

Dreamweave CC 2015工作界面中窗口組成的具體情況，如下所述（參見下圖）。

□ 菜單欄菜單欄中包含各種操作執(zhí)行菜單命令，以及切換按鈕，如【最小化】、【最大化】、【還原】和【關(guān)閉】等按鈕。

□ 工作區(qū)切換器允許用戶更改窗口的界面以“新手”“代碼”“默認(rèn)”“設(shè)計(jì)”或“Extract”方式顯示，以及允許用戶新建工作區(qū)、管理工作區(qū)和保存當(dāng)前工作區(qū)等操作。

□ 標(biāo)簽選擇器位于【文檔】窗口底部的狀態(tài)欄中，用于顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽，以及該標(biāo)簽的父標(biāo)簽等，可體現(xiàn)出這些標(biāo)簽的層次結(jié)構(gòu)。

□ 面板組顯示Dreamweaver提供的各種面板，默認(rèn)顯示插入、CSS設(shè)計(jì)器、CSS過渡效果和文件等面板。

□ 編碼工具欄用于顯示Dreamweaver中的各種編碼工具，包括打開文檔、顯示代碼瀏覽器、選擇父標(biāo)簽等15種常用工具。

3. 文檔視圖

Dreamweaver CC 2015為用戶提供了多種文檔視圖，以幫助用戶更為便捷地編輯網(wǎng)頁內(nèi)容。

□ 【設(shè)計(jì)】視圖

【設(shè)計(jì)】視圖以可視化的形式來顯示網(wǎng)頁內(nèi)容（如下圖），其界面中并不存在HTML編碼，外形類似于用戶在瀏覽器中查看Web頁面時(shí)的狀態(tài)。

用戶可通過單擊【文檔】工具欄中的【設(shè)計(jì)】按鈕，或執(zhí)行【查看】|【設(shè)計(jì)】命令，切換到該視圖中。

□ 【代碼】視圖

【代碼】視圖以HTML代碼形式來顯示網(wǎng)頁編輯內(nèi)容，用戶可以利用界面中【編碼】工具欄中的各類工具，來提高代碼的編輯效果。用戶可以通過單擊【文檔】工具欄中的【代碼】按鈕，或執(zhí)行【查看】|【代碼】命令，切換到該視圖中（見下圖）。

□ 【拆分】視圖

【拆分】視圖是一個(gè)復(fù)合型的工作區(qū)，它可以同時(shí)顯示【設(shè)計(jì)】和【代碼】2種視圖樣式，在其中一個(gè)窗口中創(chuàng)建和編輯網(wǎng)頁時(shí)，所做的更改會(huì)即時(shí)顯示在另一個(gè)窗口中。用戶可通過單擊【文檔】工具欄中的【拆分】按鈕，或執(zhí)行【查看】|【代碼和設(shè)計(jì)】命令，切換到該視圖中（如下圖）。

除此之外，為了適應(yīng)新的平板擴(kuò)展顯示寬度，Dreamweaver為用戶提供了垂直和水平拆分兩種格式。用戶可通過執(zhí)行【查看】|【垂直拆分】命令，來顯示垂直拆分格式，而再次執(zhí)行該命令，則取消垂直拆分格式，轉(zhuǎn)而使用水平拆分格式。

□ 【實(shí)時(shí)視圖】

【實(shí)時(shí)視圖】類似于【設(shè)計(jì)】視圖，但相對(duì)于【設(shè)計(jì)】視圖來講，【實(shí)時(shí)視圖】可以更逼真地顯示文檔在瀏覽器中的表示形式，并能夠像在瀏覽器中那樣與文檔進(jìn)行交互（如下圖）。

在【實(shí)時(shí)視圖】中無法對(duì)素材進(jìn)行編輯，用戶可通過【代碼】視圖來編輯網(wǎng)頁內(nèi)容，并通過刷新操作將編輯結(jié)果顯示在【實(shí)時(shí)視圖】中。用戶可通過單擊【文檔】工具欄中的【實(shí)時(shí)視圖】按鈕，或執(zhí)行【查看】|【實(shí)時(shí)視圖】命令，切換到該視圖中。

□ 【實(shí)時(shí)代碼】視圖

【實(shí)時(shí)代碼】視圖只有在【實(shí)時(shí)視圖】模式下，才可以顯示。用戶需要先切換到【實(shí)時(shí)視圖】模式下，再通過單擊【文檔】工具欄中的【在代碼視圖中顯示實(shí)時(shí)視圖源】按鈕，或執(zhí)行【查看】|【實(shí)時(shí)代碼】命令，來顯示該視圖模式。而【實(shí)時(shí)代碼】主要用于執(zhí)行該頁面的實(shí)際代碼，并不能進(jìn)行編輯；當(dāng)在【實(shí)時(shí)視圖】中與該頁面進(jìn)行交互時(shí)，它可以顯示動(dòng)態(tài)變化（如下圖）。

4. 編碼工具欄

在Dreamweaver中的【代碼】視圖中，用戶可以通過編輯HTML代碼的方式來制作網(wǎng)頁，而【編碼】工具欄則位于該視圖中。其【編碼】工具欄顯示在【文檔】窗口的左側(cè)，包含了可用于執(zhí)行多種標(biāo)準(zhǔn)編碼操作的按鈕（如下圖）。

Dreamweaver為用戶提供了實(shí)時(shí)顯示提示功能，用戶只需將鼠標(biāo)移至【編碼】工具欄的按鈕上，系統(tǒng)即會(huì)顯示工具提示信息。默認(rèn)情況下，【編碼】工具欄中各個(gè)顯示按鈕的具體功能如下表所示。

通過上表，用戶已了解【編碼】工具欄中的工具，此時(shí)便可以使用工具欄中的按鈕來快速編寫比較規(guī)范的代碼。

5. 編寫HTML代碼

了解Dreamweaver的基本操作界面之后，便可以編寫HTML代碼了。

啟動(dòng)Dreamweaver軟件，在歡迎屏幕中的【新建】欄中，選擇所需創(chuàng)建的文檔類型，即可快速創(chuàng)建所選文檔類型的空白文檔（如下圖）。

或者，執(zhí)行【文件】|【新建】命令，在彈出的【新建文檔】對(duì)話框中，激活【新建文檔】選項(xiàng)卡，在【文檔類型】列表中選擇“HTML”文檔類型，然后在【框架】列表中選擇一種框架類型，單擊【創(chuàng)建】按鈕即可，如下圖。

然后，單擊【文檔】工具欄中的【代碼】按鈕，或執(zhí)行【查看】|【代碼】命令，切換到該視圖中，如下圖。

修改HTML的文檔標(biāo)題，將代碼中的<title>標(biāo)記中的“無標(biāo)題文檔”修改為“春曉”。然后，在<body>標(biāo)記中輸入網(wǎng)頁內(nèi)容，如下圖。

修改完HTML代碼之后，執(zhí)行【文件】|【保存】命令，在彈出的【另存為】對(duì)話框中，設(shè)置保存位置和名稱，單擊【保存】按鈕即可，如下圖。

此時(shí)，在Dreamweaver中，按下F12功能鍵，使用默認(rèn)瀏覽器查看最終效果，如下圖。

2.5 練習(xí)：創(chuàng)建HTML5文檔

練習(xí)要點(diǎn)

● 新建文檔

● 設(shè)置頁面屬性

● 輸入文本

● 設(shè)置文本格式

● 保存文檔

● 預(yù)覽文檔

在創(chuàng)建HTML5文檔時(shí)，用戶可以通過許多開發(fā)工具實(shí)現(xiàn)。其中，最熟悉就是Dreamweaver。在Dreamweaver CC版本中，用戶可以直接創(chuàng)建HTML5文檔，并在【編輯器】中編輯HTML5代碼內(nèi)容，如下圖。

操作步驟

STEP|01 執(zhí)行【文件】|【新建】命令，在【文檔類型】列表框中選擇【HTML】選項(xiàng)，創(chuàng)建一個(gè)空白頁面，如下圖。

STEP|02 然后，在頁面下方的【屬性】面板中，單擊【頁面屬性】按鈕，如下圖。

STEP|03 在彈出的【頁面屬性】對(duì)話框中的【外觀（CSS）】選項(xiàng)卡中，設(shè)置頁面文本大小、文本顏色和背景顏色，如下圖。

STEP|04 激活左側(cè)的【標(biāo)題／編碼】選項(xiàng)卡，在【標(biāo)題】文本框中輸入頁面標(biāo)題，并單擊【確定】按鈕，如下圖。

STEP|05 在【設(shè)計(jì)】視圖中，輸入“送孟浩然之廣陵”詩詞內(nèi)容，如下圖。

STEP|06 在【屬性】面板中，激活【CSS】選項(xiàng)卡，單擊【居中對(duì)齊】按鈕，設(shè)置對(duì)齊格式，如下圖。

STEP|07 執(zhí)行【文件】|【保存】命令，在彈出的【另存為】對(duì)話框中，設(shè)置保存名稱，單擊【保存】按鈕，如下圖。

STEP|08 最后，按下F12鍵，在彈出的瀏覽器中查看最終效果，如下圖。

2.6 練習(xí)：制作第一個(gè)HTML5網(wǎng)頁

練習(xí)要點(diǎn)

● 新建文檔

● 設(shè)置背景顏色

● 設(shè)置標(biāo)題

● 設(shè)置副標(biāo)題

● 設(shè)置段落內(nèi)容

當(dāng)為序列應(yīng)用特效之前，需要對(duì)序列進(jìn)行嵌套。在本練習(xí)中，如下圖，將通過制作穿梭效果，來詳細(xì)介紹嵌套序列，以及視頻效果、音頻過渡效果、動(dòng)畫關(guān)鍵幀的使用方法和操作技巧。

操作步驟

STEP|01 啟動(dòng)Dreamweaver，在歡迎界面中選擇【HTML】選項(xiàng)，創(chuàng)建一個(gè)空白頁面，如下圖。

STEP|02 切換到【代碼】頁面中，在<title></title>標(biāo)簽內(nèi)輸入網(wǎng)頁標(biāo)題，同時(shí)輸入設(shè)置背景顏色的<style>代碼，如下圖。

STEP|03 然后，在<body></body>標(biāo)簽內(nèi)，輸入h1標(biāo)題和h3標(biāo)題的代碼及標(biāo)題文本，如下圖。

STEP|04 在h3標(biāo)題下方輸入<pre></pre>代碼，并在代碼中間輸入詩歌正文，如下圖。

STEP|05 在</pre>代碼下方，輸入<h5></h5>代碼，并在代碼中間輸入標(biāo)題文本，如下圖。

STEP|06 隨后，在</h5>代碼下方輸入<pre> </pre>代碼，并在代碼中間輸入注解內(nèi)容，如下圖。

STEP|07 使用同樣的方法，在下方分別輸入【韻譯】和【評(píng)析】代碼及文本，如下圖。

STEP|08 最后，按下F12鍵，在彈出的瀏覽器中查看最終效果，如下圖。

2.7 新手訓(xùn)練營

練習(xí)1：制作嵌套列表

downloads\2\新手訓(xùn)練營\嵌套列表

提示：本練習(xí)中，將使用XHTML來制作一個(gè)項(xiàng)目列表和編號(hào)列表嵌套在一起的嵌套列表，其編號(hào)列表嵌套在項(xiàng)目列表中。具體代碼如下所示。

練習(xí)2：制作特定表格

downloads\2\新手訓(xùn)練營\特定表格

提示：本練習(xí)中，將使用XHTML代碼制作一個(gè)3行×4列、寬度為200px、邊框粗細(xì)為1、單元格邊距和間距為2，以及表格標(biāo)題位于頂部的一個(gè)特定表格。具體代碼如下所示。

練習(xí)3：制作選擇列表

downloads\6\新手訓(xùn)練營\選擇列表

提示：本練習(xí)中，將使用XHTML代碼來制作一個(gè)具有下拉功能的選擇列表。具體代碼如下所示。

使用瀏覽器預(yù)覽，其效果如下圖所示。

練習(xí)4：制作日期選擇器

downloads\6\新手訓(xùn)練營\日期選擇器

提示：本練習(xí)中，將使用XHTML代碼，來制作一個(gè)日期選擇器。具體代碼如下所示。