美女与野兽捕鱼机技巧

書名： HTML+CSS+JavaScript網頁設計與布局：從新手到高手
作者名：王修洪張振
本章字數： 387字
更新時間： 2019-12-09 14:36:05

2.3 HTML5的主體結構

標準的超文本標記語言文件都具有一個基本的整體結構，標記一般都是成對出現（部分標記除外例如：<br/>），即超文本標記語言文件的開頭與結尾標志和超文本標記語言的頭部與實體兩大部分。下面將向用戶介紹HTML5的基本文檔結構和新增的語義化標簽。

2.3.1 HTML5結構性標簽體系

HTML5變革最明顯的地方，是讓人機交互、人網交互變得更加舒適，更貼合用戶。這對文檔結構和語義化標簽體系的革新，起到了很大的作用。

如同XHTML語義化一樣，HTML5語義化標簽的使用也應該遵循：每個標簽都有它特定的意義，而語義化，就是讓用戶在適當的位置用適當的標簽，以便讓人和機器（機器可理解為瀏覽器，也可理解為搜索引擎）都一目了然。

1. 語義更明確簡潔的結構

從“頭”說起，一個標準的XHTML頭部代碼應該是這樣：

能記住嗎？你會去死記硬背嗎？當然不會！用戶只需要機械地復制粘貼即可。再看看一個標準的HTML5頭部是怎樣的。

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

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

為什么可以如此松散？其實，如果把XHTML當成text/html發送，瀏覽器一樣可以很好地解析，瀏覽器并不在乎代碼的語法。所以，HTML5是形而上的，它可能會破壞原有的一些標準，但仍可在瀏覽器中有很好地表現。

當然，為了團隊協助與后續維護的方便，用戶還是應該統一一種自己喜歡的風格的寫法，例如：

使用新的DOCTYPE后，瀏覽器默認以標準模式顯示頁面。例如，使用Firefox打開一個HTML5頁面，然后執行【工具】|【頁面信息】命令，將打開【頁信息】對話框，其中標注出當前頁面是以標準模式顯示的。

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

2. 新的語義化標簽體系

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

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

但是對瀏覽器來說，這就是一段沒有區分開權重的代碼，而不是以一個讓機器也能讀懂語義的標簽來定義相應的區塊。例如，標準瀏覽器（例如Firefox、Chroome甚至新版的IE）都有一個快捷鍵可以帶引客戶直接跳轉到頁面的導航，但問題是所有的區塊都是用DIV定義的，并且DIV的ID值是同開發者定的，所以，瀏覽器并不知道哪個應該是導航鏈接所在區塊。

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

原來，HTML的頁面結構可以如此之美，不用注釋也能一目了然。對于瀏覽器，找到對應的區塊也不再會茫然無措。

2.3.2 新增的主體結構標簽

HTML5相比于HTML 4，改變最大的就是增加了很多新的標簽，新增加的標簽較以往的標簽更加語義化。其中，用于控制頁面主體內容的結構標簽，可以劃分為主體結構標簽。

1. article標簽

該標簽表示文檔、頁面、應用程序或站點中的自包含成分所構成的一個頁面的一部分，并且這部分專用于獨立地分類或復用。例如，一個博客的帖子、一篇文章、一個視頻文件等。

示例2-1：article.html

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

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

示例2-2：article1.html

此示例比上一個示例是一篇更加完善的博文，不僅有正文，還有正文的評論。整體使用了article標簽，與上一示例一樣，header表示文章頭部，正文還是p標簽，section標簽區分正文與評論。評論也是獨立的內容部分，也包含header和p（見下圖）。

2. section標簽

該標簽用來定義文檔中的節（Section），例如章節、頁眉、頁腳或文檔中的其他部分。用于成節的內容，會在文檔流中開始一個新的節。它主要用于表示對網站或應用程序中頁面上的內容進行分塊。section標簽通常由內容及其標題組成，如下代碼所示。

提示

section和article的區別是：section的作用是對頁面上內容進行分塊，article是獨立的完整的內容。語義上有區別。

3. nav標簽

HTML5結構標簽<nav>標簽用于構建一個頁面或一個站點內的鏈接，表示一個可以用作頁面導航的鏈接組。其中的導航標簽鏈接到其他頁面或當前頁面的其他部分。

但是，并不是鏈接的每一個集合都是一個<nav>，比如：贊助商的鏈接列表及搜索結果頁面就不是，因為它們是當前頁面的主內容。如下代碼所示：

提示

<nav>標簽適用的版塊包括普通的導航、側邊欄的導航、頁內導航。

4. aside標簽

該標簽定義article以外的內容，aside的內容應該與article的內容相關，表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、導航條以及廣告；或者Web 2.0博客網站的tag。用于成節的內容，會在文檔流中開始一個新的節。

此實例第一個aside展示了文章版權信息，第二個aside展示了相關文章的友情鏈接。aside標簽的主要用法如下所述。

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

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

5. time標簽與微格式

time標簽代表24小時中的某個時刻或某個日期，表示時刻時允許帶時差，可以包括如下格式。

在上面的代碼中，日期與時間之間要用“T”字符隔開；以“Z”結尾的格式表示使用UTC標準時間編碼；最后一種格式為添加時差。

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

2.3.3 新增的非主體結構標簽

與主體結構標簽相對應的，就是非主體結構標簽。這些標簽，用于放置輔助主體內容的信息。例如，放置主體內容的標題，將標題進行群組化，添加頁面的頁眉頁腳等。

1. header標簽

header標簽是頁面加載的第一個標簽，包含了站點的標題、Logo、網站導航等，是一種具有引導和導航作用的結構標簽，通常用來放置整個頁面或頁內的一個內容區塊的標題。

一個網頁內并未限制header標簽的個數，可以擁有多個，可以為每個內容區塊增加一個。header標簽中可以包含多個"h1～h6"標簽、hgroup標簽、nav標簽、form標簽、table標簽等。

2. hgroup標簽

hgroup標簽是將標題及其子標題進行分組的標簽，通常用于對網頁或區段（Section）的標題進行組合，特別慣用于標題類的組合，例如文章的標題與副標題。

3. footer標簽

footer標簽包含了與頁面、文章或是部分內容有關的信息，可以作為其上層父級內容區塊或是一個根區塊的腳注，通常包括其相關區塊的腳注信息，例如說文章的作者或是日期。作為頁面的頁腳，其有可能包含了版權或是其他重要的法律信息。

一個頁面中也未限制footer標簽的個數。可以為article標簽或section標簽添加footer標簽。

4. address標簽

address標簽用來在文檔中呈現聯系信息，包括文檔或文檔維護者的名字、郵箱、電話號碼等。

一般包含版權數據、導航信息、備案信息、聯系方式等內容，如下代碼所示。

2.4 HTML5文件的編寫方法

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

2.4.1 手工編寫HTML5

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

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

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

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

2.4.2 使用Dreamweaver編寫

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

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

1. 歡迎界面

當用戶啟用Dreamweave CC時（見下圖），會出現一個歡迎界面，以幫助用戶進行相應的操作，包括組建瀏覽的文件、新建、了解等操作。

2. 工作界面

在歡迎界面中執行某項操作之后，便可以進入到工作界面中。Dreamweave CC 2015所提供的工作界面是一種可伸縮、自由定制的界面，用戶可以根據工作習慣自由設置界面。其中，默認的灰色界面顏色使整個界面顯得更加緊湊。

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

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

□ 工作區切換器允許用戶更改窗口的界面以“新手”“代碼”“默認”“設計”或“Extract”方式顯示，以及允許用戶新建工作區、管理工作區和保存當前工作區等操作。

□ 標簽選擇器位于【文檔】窗口底部的狀態欄中，用于顯示環繞當前選定內容的標簽，以及該標簽的父標簽等，可體現出這些標簽的層次結構。

□ 面板組顯示Dreamweaver提供的各種面板，默認顯示插入、CSS設計器、CSS過渡效果和文件等面板。

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

3. 文檔視圖

Dreamweaver CC 2015為用戶提供了多種文檔視圖，以幫助用戶更為便捷地編輯網頁內容。

□ 【設計】視圖

【設計】視圖以可視化的形式來顯示網頁內容（如下圖），其界面中并不存在HTML編碼，外形類似于用戶在瀏覽器中查看Web頁面時的狀態。

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

□ 【代碼】視圖

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

□ 【拆分】視圖

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

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

□ 【實時視圖】

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

在【實時視圖】中無法對素材進行編輯，用戶可通過【代碼】視圖來編輯網頁內容，并通過刷新操作將編輯結果顯示在【實時視圖】中。用戶可通過單擊【文檔】工具欄中的【實時視圖】按鈕，或執行【查看】|【實時視圖】命令，切換到該視圖中。

□ 【實時代碼】視圖

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

4. 編碼工具欄

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

Dreamweaver為用戶提供了實時顯示提示功能，用戶只需將鼠標移至【編碼】工具欄的按鈕上，系統即會顯示工具提示信息。默認情況下，【編碼】工具欄中各個顯示按鈕的具體功能如下表所示。

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

5. 編寫HTML代碼

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

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

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

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

修改HTML的文檔標題，將代碼中的<title>標記中的“無標題文檔”修改為“春曉”。然后，在<body>標記中輸入網頁內容，如下圖。

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

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

2.5 練習：創建HTML5文檔

練習要點

● 新建文檔

● 設置頁面屬性

● 輸入文本

● 設置文本格式

● 保存文檔

● 預覽文檔

在創建HTML5文檔時，用戶可以通過許多開發工具實現。其中，最熟悉就是Dreamweaver。在Dreamweaver CC版本中，用戶可以直接創建HTML5文檔，并在【編輯器】中編輯HTML5代碼內容，如下圖。

操作步驟

STEP|01 執行【文件】|【新建】命令，在【文檔類型】列表框中選擇【HTML】選項，創建一個空白頁面，如下圖。

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

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

STEP|04 激活左側的【標題／編碼】選項卡，在【標題】文本框中輸入頁面標題，并單擊【確定】按鈕，如下圖。

STEP|05 在【設計】視圖中，輸入“送孟浩然之廣陵”詩詞內容，如下圖。

STEP|06 在【屬性】面板中，激活【CSS】選項卡，單擊【居中對齊】按鈕，設置對齊格式，如下圖。

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

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

2.6 練習：制作第一個HTML5網頁

練習要點

● 新建文檔

● 設置背景顏色

● 設置標題

● 設置副標題

● 設置段落內容

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

操作步驟

STEP|01 啟動Dreamweaver，在歡迎界面中選擇【HTML】選項，創建一個空白頁面，如下圖。

STEP|02 切換到【代碼】頁面中，在<title></title>標簽內輸入網頁標題，同時輸入設置背景顏色的<style>代碼，如下圖。

STEP|03 然后，在<body></body>標簽內，輸入h1標題和h3標題的代碼及標題文本，如下圖。

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

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

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

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

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

2.7 新手訓練營

練習1：制作嵌套列表

downloads\2\新手訓練營\嵌套列表

提示：本練習中，將使用XHTML來制作一個項目列表和編號列表嵌套在一起的嵌套列表，其編號列表嵌套在項目列表中。具體代碼如下所示。

練習2：制作特定表格

downloads\2\新手訓練營\特定表格

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

練習3：制作選擇列表

downloads\6\新手訓練營\選擇列表

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

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

練習4：制作日期選擇器

downloads\6\新手訓練營\日期選擇器

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