篇文章介紹了<!--...--> 注釋標(biāo)簽,我個人感覺很容易理解,在日常編碼中,大多數(shù)編輯器都有注釋標(biāo)簽的快捷鍵,如sublime或VS code里在html代碼里,選中想要注釋掉的代碼后,直接按ctrl+/即可。幾乎不用手動輸入了。還是很方便的。
這篇我寫<!DOCTYPE>標(biāo)簽,說起來這個標(biāo)簽,很常見,因?yàn)樗鼤霈F(xiàn)在每一個httml文檔的最開頭,然而,我們很少去重視它,為什么呢?
說到這個標(biāo)簽,我不得不說起html的版本歷史了。
在大約10年前吧,html5應(yīng)用還不如今天這么廣泛吧,于是當(dāng)時的文檔類型聲明如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
很長,也很難記,由于我入行晚,懂得這玩意就只是一個聲明了,比如strict表示嚴(yán)格模式。其他的我也不想知道了。
當(dāng)然html版本的規(guī)范從4到5的過渡經(jīng)歷了太多年,因?yàn)橐紤]老瀏覽器的兼容性,再加上前期移動設(shè)備配置低,不支持較為復(fù)雜的媒體元素。于是,一些資歷深的前端開發(fā)人員,面對這么長的代碼還是有很長一段時間。
當(dāng)然,9102年都快過完了,我們這邊已經(jīng)不需要再考慮這些了,于是,我直接就用html5了。
然后聲明文檔給格式,就變得很簡單了。
<!DOCTYPE html>
最開始我是使用sublime生成的模板練習(xí)的,然后,犯懶,直接輸入了<html>就出來下面的代碼:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
然后就開始進(jìn)行填充了。
直到今天我才注意到原來<!DOCTYPE html>是單獨(dú)的一行,與下方<html></html>是兩碼事。
所以,我重新看了下書上的強(qiáng)調(diào)內(nèi)容:
關(guān)于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,但允許框架集內(nèi)容。
<!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 來編寫標(biāo)記。
<!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 來編寫標(biāo)記。
<!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,但允許框架集內(nèi)容。
<!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的文檔類型聲明這么麻煩了,但是這里沒什么知識點(diǎn)了,因?yàn)槿缃瘢琱tml5應(yīng)用這么普及了,我們只需在文檔開頭寫<!DOCTYPE html>即可,當(dāng)然html4的嚴(yán)格模式和傳統(tǒng)模式大概知道就行了。
TML教程
超文本標(biāo)記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。
您可以使用 HTML 來建立自己的 WEB 站點(diǎn),HTML 運(yùn)行在瀏覽器上,由瀏覽器來解析。
在本教程中,您將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點(diǎn)。
HTML 很容易學(xué)習(xí)!相信您能很快學(xué)會它!
本教程包含了數(shù)百個 HTML 實(shí)例。
使用本站的編輯器,您可以輕松實(shí)現(xiàn)在線修改 HTML,并查看實(shí)例運(yùn)行結(jié)果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</head>
<body>
<h1>我的第一個標(biāo)題</h1>
<p>我的第一個段落。</p>
</body>
</html>
HTML 文檔的后綴名
.html
.htm
都可以。
實(shí)例:
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標(biāo)題</h1>
<p>這是我的段落</p>
</body>
</html>
實(shí)例解析
什么是HTML?
標(biāo)簽
<標(biāo)簽>內(nèi)容</標(biāo)簽>
html元素
“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴(yán)格來講, 一個 HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽,如下實(shí)例:
HTML 元素:
<p>這是一個段落</p>
web瀏覽器
Web瀏覽器(如谷歌瀏覽器,Internet Explorer,F(xiàn)irefox,Safari)是用于讀取HTML文件,并將其作為網(wǎng)頁顯示。
瀏覽器并不是直接顯示的HTML標(biāo)簽,但可以使用標(biāo)簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶
html網(wǎng)頁結(jié)構(gòu)
<html>
<head>
<title>頁面標(biāo)題</title>
</head>
<body>
<h1>這是一個標(biāo)題</h1>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>
html的版本:
<!DOCTYPE>聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。
網(wǎng)絡(luò)上有很多不同的文件,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。
doctype 聲明是不區(qū)分大小寫的,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
html5
<!DOCTYPE html>
html4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">
xhtml1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文編碼
目前在大部分瀏覽器中,直接輸出中文會出現(xiàn)中文亂碼的情況,這時候我們就需要在頭部將字符聲明為 UTF-8。
果想開發(fā)一個網(wǎng)站,除了要精通后端開發(fā)語言(如:php)外,還要精通HTML代碼。那么,什么是HTML呢?HTML是一種超文本標(biāo)記語言,它包含有眾多的標(biāo)簽,我們可以通過這些標(biāo)簽,把不同的internet資源(如:文字、圖片、視頻、音頻、表單等等)整合在一個統(tǒng)一的文檔中,這就形成了我們可以看得見的網(wǎng)頁。那么,HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>
html5文檔類型聲明:<!doctype html>
html4文檔類型聲明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標(biāo)簽是html最外層的標(biāo)簽,所有其它的HTML標(biāo)簽都要放在這個標(biāo)簽的內(nèi)部。
<html>
<head></head>
<body></body>
</html>
在HTML標(biāo)簽中,有的標(biāo)簽是成雙成對的,如:<html></html>(如下圖);而有的標(biāo)簽是單個的,如:<hr>橫線標(biāo)簽。
head頭部有以下幾種常用標(biāo)簽:
meta:主要提供有關(guān)頁面的元信息。
link:用來定義文檔與外部資源的關(guān)系,最常用的是調(diào)用CSS樣式文件。
title:頁面標(biāo)題的標(biāo)簽。
script:用來調(diào)用JS文件或JS代碼。當(dāng)然,script標(biāo)簽也可以在body主體中使用。
1、塊級標(biāo)簽。
塊級標(biāo)簽的特性是:獨(dú)自占有一行;標(biāo)簽的高與寬、邊距可以修改;沒有設(shè)置寬與高時,默認(rèn)繼承父標(biāo)簽。例如:
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖:
常用的塊級標(biāo)簽有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內(nèi)聯(lián)標(biāo)簽。
內(nèi)聯(lián)標(biāo)簽與塊級標(biāo)簽不同,它不能獨(dú)自占有一行,會與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示;內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的,它里面的文字或圖片有多高,它就是多高。例如如下代碼:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標(biāo)簽的例子是一樣的,而顯示的效果就不一樣了,寬與高、上下邊距沒有效果。如下圖:
常用的內(nèi)聯(lián)標(biāo)簽有:span、a、b、strong、i、em 。
3、內(nèi)聯(lián)塊級標(biāo)簽。
內(nèi)聯(lián)塊級標(biāo)簽,既有一些內(nèi)聯(lián)標(biāo)簽的特性,也有一些塊級標(biāo)簽的特點(diǎn):它不能獨(dú)自占有一行,但是可以修改它的寬度和高度。例如下面這段代碼:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標(biāo)簽的那個例子仍然是一樣的,圖片的寬和高、上下邊距修改成功,而2個圖片不能獨(dú)自占有一行,而是在同一行。如下圖:
常用的內(nèi)聯(lián)塊級標(biāo)簽有:img、input、textarea。
4、區(qū)域標(biāo)簽。
所謂區(qū)域標(biāo)簽,就是主要用來劃分布局頁面區(qū)域的。如:頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是:讓頁面布局更加清晰明了。
常用的區(qū)域標(biāo)簽有:header(頭部)、footer(底部)、nav(導(dǎo)航)、aside(側(cè)邊欄)、section(主體)、article(獨(dú)立內(nèi)容)。
5、表單標(biāo)簽。
這個表單標(biāo)簽我們也是會經(jīng)常用到的,如:登錄網(wǎng)站的時候、提交數(shù)據(jù)的時候。如下圖的評論表單:
?表單常用的標(biāo)簽有:form、input、select、option、textarea 。
以上就是我們開發(fā)網(wǎng)頁時,會常用到的HTML標(biāo)簽。當(dāng)然,HTML標(biāo)簽遠(yuǎn)不止這些,尤其是html5出來后,新增了許多的新標(biāo)簽。但是,有些標(biāo)簽在我們開發(fā)中很少用到,所以,這里就沒有做相應(yīng)的介紹。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。