HTML 文檔由 HTML 元素定義。
HTML 元素語法
HTML 元素以開始標簽起始 HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容(empty content)
空元素在開始標簽中進行關閉(以開始標簽的結束而結束)
大多數 HTML 元素可擁有屬性
屬性是 HTML 元素提供的附加信息。
HTML 屬性
HTML 元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現,比如:name="value"。
注釋是一種特殊的標簽,主要是幫助開發者理解代碼的邏輯。不會在網頁中顯示,但是在源代碼以及開發者工具中可以看到。很多編輯器中使用 Ctrl + / 組合鍵可以快速注釋。
<!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>
<meta charset="utf-8">
<title>文檔標題</title>
</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>是兩碼事。
所以,我重新看了下書上的強調內容:
關于SGML,參見https://wiki.mbalib.com/wiki/SGML
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的嚴格模式和傳統模式大概知道就行了。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。