HTML, XML, XHTML 有什么區(qū)別
先說(shuō)一下三者的定義沿癞。?
HTML:HyperText Markup Language / 超文本標(biāo)記語(yǔ)言
XML: Extensible Markup Language / 可擴(kuò)展標(biāo)記語(yǔ)言
XHTML: Extensible Hypertext Markup Language / 可擴(kuò)展超文本標(biāo)記語(yǔ)
HTML
作為一個(gè)前端,最熟悉是就是 HTML 了,所以我們先從 HTML 說(shuō)起。
HTML 是用來(lái)描述和定義網(wǎng)頁(yè)內(nèi)容的標(biāo)記語(yǔ)言姑宽,是構(gòu)成網(wǎng)頁(yè)的最基本的東西土思。
所謂超文本,就是說(shuō)它除了能標(biāo)記文本涮坐,還能標(biāo)記其他的內(nèi)容,比如:圖片誓军,鏈接袱讹,音頻,視頻等昵时。
XML
它的表現(xiàn)形式就是給一個(gè)文檔加一堆標(biāo)簽捷雕,說(shuō)明每段文字是干什么的,有什么意義壹甥。這樣做的目的是方便存儲(chǔ)救巷、傳輸、分享數(shù)據(jù)盹廷,人和機(jī)器都可以很方便的閱讀征绸。XML 和 HTML 有一個(gè)明顯的區(qū)別就是:HTML 的標(biāo)簽都是預(yù)定義的,你不可以自己隨便增加俄占,比如你不能自造一個(gè)標(biāo)簽, 但是 XML 可以管怠,你可以自己“發(fā)明”標(biāo)簽————這也是“可擴(kuò)展的”一個(gè)含義。
XHTML
HTML 和 XML 一結(jié)合缸榄,就產(chǎn)生了 XHTML
XHTML 就是以 XML 的語(yǔ)法形式來(lái)寫 HTML.
XHTML 出現(xiàn)的原因是:HTML 是一種語(yǔ)法形式比較松散的標(biāo)記語(yǔ)言渤弛,語(yǔ)法要求也不嚴(yán)格。比如大小可以混用甚带,屬性值隨便你加不加引號(hào)她肯,單引號(hào)還是雙引號(hào)也隨便你佳头,標(biāo)簽也可以不閉合。HTML 標(biāo)準(zhǔn)的制定者 W3C 一看這樣下去不行晴氨,所謂無(wú)規(guī)矩不成方圓康嘉,所以就把 XML 的語(yǔ)法形式往 HTML 上一套,出現(xiàn)了 XHTML籽前,所以你也可以把 XHTML 理解為 HTML 的嚴(yán)格語(yǔ)法形式亭珍,除此之外,其它方面基本一樣枝哄。
比如 XHTML 有一些強(qiáng)制的要求肄梨,如下:
必須包含一個(gè)文件頭聲明
所有元素名必須小寫
所有空元素必須關(guān)閉
所有屬性名必須小寫
所有屬性值必須加引號(hào)
所有布爾值屬性必須加上屬性值
HTML語(yǔ)義化是什么?
語(yǔ)義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語(yǔ)義化)挠锥,選擇合適的標(biāo)簽(代碼語(yǔ)義化)众羡,便于開(kāi)發(fā)者閱讀和寫出更優(yōu)秀的代碼的同時(shí),讓瀏覽器的爬蟲和機(jī)器很好的解析蓖租。
語(yǔ)義化的目的就是盡量減少使用無(wú)語(yǔ)義的div和span粱侣,用其他語(yǔ)義化的標(biāo)簽來(lái)代替,以方便機(jī)器和人的閱讀菜秦、理解甜害。
為什么要語(yǔ)義化?
在沒(méi)有 CSS 的情況下球昨,頁(yè)面也能呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)眨攘,祼奔時(shí)好看
用戶體驗(yàn):例如title主慰、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用
有利于SEO:和搜索引擎建立良好溝通鲫售,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重
方便其他設(shè)備解析(如屏幕閱讀器共螺、盲人閱讀器、移動(dòng)設(shè)備)情竹,以有意義的方式來(lái)渲染網(wǎng)頁(yè)
便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)藐不。語(yǔ)義化更具可讀性,遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)秦效,可以減少差異化
怎樣理解內(nèi)容與樣式分離的原則
1)網(wǎng)頁(yè)分離
一個(gè)網(wǎng)頁(yè)分為三個(gè)部分:Html——結(jié)構(gòu)雏蛮,css——表現(xiàn),javascrip——行為阱州。內(nèi)容也就是html挑秉,樣式也就是css。所以內(nèi)容和樣式的分離苔货,就是指在網(wǎng)頁(yè)編碼的過(guò)程中犀概,要將html和css兩大部分分開(kāi)立哑。
2)如何實(shí)現(xiàn)
內(nèi)容與樣式分離的原則的實(shí)現(xiàn),一個(gè)是要依靠意識(shí)姻灶,另一個(gè)是依靠經(jīng)驗(yàn)铛绰。
舉例而言,面對(duì)一個(gè)分塊明顯的網(wǎng)頁(yè)設(shè)計(jì)圖時(shí):
初級(jí)的開(kāi)發(fā)人員思路及制作方法:div 層層嵌套产喉;
中級(jí)的開(kāi)發(fā)人員思路及制造方法:去掉多余的 div ,進(jìn)行簡(jiǎn)化至耻;
高級(jí)的開(kāi)發(fā)人員思路及制造方法:最大化的簡(jiǎn)化 html 的結(jié)構(gòu),然后用 css 進(jìn)行設(shè)置镊叁,減少 html 與 css 的契合度尘颓。
正確做法是寫HTML的時(shí)候先不管樣式,重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上晦譬,讓HTML能提現(xiàn)頁(yè)面結(jié)構(gòu)或者內(nèi)容,疤苹,然后進(jìn)行 css 樣式設(shè)置,減少 HTML 與 CSS 契合度(即內(nèi)容與樣式分離) 敛腌,寫JS的時(shí)候卧土,盡量不要用JS去直接操作樣式,而是通過(guò)給元素添加刪除class來(lái)控制樣式變化(即行為分離)像樊。
3)分離原則的優(yōu)點(diǎn)
瀏覽器加載網(wǎng)頁(yè)頁(yè)面速度變快尤莺。分離原則下,大部分頁(yè)面代碼寫在了CSS當(dāng)中生棍,頁(yè)面體積容量變得更小颤霎。
網(wǎng)頁(yè)修改設(shè)計(jì)時(shí),效率涂滴、省時(shí)友酱。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記,到CSS里找到相應(yīng)的ID或class柔纵,可以快速替換指定位置的樣式缔杉,不會(huì)破壞頁(yè)面架構(gòu)和其他部分的樣式。
典型的應(yīng)用就是網(wǎng)頁(yè)換膚搁料,使用相同的 html 結(jié)構(gòu)或详,不同的 css 樣式。
更好地被搜索引擎收錄郭计“郧伲基于內(nèi)容與樣式分離的原則,html的語(yǔ)義化就是首要考慮的,網(wǎng)頁(yè)中語(yǔ)義化的標(biāo)簽代碼就會(huì)更加適合搜索引擎拣宏。
css樣式的分離沈贝,它可以根據(jù)不同的瀏覽器,達(dá)到顯示效果的統(tǒng)一勋乾。保證網(wǎng)頁(yè)架構(gòu)不變形的前提下宋下,放心在不同瀏覽器渲染顯示樣式嗡善。
meta標(biāo)簽
標(biāo)簽永遠(yuǎn)位于 head 元素內(nèi)部;標(biāo)簽有兩個(gè)屬性name和http-equiv学歧。
主要屬性就是Keywords和descripion
name屬性
1罩引、name=”viewport”
說(shuō)明:在移動(dòng)設(shè)備瀏覽器上,通過(guò)為視口(viewport)設(shè)置 meta 屬性為 user-scalable=no 可以禁用其縮放(zooming)功能枝笨。這樣禁用縮放功能后袁铐,用戶只能滾動(dòng)屏幕,就能讓你的網(wǎng)站看上去更像原生應(yīng)用的感覺(jué)横浑。注意剔桨,這種方式我們并不推薦所有網(wǎng)站使用,還是要看你自己的情況而定徙融!
用法:<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
2洒缀、name=”description”
說(shuō)明:這里是網(wǎng)頁(yè)的描述,是給搜索引擎看的欺冀,搜索引擎根據(jù)這個(gè)描述進(jìn)行收錄排名树绩,一般是網(wǎng)頁(yè)內(nèi)的關(guān)鍵字。
用法:<meta name=”description” content=””>
3隐轩、name=”keywords”
說(shuō)明:keywords用來(lái)告訴搜索引擎你網(wǎng)頁(yè)的關(guān)鍵字是什么饺饭,換句話說(shuō)就是你的網(wǎng)站主題,從一定意義上來(lái)說(shuō)keywords與description其實(shí)它們的作用是一樣的(突出網(wǎng)站主題)职车,但他們又有所不同(在搜索結(jié)果頁(yè)的展示)瘫俊。
用法:<meta name=”keywords” content=””>
4、name=”author”
說(shuō)明:標(biāo)注網(wǎng)站作者是誰(shuí)
用法:<meta name=”author” content=”ez”>
5提鸟、name=”copyright”
說(shuō)明:標(biāo)注網(wǎng)站的版權(quán)信息
用法:<meta name="copyright" content="ez">
6军援、 name=”robots”
說(shuō)明:robots用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引,哪些頁(yè)面不需要索引称勋。content的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all涯竟。
用法:<meta name="robots" content="all">
http-equiv屬性
http-equiv相當(dāng)于http的文件頭作用赡鲜,它可以向?yàn)g覽器傳回一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容庐船,與之對(duì)應(yīng)的屬性值為content银酬,content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
meta標(biāo)簽的http-equiv屬性語(yǔ)法格式是:<meta http-equiv=”參數(shù)” content=”參數(shù)變量值”>
1筐钟、Refresh(刷新)
說(shuō)明:自動(dòng)刷新并轉(zhuǎn)到新頁(yè)面揩瞪。
用法:<meta http-equiv=”Refresh” content=”2;URL”>?(注意后面的引號(hào),分別在秒數(shù)的前面和網(wǎng)址的后面篓冲,URL可為空)
注意:其中的2是指停留2秒鐘后自動(dòng)刷新到URL網(wǎng)址李破。
2宠哄、content-Type(顯示字符集的設(shè)定)
說(shuō)明:設(shè)定頁(yè)面使用的字符集。
用法:<meta http-equiv=”content-Type” content=”text/html; charset=utf-8">
注意:在HTML5中已經(jīng)簡(jiǎn)寫成<meta charset=”utf-8>
3嗤攻、Window-target(顯示窗口的設(shè)定)
說(shuō)明:強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示毛嫉。
用法:<meta http-equiv=”Window-target” content=”_top”>
注意:用來(lái)防止別人在iframe(框架)里調(diào)用自己的頁(yè)面,這也算是一個(gè)非常實(shí)用的屬性妇菱。
4承粤、Set-Cookie(cookie設(shè)定)
說(shuō)明:如果網(wǎng)頁(yè)過(guò)期,那么存盤的cookie將被刪除闯团。
用法:<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/>
注意:必須使用GMT的時(shí)間格式辛臊。
5、Pragma(cache模式)
說(shuō)明:禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問(wèn)頁(yè)面內(nèi)容房交。
用法:<meta http-equiv=”Pragma” content=”no-cache”>
注意:這樣設(shè)定彻舰,訪問(wèn)者將無(wú)法脫機(jī)瀏覽。
6涌萤、Expires(期限)
說(shuō)明:可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間淹遵。一旦網(wǎng)頁(yè)過(guò)期,必須到服務(wù)器上重新傳輸负溪。
用法:<meta http-equiv=Expires Content=0>
用法:<meta http-equiv=”expires” content=”Fri,12 Jan 2001 18:18:18 GMT”>
注意:必須使用GMT的時(shí)間格式透揣,或直接設(shè)為0(數(shù)字表示多少時(shí)間后過(guò)期)拣宰。
對(duì)于如何設(shè)置mate標(biāo)簽才能讓搜索引擎更喜歡若未,更利于SEO優(yōu)化,我個(gè)人覺(jué)得與網(wǎng)站優(yōu)化有關(guān)的屬性主要是keywords和descripion哄尔,其它的屬性對(duì)于優(yōu)化基本沒(méi)多大幫助崖堤,所以keywords和descripion的設(shè)置就極其重要了侍咱!而對(duì)于這兩個(gè)屬性的設(shè)置也是因網(wǎng)站而異的,也不能一概而論密幔,keywords和descripion的設(shè)置需要作全面的分析才能得出的楔脯。
Doctype作用是什么?
聲明叫做文件類型定義(DTD)胯甩,聲明的作用為了告訴瀏覽器該文件的類型昧廷。讓瀏覽器解析器知道應(yīng)該用哪個(gè)規(guī)范來(lái)解析文檔。聲明必須在 HTML 文檔的第一行偎箫,這并不是一個(gè) HTML 標(biāo)簽木柬。
嚴(yán)格模式:又稱標(biāo)準(zhǔn)模式,是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼淹办。
混雜模式:又稱怪異模式或兼容模式眉枕,是指瀏覽器用自己的方式解析代碼。
如何區(qū)分:瀏覽器解析時(shí)到底使用嚴(yán)格模式還是混雜模式,與網(wǎng)頁(yè)中的 DTD 直接相關(guān)速挑。
1谤牡、如果文檔包含嚴(yán)格的 DOCTYPE ,那么它一般以嚴(yán)格模式呈現(xiàn)梗摇。(嚴(yán)格 DTD ——嚴(yán)格模式)
2拓哟、包含過(guò)渡 DTD 和 URI 的 DOCTYPE ,也以嚴(yán)格模式呈現(xiàn)伶授,但有過(guò)渡 DTD 而沒(méi)有 URI (統(tǒng)一資源標(biāo)識(shí)符断序,就是聲明最后的地址)會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)。(有 URI 的過(guò)渡 DTD ——嚴(yán)格模式糜烹;沒(méi)有 URI 的過(guò)渡 DTD ——混雜模式)
3违诗、DOCTYPE 不存在或形式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。(DTD不存在或者格式不正確——混雜模式)
4疮蹦、HTML5 沒(méi)有 DTD 诸迟,因此也就沒(méi)有嚴(yán)格模式與混雜模式的區(qū)別,HTML5 有相對(duì)寬松的語(yǔ)法愕乎,實(shí)現(xiàn)時(shí)阵苇,已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容。( HTML5 沒(méi)有嚴(yán)格和混雜之分)
意義:嚴(yán)格模式與混雜模式存在的意義與其來(lái)源密切相關(guān)感论,如果說(shuō)只存在嚴(yán)格模式绅项,那么許多舊網(wǎng)站必然受到影響,如果只存在混雜模式比肄,那么會(huì)回到當(dāng)時(shí)瀏覽器大戰(zhàn)時(shí)的混亂快耿,每個(gè)瀏覽器都有自己的解析模式。
<!doctype html>的作用?
<!doctype html>的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式芳绩,使用最新的 HTML5標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面掀亥;如果不寫,瀏覽器就會(huì)進(jìn)入混雜模式妥色,而這是我們要避免的
瀏覽器亂碼的原因是什么搪花?如何解決
出現(xiàn)亂碼的原因是保存文檔時(shí)用的字符集跟文檔中meta標(biāo)簽設(shè)置的字符集不符合
下面這個(gè)流程是我們寫入文件到展示文件的簡(jiǎn)單描述:
我們使用編輯器編寫 HTML 文件
保存編寫的 HTML 文件
使用瀏覽器打開(kāi) HTML 文件
HTML文件在瀏覽器展示
我們編寫 HTML 文件時(shí),如果在meta中設(shè)定字符集為gbk
然后保存 HTML 文件時(shí)嘹害,編輯器用 utf-8 字符集保存
接著瀏覽器打開(kāi) HTML 文件時(shí)鳍侣,它看到,這時(shí)候它就會(huì)用gbk字符集來(lái)解碼你的 HTML 文檔
由于utf-8和gbk對(duì)中文的編碼方式不一樣吼拥,那么HTML文件在瀏覽器中顯示示出來(lái)肯定是亂碼。
所以這里關(guān)于編碼涉及到3個(gè)方面:
HTML 文檔中的 指定的字符集
編輯器保存文檔使用的字符集
瀏覽器解析 HTML 文檔使用的字符集
這里的關(guān)鍵在于2和3步线衫,如果這兩步的字符集不一樣凿可,那么英文以外的文字就會(huì)出現(xiàn)亂碼。英文不會(huì)出現(xiàn)亂碼是因?yàn)橐话阒髁鞯淖址瘜?duì)英文使用的編碼方式都是一樣的,可以互相兼容枯跑。
而第3步瀏覽器解析 HTML 文檔使用的字符集依賴于第1步 HTML 文檔中的 指定的字符
那如果 HTML 文檔沒(méi)指定呢惨驶?那瀏覽器就會(huì)用自己的方式去猜要用哪個(gè)字符集來(lái)解析 HTML 文檔,這里就可能會(huì)發(fā)生錯(cuò)誤敛助。
所以總結(jié)下如何解決瀏覽器亂碼:
HTML 文檔一定要指定字符集為utf-8粗卜,因?yàn)檫@個(gè)字符集包括了世界上幾乎所有的文字,沒(méi)有理由不用它纳击。
編輯器保存文檔使用的字符集一定要跟 HTML 文檔指定的字符集匹配续扔,也就是 utf-8
瀏覽器內(nèi)核
Trident內(nèi)核的常見(jiàn)瀏覽器有:E6、IE7焕数、IE8(Trident 4.0)纱昧、IE9(Trident 5.0)、IE10(Trident 6.0)堡赔;360安全瀏覽器(1.0-5.0為Trident识脆,6.0為Trident+Webkit,7.0為Trident+Blink)獵豹極輕瀏覽器善已,360極速瀏覽器(7.5之前為Trident+Webkit灼捂,7.5為Trident+Blink)等。
其中部分瀏覽器的新版本是“雙核”甚至是“多核”换团,其中一個(gè)內(nèi)核是Trident悉稠,然后再增加一個(gè)其他內(nèi)核。國(guó)內(nèi)的廠商一般把其他內(nèi)核叫做“高速瀏覽模式”啥寇,而Trident則是“兼容瀏覽模式”偎球,用戶可以來(lái)回切換。
Gecko內(nèi)核常見(jiàn)的瀏覽器:Mozilla Firefox辑甜、Mozilla SeaMonkey衰絮、waterfox(Firefox的64位開(kāi)源版)、Iceweasel磷醋、Epiphany(早期版本)猫牡、Flock(早期版本)、K-Meleon
WebKit內(nèi)核常見(jiàn)的瀏覽器:Apple Safari(Win/Mac/iPhone/iPad)邓线、Symbian手機(jī)瀏覽器淌友、Android 默認(rèn)瀏覽器
Blink是一個(gè)由Google和Opera Software開(kāi)發(fā)的瀏覽器排版引擎,Google計(jì)劃將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分骇陈,并且在2013年4月的時(shí)候公布了這一消息震庭。這一渲染引擎是開(kāi)源引擎WebKit中WebCore組件的一個(gè)分支,并且在Chrome(28及往后版本)你雌、Opera(15及往后版本)和Yandex瀏覽器中使用器联。
列出常見(jiàn)的標(biāo)簽二汛,并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景
h1、h2拨拓、h3肴颊、h4、h5渣磷、h6標(biāo)簽用于標(biāo)題
p 標(biāo)簽用于段落婿着,大段文字
div標(biāo)簽用于給頁(yè)面劃分區(qū)塊,讓結(jié)構(gòu)更清晰
a標(biāo)簽用于添加鏈接醋界,鏈接到某個(gè)地址竟宋,或者頁(yè)面上的某個(gè)元素。
img標(biāo)簽用于給頁(yè)面添加一張圖片
ul和li合用物独,給頁(yè)面添加并列的內(nèi)容
ol和li合用袜硫,給頁(yè)面添加有步驟和編號(hào)的有序內(nèi)容
dl dt dd標(biāo)簽,用于展示一系列標(biāo)題和內(nèi)容的場(chǎng)景
button 用于添加按鈕
em 強(qiáng)調(diào)頁(yè)面中的某些內(nèi)容
strong 比em標(biāo)簽的強(qiáng)調(diào)性更強(qiáng)挡篓,表示很重要
iframe 用于嵌入一個(gè)頁(yè)面婉陷,注意跨域操作的問(wèn)題
table 用于展示表格,不要用來(lái)做布局官研,thead秽澳,tbody和tfoot可以省略,瀏覽器會(huì)自動(dòng)添加border-collapse:collapse,用于合并邊框戏羽。