HTML文檔的結構

于剛剛接觸到超文本的朋友來說，最大的障礙就是用“<”和“>”闊起來的句子，我們稱之為標簽。大多數標簽都有自己的屬性，屬性要寫在首標簽中，屬性用來進一步改變現實的效果。各屬性之間為先后次序，屬性是可選的。屬性也可以省略而使用默認值。格式是這樣的<標簽名屬性1=屬性值 1 屬性2=屬性值 2 ......>。注意：標簽和屬性不區分大小寫。

html文檔結構由三個部分組成。

1.頭部

2.標題

3.元標簽

<1>大家都學過英語，一定知道頭的英語單詞是“head”。沒錯，在html中，我們也使用head來表示文檔的頭部，即<head>...</head>。頭部位于<html>和</html>之間。

例如：<html>

<head>

</head>

</html>

<2>標題用英語怎么說呢？title，其實網頁與人一樣，網頁的眼睛也在頭上，在<title>標簽對內部放入你想要看到的文字，這樣我們就能隨意操縱標題欄的內容了。比如：

<html>

<head>

</head>

</html>

<3>在<head> 標簽的內部還可以嵌套另一個重要的標簽：<meta>這個標簽，此標簽用于描述html頁面文檔的屬性，如作者、日期和時間、網頁描述、關鍵字、頁面刷新等。例如：

TML 是什么？

表示超文本標記語言（Hyper Text Markup Language）
描述了網頁的結構
由一些列元素組成
元素告訴瀏覽器如何顯示內容，由標簽表示
標簽標記了“標題”，“段落”，“表”等內容
瀏覽器不顯示HTMl標記，而是使用它們來呈現頁面內容

基本結構

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>無標題文檔</title>
 </head>
 <body>
 // 頁面源代碼內容
 </body>
</html>

<!DOCTYPE html>，文檔聲明，位于文檔最前面位置。
<html>元素是一個HTML頁面的根元素
<head>，元素包含關于文檔的元信息
<meta>，定義文檔元數據，常用來描述當前頁面的特性，比如文檔字符集 charset="utf-8"
<title>，元素指定該文檔的標題
<body>，元素包含可見頁面的所有內容

動手小練習：

1.試著默寫HTML基本結構

TML文檔結構

HTML文檔，也被稱為網頁，包括頭部和主體兩大部分。頭部主要描述瀏覽器和搜索引擎所需要的信息，瀏覽器不會將這些信息呈現給訪問者；主體是文檔的正文，是網頁中真正要傳達的信息，這些信息將在瀏覽器窗口的正文部分呈現給訪問者。

HTML文檔總是以 <html> 標簽開始，以 </html> 標簽結束，在 <head>...</head> 標簽之間的內容是頭部信息，<body>...</body> 標簽之間的內容是主體部分，即文檔的正文。此外，還要在文檔的最開頭，通過 <!DOCTYPE> 聲明這是一個HTML文檔。如圖 1?16 所示：

html文檔結構圖1-16 html文檔結構

上圖告訴我們，一個HTML文檔由4個基本部分組成：

① 一個文檔聲明：<!DOCTYPE html>

② 一個html標簽對：<html></html>

③ 一個head標簽對：<head></head>

④ 一個body標簽對：<body></body>

<!DOCTYPE>

<!DOCTYPE> 聲明必須是HTML文檔的第一行，位于 <html> 標簽之前。該聲明不是HTML標簽，它是告訴瀏覽器該HTML文檔的DTD類型（Document Type Definition，文檔類型定義）。

在HTML5之前，有多種DTD類型，分別為Transitional類型、Strict類型、Frameset類型，而不同類型對文檔標簽嚴格程度的要求不同，并且<!DOCTYPE>的寫法非常復雜，估計也沒有人能夠完全記住這些寫法，這給開發帶來了混亂。

到HTML5之后，一切化繁為簡，只需聲明<!DOCTYPE html>即可，它就告訴瀏覽器，該文檔是一個HTML5文檔。

在線咨詢

上一篇：CSS+HTML ul li列表原點如何相連？
下一篇：好程序員web前端培訓分享HTML元素強制不換行