HTML、XML、XHTML 有什么區(qū)別

1.HTML 是用來描述網(wǎng)頁的一種語言，指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
2.XML 指可擴展標(biāo)記語言（EXtensible Markup Language）
XML 是一種標(biāo)記語言，很類似 HTML
XML 的設(shè)計宗旨是傳輸數(shù)據(jù)，而非顯示數(shù)據(jù)
XML 標(biāo)簽沒有被預(yù)定義。需要自行定義標(biāo)簽。
XML 被設(shè)計為具有自我描述性。
3.XHTML 指可擴展超文本標(biāo)簽語言（EXtensible HyperText Markup Language）。
XHTML 的目標(biāo)是取代 HTML。
XHTML 與 HTML 4.01 幾乎是相同的。
XHTML 是更嚴格更純凈的 HTML 版本。
XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。
XHTML 是一個 W3C 標(biāo)準(zhǔn)。

HTML VS XHTML

最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。

HTML VS XML

XML 不是 HTML 的替代。
XML 和 HTML 為不同的目的而設(shè)計：
XML 被設(shè)計為傳輸和存儲數(shù)據(jù)，其焦點是數(shù)據(jù)的內(nèi)容。
HTML 被設(shè)計用來顯示數(shù)據(jù)，其焦點是數(shù)據(jù)的外觀。
HTML 旨在顯示信息，而 XML 旨在傳輸信息。

怎樣理解 HTML 語義化?

根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

語義化是為了：

• 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看；
• 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；
• 有利于搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息；
• 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
• 便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。

怎樣理解內(nèi)容與樣式分離的原則?

將樣式和結(jié)構(gòu)寫在一起，也就是直接將樣式寫在html標(biāo)簽中，會使整個html文檔很亂，可讀性變差，不利于維護。

將樣式與結(jié)構(gòu)分離有很多的好處：

利用CSS中的重用、組合、繼承等特性減少樣式的代碼量，樣式結(jié)構(gòu)上非常清晰；
頁面視覺有變動只需要修改相應(yīng)的CSS文件，不用或者基本上不用改動html文檔中的標(biāo)簽結(jié)構(gòu)；
方便JavaScript腳本編寫，比如用js控制標(biāo)簽的className來方便的、動態(tài)的改變元素的樣式，而不是直接修改其具體樣式
適合產(chǎn)品級、模塊化的開發(fā)

有哪些常見的meta標(biāo)簽？

meta標(biāo)簽的作用有：搜索引擎優(yōu)化（SEO），定義頁面使用語言，自動刷新并指向新的頁面，實現(xiàn)網(wǎng)頁轉(zhuǎn)換時的動態(tài)效果，控制頁面緩沖，網(wǎng)頁定級評價，控制網(wǎng)頁顯示的窗口等
meta標(biāo)簽的組成：meta標(biāo)簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。

1. name屬性

name屬性主要用于描述網(wǎng)頁，比如網(wǎng)頁的關(guān)鍵詞，敘述等。與之對應(yīng)的屬性值為content，content中的內(nèi)容是對name填入類型的具體描述，便于搜索引擎抓取。meta標(biāo)簽中name屬性語法格式是：
<meta name="參數(shù)"content="具體的描述">

其中name屬性共有以下幾種參數(shù)。 (A-C為常用屬性)

A. keywords(關(guān)鍵字)

說明：用于告訴搜索引擎，你網(wǎng)頁的關(guān)鍵字。舉例：
<meta name="keywords"content="前端，meta標(biāo)簽">

B. description(網(wǎng)站內(nèi)容的描述)

說明：用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。舉例：
<meta name="description"content="meta標(biāo)簽相關(guān)介紹">

C. viewport(移動端的窗口)

說明：能優(yōu)化移動瀏覽器的顯示。如果不是響應(yīng)式網(wǎng)站，不要使用initial-scale或者禁用縮放。

大部分4.7-5寸設(shè)備的viewport寬設(shè)為360px；5.5寸設(shè)備設(shè)為400px；iphone6設(shè)為375px；ipone6 plus設(shè)為414px。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

a.width：寬度（數(shù)值 / device-width）（范圍從200 到10,000，默認為980 像素）

b.height：高度（數(shù)值 / device-height）（范圍從223 到10,000）

c.initial-scale：初始的縮放比例 （范圍從>0 到10）

d.minimum-scale：允許用戶縮放到的最小比例

e.maximum-scale：允許用戶縮放到的最大比例

f.user-scalable：用戶是否可以手動縮 (no,yes)

g.minimal-ui：可以在頁面加載時最小化上下狀態(tài)欄。（已棄用）

注意，很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上，這會讓網(wǎng)站以100%寬度渲染，用戶需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網(wǎng)頁來看到全部的內(nèi)容。

D.WebApp全屏模式：

<meta name="apple-mobile-web-app-capable" content="yes" />

E.隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色：

只有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

F.添加到主屏后的標(biāo)題**

<meta name="apple-mobile-web-app-title" content="標(biāo)題">

G.忽略數(shù)字自動識別為電話號碼

<meta content="telephone=no" name="format-detection" />

H.忽略識別郵箱

<meta content="email=no" name="format-detection" />

I.添加智能 App 廣告條 Smart App Banner：**告訴瀏覽器這個網(wǎng)站對應(yīng)的app，并在頁面上顯示下載banner(如下圖)。參考文檔

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

其他參考
``

<meta name="HandheldFriendly" content="true">

``

<meta name="MobileOptimized" content="320">

``

<meta name="screen-orientation" content="portrait">

``

<meta name="x5-orientation" content="portrait">

``

<meta name="full-screen" content="yes">

``

<meta name="x5-fullscreen" content="true">

``

<meta name="browsermode" content="application">

``

<meta name="x5-page-mode" content="app">

``

<meta name="msapplication-tap-highlight" content="no">

J. robots(定義搜索引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數(shù)有all,none,index,noindex,follow,nofollow。默認是all。
舉例：
<meta name="robots" content="none">

具體參數(shù)如下：
1.none : 搜索引擎將忽略此網(wǎng)頁，等價于noindex，nofollow。
2.noindex : 搜索引擎不索引此網(wǎng)頁。
3.nofollow: 搜索引擎不繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。
4.all : 搜索引擎將索引此網(wǎng)頁與繼續(xù)通過此網(wǎng)頁的鏈接索引，等價于index，follow。
5.index : 搜索引擎索引此網(wǎng)頁。
6.follow : 搜索引擎繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。

K. author(作者)

說明：用于標(biāo)注網(wǎng)頁作者舉例：
<meta name="author"content="niuniu">

L. generator(網(wǎng)頁制作軟件)

說明：用于標(biāo)明網(wǎng)頁是什么軟件做的舉例：
<meta name="generator"content="Sublime Text3">

M. copyright(版權(quán))

說明：用于標(biāo)注版權(quán)信息舉例：
<meta name="copyright"content="niuniu">//代表該網(wǎng)站為niuniu個人版權(quán)所有。

N. revisit-after(搜索引擎爬蟲重訪時間)

說明：如果頁面不是經(jīng)常更新，為了減輕搜索引擎爬蟲對服務(wù)器帶來的壓力，可以設(shè)置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認時間來訪問。舉例：
<meta name="revisit-after" content="7 days" >

O. renderer(雙核瀏覽器渲染方式)

說明：renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。舉例：
<meta name="renderer" content="webkit"> //默認webkit內(nèi)核<meta name="renderer" content="ie-comp"> //默認IE兼容模式<meta name="renderer" content="ie-stand"> //默認IE標(biāo)準(zhǔn)模式

2. http-equiv屬性

meta標(biāo)簽中http-equiv屬性語法格式是：
<meta http-equiv="參數(shù)" content="具體的描述">

其中http-equiv屬性主要有以下幾種參數(shù)：

A. content-Type(設(shè)定網(wǎng)頁字符集)(推薦使用HTML5的方式)

說明：用于設(shè)定網(wǎng)頁字符集，便于瀏覽器解析與渲染頁面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦<meta charset="utf-8">//HTML5設(shè)定網(wǎng)頁字符集的方式，推薦使用UTF-8

B. X-UA-Compatible(瀏覽器采取何種版本渲染當(dāng)前頁面)

說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設(shè)置為最新模式，在各大框架中這個設(shè)置也很常見。）舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當(dāng)前頁面

C. cache-control(指定請求和響應(yīng)遵循的緩存機制)

用法1.
說明：指導(dǎo)瀏覽器如何緩存某個響應(yīng)以及緩存多長時間。

舉例:
<meta http-equiv="cache-control" content="no-cache">

共有以下幾種用法：
no-cache: 先發(fā)送請求，與服務(wù)器確認該資源是否被更改，如果未被更改，則使用緩存。

no-store: 不允許緩存，每次都要去服務(wù)器上，下載完整的響應(yīng)。（安全措施）

public : 緩存所有響應(yīng)，但并非必須。因為max-age也可以做到相同效果

private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應(yīng)）

maxage : 表示當(dāng)前請求開始，該響應(yīng)在多久內(nèi)能被緩存和重用，而不去服務(wù)器重新請求。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒。

參考鏈接：HTTP緩存

用法2.(禁止百度自動轉(zhuǎn)碼)
說明：用于禁止當(dāng)前頁面在移動端瀏覽時，被百度自動轉(zhuǎn)碼。雖然百度的本意是好的，但是轉(zhuǎn)碼效果很多時候卻不盡人意。所以可以在head中加入例子中的那句話，就可以避免百度自動轉(zhuǎn)碼了。舉例：
<meta http-equiv="Cache-Control" content="no-siteapp" />

D. expires(網(wǎng)頁到期時間)

說明:用于設(shè)定網(wǎng)頁的到期時間，過期后網(wǎng)頁必須到服務(wù)器上重新傳輸。舉例：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

E. refresh(自動刷新并指向某頁面)

說明：網(wǎng)頁將在設(shè)定的時間內(nèi)，自動刷新并調(diào)向設(shè)定的網(wǎng)址。舉例:
<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/">//意思是2秒后跳轉(zhuǎn)向我的博客

F. Set-Cookie(cookie設(shè)定)

說明：如果網(wǎng)頁過期。那么這個網(wǎng)頁存在本地的cookies也會被自動刪除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體范例

文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?

1.Doctype作用是什么？

<!DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標(biāo)簽。

2.嚴格模式與混雜模式如何區(qū)分？它們有何意義？

嚴格模式：又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼。
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。
如何區(qū)分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網(wǎng)頁中的 DTD 直接相關(guān)。
1、如果文檔包含嚴格的 DOCTYPE ，那么它一般以嚴格模式呈現(xiàn)。（嚴格 DTD ——嚴格模式）
2、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現(xiàn)，但有過渡 DTD 而沒有 URI （統(tǒng)一資源標(biāo)識符，就是聲明最后的地址）會導(dǎo)致頁面以混雜模式呈現(xiàn)。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）
3、DOCTYPE 不存在或形式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。（DTD不存在或者格式不正確——混雜模式）
4、HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區(qū)別，HTML5 有相對寬松的語法，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容。（ HTML5 沒有嚴格和混雜之分）
意義：嚴格模式與混雜模式存在的意義與其來源密切相關(guān)，如果說只存在嚴格模式，那么許多舊網(wǎng)站必然受到影響，如果只存在混雜模式，那么會回到當(dāng)時瀏覽器大戰(zhàn)時的混亂，每個瀏覽器都有自己的解析模式。

3.嚴格模式與混雜模式的語句解析不同點有哪些？

1）盒模型的高寬包含內(nèi)邊距padding和邊框border

在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在IE5.5及以下的瀏覽器及其他版本的Quirks模式下，IE的寬度和高度還包含了padding和border。

2）可以設(shè)置行內(nèi)元素的高寬
在Standards模式下，給span等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
3）可設(shè)置百分比的高度
在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置高度，子元素設(shè)置一個百分比的高度是無效的。
4）用margin:0 auto設(shè)置水平居中在IE下會失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:
body{text-align:center};#content{text-align:left}
5）quirk模式下設(shè)置圖片的padding會失效
6）quirk模式下Table中的字體屬性不能繼承上層的設(shè)置
7）quirk模式下white-space:pre會失效

補充內(nèi)容：使用方式

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">

嚴格模式與混雜模式的來源

當(dāng)年Netscape4（網(wǎng)景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現(xiàn)CSS機制時，并沒有遵循W3C提出的標(biāo)準(zhǔn)。Netscape4 提供了糟糕的支持，而IE4 雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管IE 5 修復(fù)了IE4 許多的問題，但是依然延續(xù)CSS實現(xiàn)中的其它故障（主要是盒模型問題）。為了保障自己的網(wǎng)站在各個瀏覽器上顯示正確，網(wǎng)頁開發(fā)者們不得不依據(jù)各個瀏覽器自身的規(guī)范來使用css，因此大部分網(wǎng)站的css實現(xiàn)并不符合W3C規(guī)范的標(biāo)準(zhǔn)。然而隨著標(biāo)準(zhǔn)一致性越來越重要，瀏覽器開發(fā)商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標(biāo)準(zhǔn)是前進的方向。但是改變現(xiàn)有的 css，完全去遵循標(biāo)準(zhǔn)，會使許多舊網(wǎng)站或多或少受到破壞，如果瀏覽器突然以正確的方式解析現(xiàn)存的css，陳舊的網(wǎng)站的顯示必然會受到影響。所以，所有的瀏覽器都需要提供兩種模式：混雜模式服務(wù)于舊式規(guī)則，而嚴格模式服務(wù)于標(biāo)準(zhǔn)規(guī)則。

瀏覽器亂碼的原因是什么？如何解決？

造成html網(wǎng)頁亂碼原因主要是html源代碼內(nèi)中文字內(nèi)容與html編碼不同造成。但無論是哪種情況造成亂碼在網(wǎng)頁開始時候都需要設(shè)置網(wǎng)頁編碼。
1、比如網(wǎng)頁源代碼是gbk的編碼，而內(nèi)容中的中文字是utf-8編碼的，這樣瀏覽器打開即會出現(xiàn)html亂碼。反之網(wǎng)頁是編碼utf-8，內(nèi)容是gbk也會出現(xiàn)亂碼。
2、html網(wǎng)頁編碼是gbk，而程序從數(shù)據(jù)庫中調(diào)出呈現(xiàn)是utf-8編碼的內(nèi)容也會造成編碼亂碼。
3、瀏覽器不能自動檢測網(wǎng)頁編碼，造成網(wǎng)頁亂碼。
解決方法：
第一種，html網(wǎng)頁源代碼編碼與中文字輸入編碼不同。
解決方法：
使用軟件進行編輯HTML網(wǎng)頁內(nèi)容，推薦使用DW軟件進行HTML代碼編輯和開發(fā)。
盡量不要直接使用記事本進行編輯HTML代碼。
第二種，如果網(wǎng)頁設(shè)置編碼是gbk的，而數(shù)據(jù)庫儲存數(shù)據(jù)編碼格式是UTF-8的，這個時候程序查詢數(shù)據(jù)庫數(shù)據(jù)顯示數(shù)據(jù)前進鄉(xiāng)程序轉(zhuǎn)碼即可。
例如PHP程序+mysql查詢顯示數(shù)據(jù)轉(zhuǎn)碼：
1、mysql_query("SET NAMES 'UTF8'"); //將查詢數(shù)據(jù)轉(zhuǎn)碼為utf8，也就是轉(zhuǎn)換為utf-8
2、mysql_query("SET NAMES 'GBK'");//將查詢數(shù)據(jù)轉(zhuǎn)碼為GBK,如gbk2312
第三種，瀏覽器造成亂碼。
這個可能是你網(wǎng)頁沒有設(shè)置meta charset編碼造成。導(dǎo)致瀏覽器不能識別你網(wǎng)頁默認編碼類型。解決方法：
1、如果瀏覽器瀏覽時候出現(xiàn)網(wǎng)頁亂碼，在瀏覽器中找到轉(zhuǎn)換編碼的菜單。
2、如果自己開發(fā)網(wǎng)頁，必須網(wǎng)頁加入meta charset編碼標(biāo)簽。

常見的瀏覽器有哪些，什么內(nèi)核？

Trident內(nèi)核：IE,遨游,TT,世界之窗,360,搜狗瀏覽器等。
Gecko內(nèi)核：Netscape6及以上版本，火狐/MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 （Opera內(nèi)核原為：Presto，現(xiàn)為：Blink）
Webkit內(nèi)核：Safari,Chrome等。 （Chrome的：Blink（WebKit的分支））

列出常見的標(biāo)簽，并簡單介紹這些標(biāo)簽用在什么場景