IT兄弟連 HTML5教程 HTML文件的主體結構
- 2019 年 10 月 11 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/ITXDL123/article/details/101437097
每個頁面都是一個獨立的HTML文檔，每個HTML文檔的主體結構又都是相同的，而且在一個文檔中這樣的主體結構只能聲明一次。可以簡單的將HTML文檔主體結構分為兩部分，一部分是定義文檔類型，HTML5中聲明文檔類型可比以前的版本簡單多了，只需要15個字元就可以搞定。另一部分則是定義文檔主體的結構框架標籤，因為標籤並不是任意排放的，需要有一定的嵌套規則。就像一顆樹是從樹根到樹榦、樹枝、樹葉這樣的結構生長，而不能在樹葉上長出樹根來，HTML文檔的結構也是如此，整個文檔是一個整體，最外層標籤只有一個，第二層標籤有兩個，是這樣固定的結構，第三層以後可以任意嵌套，就像一顆倒立的樹形結構。如圖所示：
圖 HTML文檔的樹狀結構
在一個HTML文檔中，不僅可以通過根節點去尋找到每個子層節點元素，只要是從任意一個元素節點出發，都可以通過節點關係找到其它元素。
HTML文檔類型的新定義方式
在編寫HTML5文檔時，要求指定文檔類型，以確保瀏覽器能在HTML5的標準模式下進行渲染。在HTML5中刻意不使用版本聲明，一份文檔將會適用於所有版本的HTML，非常簡便，聲明方法如下：
<!DOCTYPE html> <!– 聲明沒有結束標籤，對大小寫不敏感 –>
聲明必須是HTML文檔的第一行，位於 <html> 標籤之前。另外聲明不是HTML標籤，它是指示Web瀏覽器關於頁面使用哪個HTML版本進行編寫的指令。在HTML 4.01中，<!DOCTYPE> 聲明引用DTD，因為HTML 4.01基於SGML，DTD規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。HTML5不基於SGML，所以不需要引用DTD。另外在HTML5中只有這一種，在HTML 4.01中有三種 <!DOCTYPE> 聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <!– 第一種：HTML 4.01 Strict –>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <!– 第二種HTML 4.01 Transitional –>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> <!– 第三種HTML 4.01 Frameset –>
以前的版本中不光有上面幾個，基於XHTML不同版本還有好多種，所以在HTML5時代，你不需要使用上面這個既麻煩又難記的文檔類型了，就用新的HTML5文檔類型吧，簡單明了，這就是HTML5的進步。
提示
請始終向HTML文檔添加 <!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類型。
HTML文檔的主體標籤
一個HTML文檔的基本格式需要包含以下幾個全局架構元素標籤，並將HTML程式碼分為三部分編寫，它們可以被看作文檔的框架。如下所示：
本例在網頁文件中聲明的這幾對標籤，在每個網頁文檔中都是唯一的，head標籤和body標籤需要嵌套在HTML標籤中。
Ø 第一部分：<html>和</html>是網頁文件的最外層標籤，HTML文件中所有的內容都應該在這兩個標記之間。<html>標籤告訴瀏覽器這個HTML文件的開始點，</html>標籤告訴瀏覽器這是HTML文件的結束點。
Ø 第二部分：位於<head>和</head>標籤之間的文本是頭資訊，放在<html>元素的最上面使用，頭資訊不會顯示在瀏覽器窗口中。主要包括當前頁面的一些基本描述的語句，用於說明文件的標題和整個文件的一些公共屬性，例如聲明網頁的標題和關鍵字等。每個<head>元素應當包含一個<title>元素以指示文檔的標題，它也可以以任意順序包含<base>、<object>、<link>、<style>、<script>、<meta>元素的任意組合。
Ø 第三部分：<body>標籤是HTML文件的主體標記，標籤之間的文本是正文內容，是用戶能夠在瀏覽器主窗口中看到的。例如，文字、圖片、鏈接、表單等都需要聲明在這個標記中。該元素出現在<head>元素之後。
當然，在HTML5新的標準規範中，這些主體標籤是可以省略的，瀏覽器會包容這一點而不會出錯，這也是HTML5使用靈活的地方。但筆者認為在編寫HTML5程式碼時，沒有必要省略它們，保持HTML文檔結構完整性，會讓可讀性更好。
