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,用于合并邊框戏羽。