(寫在文前的只言片語、意書情殤)長歌破曉穿云過,響徹碧霄振九天.------Jason Zhang
web開發(fā)已現(xiàn)世多年,技術(shù)成熟且學(xué)習(xí)平臺廣泛,筆者針對其中細(xì)節(jié)從本質(zhì)上進(jìn)行解釋.力求透徹.
本篇內(nèi)容如下:
1什么是html?
2到底什么是文檔說明?
1什么是htmlHTML是英語Hyper Text Markup Language超文本標(biāo)記語言的縮寫.我們都知道.png是圖片格式 .mp4是視頻格式 ,類比可知 .html是網(wǎng)頁文件的格式.圖片使用圖片瀏覽器打開顯示,使用圖片編輯軟件進(jìn)行編輯.視頻使用視頻播放器打開顯示,使用視頻編輯軟件進(jìn)行編輯.網(wǎng)頁文件使用各種瀏覽器打開顯示.使用各種軟件對其進(jìn)行編輯.如記事本、sublime、webstrom、Hbulider等等
瀏覽網(wǎng)頁文件的工具->各種瀏覽器
瀏覽工具.jpeg
編輯網(wǎng)頁文件的工具->各種開發(fā)軟件
編輯軟件.jpeg
上述邏輯是:
1使用任一款網(wǎng)頁編輯軟件進(jìn)行編輯一>2將編輯的文件保存文件為.html格式一>3使用各種瀏覽器打開.html文件進(jìn)行瀏覽當(dāng)然,高手以樹葉為劍,大殺四方.所以選擇哪種開發(fā)工具并不重要,關(guān)鍵是掌握核心技術(shù).
網(wǎng)頁邏輯.png
那么,問題來了,純文本文檔如.txt文件和網(wǎng)頁文件有什么區(qū)別?
見下圖分析:純文本文檔沒有語義,如標(biāo)題 段落 區(qū)塊等,所有文本內(nèi)容的語義是沒辦法描述的.所有文字都沒有語義
html的作用.png
為了表示出文本的語義,要使用html來描述文本的意思.如下圖:
html作用2.png
代碼解釋
代碼解釋.png
結(jié)論:
用html這種特殊的文本去描述文本內(nèi)容的語義,這里h是heading標(biāo)題的縮寫,表示該文本的語義是一個標(biāo)題,所以html就是用來描述文本內(nèi)容的語義,其標(biāo)記并不會顯示在網(wǎng)頁中,只是用來描述文本內(nèi)容的語義而已.這也就是超文本標(biāo)記語言的解釋.弄清了這個本質(zhì),接下來就是學(xué)習(xí)記憶各種常用的html標(biāo)記.
2什么是文檔說明?任何標(biāo)準(zhǔn)的HTML頁面,都是如下的結(jié)構(gòu):
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>我是測試用的網(wǎng)頁的標(biāo)題</title></head><body></body></html>
筆者將對上述的代碼片段的第一行進(jìn)行解釋:<! DOCTYPE ......>這行是文檔聲明頭DocTypeDeclaraion此標(biāo)簽可以告訴瀏覽器該網(wǎng)頁文檔是哪種規(guī)范.具體的規(guī)范:HTML4.01是IE6開始兼容的.HTML5是IE9開始兼容的.但是IE6、7、8這些瀏覽器不能立刻淘汰.所以大多數(shù)網(wǎng)頁還是使用HTML4.01規(guī)范.規(guī)范(DTD)分為兩大類:HTML和XHTML(X代表'嚴(yán)謹(jǐn)'),每大類規(guī)范又有三小類規(guī)范:Strict、Transitional、Frameset.不同的規(guī)范代表html標(biāo)記不同的寫法和注意.常用的6種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，但允許框架集內(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">
上述不同規(guī)范下的標(biāo)準(zhǔn)的html界面的的Emmet語法:html:4t (HTML 4.01 Transitional)html:4s (HTML 4.01)html:xt (XHTML 1.0)html:xs (XHTML 1.0 Strict)html:xxs (XHTML 1.1)html:5 (HTML5)比如:在支持Emmet語法的開發(fā)工具中敲:html:4s + tab鍵會自動生成如下代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title></head></html>
總結(jié):本篇旨在解釋學(xué)習(xí)html中的一些細(xì)節(jié)注意.下篇將繼續(xù)從本質(zhì)上解釋"字符集、關(guān)鍵字"等內(nèi)容.希望多多支持,互相交流.
