html頁面結構

tml文檔結構

1. HTML 元素

HTML 文檔由 HTML 元素定義。

HTML 元素語法
HTML 元素以開始標簽起始 HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
大多數 HTML 元素可擁有屬性

2.HTML 屬性

屬性是 HTML 元素提供的附加信息。

HTML 屬性

HTML 元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現，比如：name="value"。

3. 注釋

注釋是一種特殊的標簽，主要是幫助開發者理解代碼的邏輯。不會在網頁中顯示，但是在源代碼以及開發者工具中可以看到。很多編輯器中使用 Ctrl + / 組合鍵可以快速注釋。

4. html結構

html頁面主要由一個html根元素和兩個子head和body子標簽組成。別的更多標簽都在這head和body里面。

<!DOCTYPE html> 聲明為 HTML5 文檔

html：元素是html頁面的根元素，所有html標簽的一個根節點。

head：文檔的頭部，描述了文檔的各種屬性和信息，包括文檔的標題，在web中的位置以及和其他文檔的關系。

meta：使用 <meta> 元素來描述HTML文檔的描述，關鍵詞，作者，字符集等。

title：元素描述了文檔的標題

body：元素包含了可見的頁面內容，文檔的主體，以后我們的頁面內容基本上都是寫到這個標簽里面的（比如文本、超鏈接、圖像、表格和列表）。

<!DOCTYPE html>
<!--html是html文檔的根元素-->
<html >
    <!--head定義文檔標題等屬性，用戶不可見-->
    <head>
        <meta charset="UTF-8">
        <!--title設置網頁的標題-->
        <title>我的第一個網頁</title>
    </head>
    <!--body顯示給用戶的內容-->
    <body>
        Hello world, 我是一個男孩！
    </body>
</html>

閱讀原文

例

簡單的 HTML5 文檔：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

文檔內容......

</body>

</html>

瀏覽器支持

所有主流瀏覽器都支持 <html> 標簽。

標簽定義及使用說明

<html> 標簽告知瀏覽器這是一個 HTML 文檔。

<html> 標簽是 HTML 文檔中最外層的元素。

<html> 標簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標簽）的容器。

HTML 4.01 與 HTML5之間的差異

HTML5 中，增加了一個新屬性：manifest。

HTML 與 XHTML 之間的差異

xmlns 屬性在 XHTML 中是必需的，但在 HTML中不是。

然而，即使 XHTML 文檔中的 <html> 沒有使用 xmlns 屬性，W3C 上的 HTML 驗證器也不會報錯。這是因為 "xmlns=http://www.w3.org/1999/xhtml" 是一個固定值，即使您沒有包含它，此值也會被添加到 <html> 標簽中。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
manifestNew	URL	定義一個 URL，在這個 URL 上描述了文檔的緩存信息。
xmlns	http://www.w3.org/1999/xhtml	HTML 不支持。只有 XHTML 支持。規定 XML 的 namespace 屬性（如果您需要您的內容符合 XHTML，則使用這個屬性。）。

全局屬性

<html> 標簽支持 HTML 的全局屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

篇文章介紹了 注釋標簽，我個人感覺很容易理解，在日常編碼中，大多數編輯器都有注釋標簽的快捷鍵，如sublime或VS code里在html代碼里，選中想要注釋掉的代碼后，直接按ctrl+/即可。幾乎不用手動輸入了。還是很方便的。

這篇我寫<!DOCTYPE>標簽，說起來這個標簽，很常見，因為它會出現在每一個httml文檔的最開頭，然而，我們很少去重視它，為什么呢？

說到這個標簽，我不得不說起html的版本歷史了。

在大約10年前吧，html5應用還不如今天這么廣泛吧，于是當時的文檔類型聲明如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

很長，也很難記，由于我入行晚，懂得這玩意就只是一個聲明了，比如strict表示嚴格模式。其他的我也不想知道了。

當然html版本的規范從4到5的過渡經歷了太多年，因為要考慮老瀏覽器的兼容性，再加上前期移動設備配置低，不支持較為復雜的媒體元素。于是，一些資歷深的前端開發人員，面對這么長的代碼還是有很長一段時間。

當然，9102年都快過完了，我們這邊已經不需要再考慮這些了，于是，我直接就用html5了。

然后聲明文檔給格式，就變得很簡單了。

<!DOCTYPE html>

最開始我是使用sublime生成的模板練習的，然后，犯懶，直接輸入了<html>就出來下面的代碼：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

然后就開始進行填充了。

直到今天我才注意到原來<!DOCTYPE html>是單獨的一行，與下方<html></html>是兩碼事。

所以，我重新看了下書上的強調內容：

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前，沒有結束標簽，對大小寫不敏感。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD(文檔類型定義)，因為 HTML 4.01 基于 SGML（標準通用標記語言)）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
HTML5 不基于 SGML，所以不需要引用 DTD。

關于SGML，參見https://wiki.mbalib.com/wiki/SGML

常用的 DOCTYPE 聲明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最后，雖然上方的html4和xml的文檔類型聲明這么麻煩了，但是這里沒什么知識點了，因為如今，html5應用這么普及了，我們只需在文檔開頭寫<!DOCTYPE html>即可，當然html4的嚴格模式和傳統模式大概知道就行了。

在線咨詢

上一篇：HTML講解-網頁中的文本框
下一篇：CSS3 transition動畫圓角、rgba

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商