HTML、XML、XHTML 有什么區別

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

HTML VS XHTML

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

HTML VS XML

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

怎樣理解 HTML 語義化?

根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

語義化是為了：

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

怎樣理解內容與樣式分離的原則?

將樣式和結構寫在一起，也就是直接將樣式寫在html標簽中，會使整個html文檔很亂，可讀性變差，不利于維護。

將樣式與結構分離有很多的好處：

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

有哪些常見的meta標簽？

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

1. name屬性

name屬性主要用于描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便于搜索引擎抓取。meta標簽中name屬性語法格式是：
<meta name="參數"content="具體的描述">

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

A. keywords(關鍵字)

說明：用于告訴搜索引擎，你網頁的關鍵字。舉例：
<meta name="keywords"content="前端，meta標簽">

B. description(網站內容的描述)

說明：用于告訴搜索引擎，你網站的主要內容。舉例：
<meta name="description"content="meta標簽相關介紹">

C. viewport(移動端的窗口)

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

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

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

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

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

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

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

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

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

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

D.WebApp全屏模式：

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

E.隱藏狀態欄/設置狀態欄顏色：

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

F.添加到主屏后的標題**

<meta name="apple-mobile-web-app-title" content="標題">

G.忽略數字自動識別為電話號碼

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

H.忽略識別郵箱

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

I.添加智能 App 廣告條 Smart App Banner：**告訴瀏覽器這個網站對應的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的參數有all,none,index,noindex,follow,nofollow。默認是all。
舉例：
<meta name="robots" content="none">

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

K. author(作者)

說明：用于標注網頁作者舉例：
<meta name="author"content="niuniu">

L. generator(網頁制作軟件)

說明：用于標明網頁是什么軟件做的舉例：
<meta name="generator"content="Sublime Text3">

M. copyright(版權)

說明：用于標注版權信息舉例：
<meta name="copyright"content="niuniu">//代表該網站為niuniu個人版權所有。

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

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

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

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

2. http-equiv屬性

meta標簽中http-equiv屬性語法格式是：
<meta http-equiv="參數" content="具體的描述">

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

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

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

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

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

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

用法1.
說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。

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

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

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

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

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

maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。

參考鏈接：HTTP緩存

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

D. expires(網頁到期時間)

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

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

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

F. Set-Cookie(cookie設定)

說明：如果網頁過期。那么這個網頁存在本地的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），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪個規范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標簽。

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

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

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

1）盒模型的高寬包含內邊距padding和邊框border

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

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

補充內容：使用方式

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，但允許框架集內容。

<!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 來編寫標記。

<!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 來編寫標記。

<!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，但允許框架集內容。

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

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

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

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

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

常見的瀏覽器有哪些，什么內核？

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

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