ICE2PCS02G

書名： HTML5+CSS3+JavaScript從入門到精通（微課精編版）
作者名：前端科技
本章字數： 1305字
更新時間： 2019-08-15 16:37:43

1.2　HTML文檔結構

HTML是構成網頁文檔的主要語言，使用HTML語言創建的文檔為文本文件，可以使用任意文本編輯器進行編輯，文件擴展名為.html或.htm。

1.2.1　HTML4基本結構

視頻講解

HTML文檔一般都應包含兩部分：頭部區域和主體區域。HTML文檔基本結構由3個標簽負責組織：<html>、<head>和<body>。其中<html>標簽標識HTML文檔，<head>標簽標識頭部區域，而<body>標簽標識主體區域。

【示例】一個完整的HTML4文檔基本結構如下。

可以看到，每個標簽都是成對組成，第一個標簽（如<html>）表示標識的開始位置，而第二個標簽（如</html>）表示標識的結束位置。<html>標簽包含<head>和<body>標簽，而<head>和<body>標簽是并列排列。

如果把上面字符代碼放置在文本文件中，然后另存為“test.html”，就可以在瀏覽器中瀏覽了。當然，由于這個簡單的HTML文檔還沒有包含任何信息，所以在瀏覽器中是看不到任何顯示內容的。

　提示：網頁就是一個文本文件，文件擴展名一般為.html或.htm，俗稱為靜態網頁，可以直接在瀏覽器中預覽；也可以是.asp、.aspx、.php或.jsp等，俗稱為動態網頁，需要服務器解析之后，瀏覽器才能夠預覽。

1.2.2　XHTML基本結構

視頻講解

XHTML是The Extensible HyperText Markup Language的縮寫，中文翻譯為可擴展標識語言，實際上它是HTML4的升級版本。XHTML和HTML4在語法和標簽使用方面差別不大。熟悉HTML語言，再稍加熟悉標準結構和規范，也就熟悉了XHTML語言。XHTML具有如下特點：

　用戶可以擴展元素，從而擴展功能，但在目前1.1版本下，用戶只能夠使用固定的預定義元素，這些元素基本上與HTML4版本元素相同，但刪除了部分屬性描述性的元素。

　能夠與HTML很好地溝通，可以兼容當前不同的網頁瀏覽器，實現XHTML頁面的正確瀏覽。

【示例】完整的XHTML文檔結構如下所示。

    <!--[XHTML文檔基本框架]-->
    <!--定義XHTML文檔類型-->
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
    <!--XHTML文檔根元素，其中xmlns屬性聲明文檔命名空間-->
    <html>
    <!--頭部信息結構元素-->
    <head>
    <!--設置文檔字符編碼-->
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <!--設置文檔標題-->
    <title>無標題文檔</title>
    </head>
    <!--主體內容結構元素-->
    <body>
</body>
</html>

XHTML代碼不排斥HTML規則，在結構上也基本相似，但如果仔細比較，它有兩點不同。

1．定義文檔類型

在XHTML文檔第一行新增了<!DOCTYPE>元素，該元素用來定義文檔類型。DOCTYPE是document type（文檔類型）的簡寫，它設置XHTML文檔的版本。使用時應注意該元素的名稱和屬性必須大寫。

DTD（如xhtml1-transitional.dtd）表示文檔類型定義，里面包含了文檔的規則，網頁瀏覽器會根據預定義的DTD來解析頁面元素，并把這些元素所組織的頁面顯示出來。要建立符合網頁標準的文檔，DOCTYPE聲明是必不可少的關鍵組成部分，除非你的XHTML確定了一個正確的DOCTYPE，否則頁面內的元素和CSS不能正確生效。

2．聲明命名空間

在XHTML文檔根元素中必須使用xmlns屬性聲明文檔的命名空間。xmlns是XHTML NameSpace的縮寫，中文翻譯為命名空間（也有人翻譯為名字空間、名稱空間）。命名空間是收集元素類型和屬性名字的一個詳細DTD，它允許通過一個URL地址指向來識別命名空間。

XHTML是HTML向XML過渡的標識語言，它需要符合XML規則，因此也需要定義名字空間。但是XHTML 1.0還不允許用戶自定義元素，因此它的命名空間都相同，就是“http://www.w3.org/1999/xhtml”。這也是每個XHTML文檔的xmlns值都相同的緣故。

1.2.3　HTML5基本結構

視頻講解

HTML5文檔允許省略<html>、<head>、<body>等元素，使用HTML5的DOCTYPE聲明文檔類型，簡化<meta>元素的charset屬性值，省略<p>元素的結束標記、使用<元素／>的方式來結束<meta>元素，以及<br>元素等語法知識要點。

【示例】一個簡單的HTML5文檔基本結構如下。

    <!DOCTYPE html>
    <meta charset="UTF-8">
    <title>HTML5基本語法</title>
    <h1>HTML5的目標</h1>
    <p>HTML 5的目標是為了能夠創建更簡單的Web程序，書寫出更簡潔的HTML代碼。
    <br/>例如，為了使Web應用程序的開發變得更容易，提供了很多API；為了使HTML變得更簡潔，開發出
了新的屬性、新的元素等。總體來說，為下一代Web平臺提供了許許多多新的功能。

這段代碼在IE瀏覽器中的運行結果如圖1.4所示。

圖1.4　編寫HTML5文檔

官术网_书友最值得收藏!

HTML5+CSS3+JavaScript從入門到精通（微課精編版）

1.2 HTML文檔結構

1.2.1 HTML4基本結構

1.2.2 XHTML基本結構

1.2.3 HTML5基本結構

1.2　HTML文檔結構

1.2.1　HTML4基本結構

1.2.2　XHTML基本結構

1.2.3　HTML5基本結構