摘要：可見對一個頁面正確渲染很重要。和標簽對用于標識頁面的頭部區域，和之間的內容都屬于頭部區域中的內容。是一個輔助性標簽，對頁面可以進行很多方面的特性的設置。當頁面沒有設置字符集時，瀏覽器會使用默認的字符編碼顯示。

往期回顧

在 1.2 節介紹 HTML 語言時講到：
HTML 是一種“超文本標記語言”
它由許多 HTML 標簽組成
注意：HTML 標簽也稱為元素

HTML 頁面

一個頁面的創建離不開 HTML 語言，每個頁面都是從搭建結構開始的，盡管頁面變得越來越復雜，但是其底層結構依然會比較簡單。本節將通過示例 1-1 所示的簡單 HTML 頁面來詳細講解 HTML 頁面的基本結構。

【示例 1-1】HTML 頁面基本結構

上述代碼體現了 HTML 頁面的基本結構，每個頁面都是由示例 1-1 所示的結構開始構建的。

根據功能的不同，整個 HTML 頁面在結構上可以分成兩層：

一層是外層，由 和 標簽對來標識；

一層是內層，用于實現 HTML 頁面的各項功能；

根據實現功能的不同，又可以將內層細分為兩個區域：即頭部區域和主體區域

頭部區域由 和 標簽對標識；

要在瀏覽器窗口顯示的內容需要放在主體區域；

主體區域的標識標簽是 和

打開任意一款編輯器，新建一個 HTML 頁面，書寫以上的 HTML 結構代碼之后，以后綴名”.html”保存。然后用 Chorme 瀏覽器打開該頁面，會發現頁面上一片空白，沒有任何內容。這是因為我們還沒有在代碼的 標簽中添加內容。

在添加內容之前先介紹一下結構中所用到的各個標簽的作用。

基本標記標簽
一 文檔類型聲明

下面分別講解示例 1-1 中每一行代碼的含義及使用方法。

DOCTYPE 是 Document Type 的簡寫，用來告訴瀏覽器使用什么樣的 HTML 或 XHTML 規范來解析網

頁。解析規范由 DOCTYPE 定義的 DTD（文檔類型定義）來指定，DTD 規定了使用通用標簽語言的網頁語法。

需要注意的是：在 HTML 文檔中，DOCTYPE 應該位于頁面的第一行。在 HTML5 以前，必須指定 DTD，例如下例代碼是 XTHML 的過渡類型的文檔聲明：

在 HTML5 中，遵循“存在即合理”的原則，對規則的要求比較寬松，沒有指定 HTML 標簽必須遵循的 DTD，因而簡寫成以下形式：

DOCTYPE 是不區分大小寫的，所以也可以寫成 ：

目前，瀏覽器對頁面的渲染有兩種模式：

怪異模式（瀏覽器使用自己的模式解析渲染頁面）

標準模式（瀏覽器使用 W3C 官方標準解析渲染頁面）

不同的渲染模式會影響到瀏覽器對 CSS 代碼甚至 JavaScript 腳本的解析。

如果使用 DOCTYPE，瀏覽器將按標準模式解析渲染頁面，否則將按怪異模式解析渲染頁面。

使用怪異模式對運行在 IE 低版本瀏覽器下的頁面影響很大。可見 DOCTYPE 對一個頁面正確渲染很重要。

二 開始文檔實際 HTML 部分

標簽是 HTML 頁面中所有標簽的頂層標簽，頁面中的所有標簽必須放在 標簽對之間

三 設置網頁文檔頭部信息

通常跟在 后面。

 和  標簽對用于標識 HTML 頁面的頭部區域， 和 之間的內容都屬于頭部區域中的內容。

這個區域主要用來設置一些與網頁相關的信息，如網頁標題、字符集、網頁描述的信息等，設置的信息內容一般不會顯示在瀏覽器窗口中。

四 網頁文檔的標題

示例代碼如下：

知識點拓展：什么是搜索引擎？

搜索引擎（Search Engine，SE）

是指根據一定的策略，運用特定的計算機程序從互聯網上搜集信息，在對信息進行組織和處理后，為用戶提供檢索服務，將用戶檢索相關的信息展示給用戶的系統。

通俗解釋：

常用的百度搜索就是一種搜索引擎，它通過一些關鍵字迅速地找到用戶需要的資料。在搜索引擎中，用戶搜索的就是標題，所以一個切合內容的標題是至關重要的。

為了界面的統一性，全文中的示例運行結果截圖統一套用了妙味官方的網址：

www.miaov.com

各位讀者在各自的電腦中進行這些示例文件時，在 Chrome 瀏覽器的地址欄中看到的 URL 將會是這樣的格式：

file:/// 文件保存路徑 /html 文件名

如將 html 文件 ex1-1.html 保存在 d:Weblesson1 路徑中；則訪問 ex1-1.html 時瀏覽器中顯示的 URL 將是：
file:///D:/Web/lesson1/ex1-1.html

五 定義文檔元數據

標簽位于文檔的頭部，不包含任何文字內容。 用來定義文檔的元數據，使用 “名稱 = 值”的形式來表示。

一般使用它來描述當前頁面的特性，比如：文檔字符集、關鍵字、網頁描述信息、作者等內容。

是一個輔助性標簽，對 HTML 頁面可以進行很多方面的特性的設置。下面，主要介紹如何使用 來設置頁面字符集、關鍵字和描述信息。

①使用 設置頁面字符集

標簽可以設置頁面內容所使用的字符編碼，瀏覽器會據此來調用相應的字符編碼顯示頁面內容和標題。當頁面沒有設置字符集時，瀏覽器會使用默認的字符編碼顯示。

簡體中文操作系統下，IE 瀏覽器的默認字符編碼是 GB2312，Chrome 瀏覽器默認字符編碼是 GBK。所以當頁面字符集設置不正確或沒有設置時，文檔的編碼和頁面內容的編碼有可能不一致，此時將導致頁面內容和標題顯示亂碼。

在 HTML 頁面中，常用的字符編碼是“utf-8” “utf-8”又叫“萬國碼”
它涵蓋了地球上幾乎所有地區的文字。我們也可以把它看成是一個世界語言的“翻譯官”。有了“utf-8”，你可以在 HTML
頁面上寫中文、英文、韓文等語言的內容。默認情況下，HTML
文檔的編碼也是“utf-8”。這就使文檔編碼和頁面內容的編碼保持了一致，這樣的頁面在世界上幾乎所有地區都能正常顯示。

標簽設置字符集有兩種格式，一種是 HTML5 版本的格式，一種是 HTML5 以下版本的格式，基本語法如下。

HTML4/XHTML 設置格式：

HTML5 對字符集的設置作了簡化，格式如下：

使用 設置頁面字符集的示例如下
【示例 1-2】HTML 頁面字符集設置

      妙味課堂－ www.miaov.com

上述代碼在 HTML 頁面的頭部區域使用 設置頁面的字符編碼為“utf-8”，在 Chrome 瀏覽器中運行的結果如圖 1-23 所示。

將示例 1-2 中的 標簽去掉后，再在 Chrome 瀏覽器中運行，結果如圖 1-24 所示。

對比圖 1-23 和圖 1-24，可見頁面字符集設置的重要性。

②使用 設置關鍵字

關鍵字是為了便于搜索引擎搜索而設置的，用戶在網頁中是看不到關鍵字的。

它的作用主要體現在搜索引擎優化。對于 SEO 優化而言，關鍵字起到畫龍點睛的作用。

為提高網頁在搜索引擎中被搜索到的概率，可以設定多個與網頁主題相關的關鍵字。需注意的是，雖然設定多個關鍵字可提高被搜索到的幾率，但目前大多數的搜索引擎在檢索時都會限制關鍵字的數量，一般 10 個以內關鍵字比較合理，關鍵字多了會分散關鍵字優化，反倒影響排名。

關鍵字設置語法如下：

語法說明：關鍵字之間可以使用逗號，也可以使用空格等符號。示例代碼如下：

③使用 設置網頁描述信息

網頁的描述信息主要用于概述性地描述頁面的主要內容，是對關鍵詞的補充性描述，當描述信息包含部分關鍵字時，會作為搜索結果返回給用戶。

像關鍵字一樣，搜索引擎對描述信息的字數也有限制，一般允許 70~100 字，所以描述信息的內容應盡量簡明扼要。

描述信息設置語法如下：

示例代碼如下：

從 ……

上述代碼中的標題中帶有了關鍵字“妙味課堂”，所以當用戶在百度搜索框中輸入“妙味課堂”時會搜索到妙味課堂頁面，同時在返回的搜索結果中，會以“首頁－妙味課堂 www.miaov.com”作為搜索結果的標題，而返回的搜索結果描述信息則是上述代碼中設置的網頁描述信息，如圖 1-25 所示。

圖 1-25 是使用關鍵詞搜索信息，同樣可以搜索到圖 1-26 的結果，但排名沒有使用標題中的關鍵字進行搜索時靠前。

六 頁面主體內容

body（身體，主體）代表了頁面的主體部分，它是放置頁面內容的地方，所有需要在瀏覽器窗口中顯示的內容都需要放置在 標簽對之間。用戶可以通過瀏覽器看到寫在 標簽中的內容。

【示例 1-4】 標簽的使用

     吼吼，好厲害，這是我們第一個 HTML 頁面

當打開瀏覽器運行上述代碼時就會發現，瀏覽器上會顯示書寫的文本，如圖 1-27 所示。

以上就是 HTML 基本結構中標簽的含義及使用介紹，通過觀察這些基本的標簽，可以總結出標簽的一些特點，如下所述。

① 標簽是由尖括號包圍的關鍵詞，比如 。
② 標簽通常是成對出現的（稱為雙標簽），有開始標簽和結束標簽。開始標簽使用 < 標簽名 > 表示，結束標簽使用 表示，比如 。
③ 也有多帶帶呈現的標簽（稱為單標簽），比如 。
④ 在開始標簽中可以包含若干個屬性。每個屬性使用：屬性名 =“屬性值”的格式進行設置，結束標簽不包含任何屬性。HTML 屬性表示標簽所具有的一些特性。比如標簽的形狀、顏色、用途等特性。比如 標簽中的 charset="utf-8" “charset”就是標簽的一個屬性，而“utf-8 ”則是它的值。
⑤ 如果是雙標簽的話，內容出現在兩個標簽之間，比如 內容 。
⑥ 如果是單標簽的話，內容在標簽屬性中賦值，比如后面將學到的 img 圖片標簽，圖片地址就出現在 src 屬性中：。
⑦ 標簽不區分大小寫，但是為了建立一個良好的編碼習慣，標簽請使用小寫。

根據上面總結的標簽特點，可得到如下所示的標簽設置格式：

雙標簽：< 標簽名稱 屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …> …
單標簽：< 標簽名稱 屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …/>

標簽嵌套關系

在 HTML 結構中，標簽與標簽之間只存在兩種關系：嵌套關系和并列關系。

01嵌套關系

嵌套關系又稱為包含關系，可以通俗記憶為“父子級關系”。

在 1.4.1 小節中，我們發現 標簽和