2.3.2 HTML文檔

1．HTML文檔的基本結(jié)構(gòu)

HTML文檔即網(wǎng)頁，其代碼的基本結(jié)構(gòu)如下：

從上述結(jié)構(gòu)看出，HTM文檔的首尾分別是＜html＞標(biāo)記和＜/html＞標(biāo)記，它們是HT-ML文檔類型的標(biāo)志，在這對標(biāo)志中有頭部內(nèi)容和主體內(nèi)容兩部分。頭部內(nèi)容是文檔的開頭部分，對文檔進行一些必要的定義；主體內(nèi)容是HTML網(wǎng)頁的主要部分，標(biāo)記了頁面中的元素對象。

2．HTML文檔的基本標(biāo)記

HTML的標(biāo)記都用＜＞號括起，多數(shù)標(biāo)記由標(biāo)記頭（如＜html＞）和標(biāo)記尾（＜/html＞）成對匹配，標(biāo)記尾是在標(biāo)記名前加/組成的，例如：＜html＞…＜/html＞、＜head＞…＜/head＞等。以下是HTML文檔的幾個基本標(biāo)記。

（1）HTML版本信息

HTML版本信息用以標(biāo)明文檔遵守HTML的哪一個版本，常用的文檔版本聲明如下。

1）HTML5。

格式：

＜！DOCTYPEhtml＞

2）HTML4.01Strict。

該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。

格式：

＜！DOCTYPEHTMLPUBLIC＂-//W3C//DTDHTML4.01//EN＂＂http://www.w3.org/TR/ht-ml4/strict.dtd＂＞

3）HTML4.01Transitional。

該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。

格式：

＜！DOCTYPEHTMLPUBLIC＂-//W3C//DTDHTML4.01Transitional//EN＂＂http://www.w3.org/TR/html4/loose.dtd＂＞

4）HTML4.01Frameset。該DTD等同于HTML4.01Transitional，但允許框架集內(nèi)容。

格式：

＜！DOCTYPEHTMLPUBLIC＂-//W3C//DTDHTML4.01Frameset//EN＂＂http://www.w3.org/TR/html4/frameset.dtd＂＞

5）XHTML1.0Strict。

該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標(biāo)記。

格式：

＜！DOCTYPEhtmlPUBLIC＂-//W3C//DTDXHTML1.0Strict//EN＂＂http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd＂＞

6）XHTML1.0Transitional。

該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標(biāo)記。

格式：

＜！DOCTYPEhtmlPUBLIC＂-//W3C//DTDXHTML1.0Transitional.dtd//EN＂＂http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂＞

7）XHTML1.0Frameset。

該DTD等同于XHTML1.0Transitional，但允許框架集內(nèi)容。

格式：

＜！DOCTYPEhtmlPUBLIC＂-//W3C//DTDXHTML1.0Frameset//EN＂＂http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd＂＞

8）XHTML1.1。

該DTD等同于XHTML1.0Strict，但允許添加模型（例如提供對東亞語系的ruby支持）。

格式：

＜！DOCTYPEhtmlPUBLIC＂-//W3C//DTDXHTML1.1//EN＂＂http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd＂＞

DreamweaverCS6創(chuàng)建的HTML文檔最開頭會自動加上以下的HTML版本信息代碼：

＜！DOCTYPEhtmlPUBLIC＂-//W3C//DTDXHTML1.0Transitional.dtd//EN＂

＂http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd＂＞

（2）HTML標(biāo)記

＜html＞…＜/html＞是HTML文檔的標(biāo)志，放在文檔的頭和尾，表明這是一個HTML文檔。

（3）head標(biāo)記

＜head＞…＜/head＞是頭部標(biāo)記，放在文檔的起始部分，其中放置一些用于說明文檔相關(guān)信息的其他標(biāo)記。

（4）meta標(biāo)記

meta是元信息標(biāo)記，放在頭部，用于說明和定義文檔的一些特征信息，例如：

●文檔類型和字符集。

＜metahttp-equiv=＂Content-Type＂content=＂text/html；charset=gb2312＂/＞

●定義關(guān)鍵字。

＜metaname=＂Keywords＂content=＂三峽，旅游＂/＞

●瀏覽器渲染。

頁面使用IE9渲染：＜metahttp-equiv=＂x-ua-compatible＂content=＂ie=9＂/＞

頁面默認使用極速內(nèi)核：＜metaname=＂renderer＂content=＂webkit＂＞

頁面默認使用ie兼容內(nèi)核：＜metaname=＂renderer＂content=＂ie-comp＂＞

頁面默認使用ie標(biāo)準(zhǔn)內(nèi)核：＜metaname=＂renderer＂content=＂ie-stand＂＞

●每隔10秒鐘刷新頁面。

＜metahttp-equiv=＂Refresh＂content=＂10＂/＞

（5）title標(biāo)記

＜title＞…＜/title＞標(biāo)記應(yīng)放在頭部內(nèi)，用于在瀏覽器標(biāo)題欄顯示當(dāng)前頁面的標(biāo)題。

例如：

＜title＞歡迎訪問電子信息學(xué)院網(wǎng)站＜/title＞

（6）body標(biāo)記

＜body＞…＜/body＞為文檔主體標(biāo)記，其中放置各種頁面元素的HTML標(biāo)記，網(wǎng)頁正文中的所有顯示內(nèi)容，如文字、圖像、表格、動畫、視頻等都放置在這對主體標(biāo)記之內(nèi)。

3．HTML的語法規(guī)則

HTML文檔應(yīng)遵循以下語法規(guī)則如下。

1）HTML文檔是文本文件，擴展名為“.html”或“.htm”，保留“.htm”擴展名是為了兼容早期名稱。

2）HTML文檔中有雙標(biāo)記和單標(biāo)記之分。

雙標(biāo)記格式為：＜標(biāo)記名屬性名=＂屬性值＂＞…＜/標(biāo)記名＞

單標(biāo)記格式為：＜標(biāo)記名屬性名=＂屬性值＂/＞

注意：格式中屬性并不是必需的，當(dāng)然也可以同時定義多個屬性，多個屬性間以空格隔開。Web標(biāo)準(zhǔn)建議屬性值應(yīng)用雙引號括起，同時推薦使用樣式表而不是標(biāo)記屬性來控制元素的外觀。

3）HTML標(biāo)記及屬性不區(qū)分字母大小寫，例如，＜HTML＞和＜html＞是等效的，但Web標(biāo)準(zhǔn)建議都使用小寫字母。

4）HTML標(biāo)記可以嵌套，但不能交叉，各層標(biāo)記是全包容關(guān)系。

例如，＜p＞＜fontcolor=＂#0000FF＂＞歡迎進入本網(wǎng)站＜/p＞＜/font＞是錯誤的寫法。

5）HTML文檔一行可以書寫多個HTML標(biāo)記，一個標(biāo)記也可以分多行書寫，不用任何續(xù)行符號，但HTML標(biāo)記中的一個單詞不能分在兩行書寫。

6）在Dreamweaver的代碼視圖中輸入的換行、回車和多個連續(xù)英文空格在瀏覽時都是無效的，瀏覽器顯示網(wǎng)頁時，會自動忽略代碼中輸入的換行、回車、多于一個的連續(xù)英文空格（字串常量除外），所有的相應(yīng)顯示效果都必須用標(biāo)記來控制，如需要在網(wǎng)頁中插入新的段落時，必須使用分段標(biāo)記＜p＞。換行可以使用＜br＞標(biāo)記，需要多個英文空格，可以使用多個“&nbsp；”轉(zhuǎn)義符號。

7）在Dreamweaver的設(shè)計視圖中輸入的換行、回車和多個連續(xù)英文空格等將自動在代碼視圖中生成相應(yīng)的HTML代碼，它們相應(yīng)的HTML代碼分別為＜br/＞、＜P＞、&nbsp；。

8）瀏覽器不能識別的格式寫法通常將被瀏覽器自行解析，不會提示錯誤信息。