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

HTML

HTML含義：(HyperText Markup Language)超文本標(biāo)記語言。

“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素，“標(biāo)記”是指用特定的標(biāo)記符號來標(biāo)記要顯示的內(nèi)容的各個部分。超文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它被設(shè)計(jì)用來顯示數(shù)據(jù)。HTML文本就是我們通常所說的網(wǎng)頁，擴(kuò)展名可以是html或htm。

HTML 是用來描述網(wǎng)頁的一種語言

• HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
• 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
• HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

XML

• XML含義：(Extensible Markup Language)，可擴(kuò)展標(biāo)記語言。

XML是標(biāo)準(zhǔn)通用標(biāo)記語言的子集，是一種用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言，它被設(shè)計(jì)用來傳輸和存儲數(shù)據(jù)，是對超文本標(biāo)記語言的補(bǔ)充。可擴(kuò)展標(biāo)記語言是一種元標(biāo)記語言，即定義了用于定義其他特定領(lǐng)域有關(guān)語義的、結(jié)構(gòu)化的標(biāo)記語言，這些標(biāo)記語言將文檔分成許多部件并對這些部件加以標(biāo)識。它能夠更精確地聲明內(nèi)容，方便跨越多種平臺的更有意義的搜索結(jié)果。它提供了一種描述結(jié)構(gòu)數(shù)據(jù)的格式，簡化了網(wǎng)絡(luò)中數(shù)據(jù)交換和表示，使得代碼、數(shù)據(jù)和表示分離，并作為數(shù)據(jù)交換的標(biāo)準(zhǔn)格式，因此它常被稱為智能數(shù)據(jù)文檔，文件擴(kuò)展名為xml。

• XML 是一種標(biāo)記語言，很類似 HTML
• XML 的設(shè)計(jì)宗旨是傳輸數(shù)據(jù)，而非顯示數(shù)據(jù)
• XML 標(biāo)簽沒有被預(yù)定義。您需要自行定義標(biāo)簽。
• XML 被設(shè)計(jì)為具有自我描述性。
• XML 是 W3C 的推薦標(biāo)準(zhǔn)

XML與HTML之間的差異

它不是超文本標(biāo)記語言的替代。

它是對超文本標(biāo)記語言的補(bǔ)充。

它和超文本標(biāo)記語言為不同的目的而設(shè)計(jì)：

• 它被設(shè)計(jì)用來傳輸和存儲數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的內(nèi)容。

• 超文本標(biāo)記語言被設(shè)計(jì)用來顯示數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的外觀。

超文本標(biāo)記語言旨在顯示信息，而它旨在傳輸信息。

對它最好的描述是：它是獨(dú)立于軟件和硬件的信息傳輸工具。

XML的用途

• XML 把數(shù)據(jù)從 HTML 分離

如果你需要在 HTML 文檔中顯示動態(tài)數(shù)據(jù)，那么每當(dāng)數(shù)據(jù)改變時將花費(fèi)大量的時間來編輯 HTML。

通過 XML，數(shù)據(jù)能夠存儲在獨(dú)立的 XML 文件中。這樣你就可以專注于使用 HTML 進(jìn)行布局和顯示，并確保修改底層數(shù)據(jù)不再需要對 HTML 進(jìn)行任何的改變。

通過使用幾行 JavaScript，你就可以讀取一個外部 XML 文件，然后更新 HTML 中的數(shù)據(jù)內(nèi)容。

• XML 簡化數(shù)據(jù)共享

在真實(shí)的世界中，計(jì)算機(jī)系統(tǒng)和數(shù)據(jù)使用不兼容的格式來存儲數(shù)據(jù)。

XML 數(shù)據(jù)以純文本格式進(jìn)行存儲，因此提供了一種獨(dú)立于軟件和硬件的數(shù)據(jù)存儲方法。

這讓創(chuàng)建不同應(yīng)用程序可以共享的數(shù)據(jù)變得更加容易。

• XML 簡化數(shù)據(jù)傳輸

通過 XML，可以在不兼容的系統(tǒng)之間輕松地交換數(shù)據(jù)。

對開發(fā)人員來說，其中一項(xiàng)最費(fèi)時的挑戰(zhàn)一直是在因特網(wǎng)上的不兼容系統(tǒng)之間交換數(shù)據(jù)。

由于可以通過各種不兼容的應(yīng)用程序來讀取數(shù)據(jù)，以 XML 交換數(shù)據(jù)降低了這種復(fù)雜性。

• XML 簡化平臺的變更

升級到新的系統(tǒng)（硬件或軟件平臺），總是非常費(fèi)時的。必須轉(zhuǎn)換大量的數(shù)據(jù)，不兼容的數(shù)據(jù)經(jīng)常會丟失。

XML 數(shù)據(jù)以文本格式存儲。這使得 XML 在不損失數(shù)據(jù)的情況下，更容易擴(kuò)展或升級到新的操作系統(tǒng)、新應(yīng)用程序或新的瀏覽器。

• XML 使您的數(shù)據(jù)更有用

由于 XML 獨(dú)立于硬件、軟件以及應(yīng)用程序，XML 使您的數(shù)據(jù)更可用，也更有用。

不同的應(yīng)用程序都能夠訪問您的數(shù)據(jù)，不僅僅在 HTML 頁中，也可以從 XML 數(shù)據(jù)源中進(jìn)行訪問。

通過 XML，您的數(shù)據(jù)可供各種閱讀設(shè)備使用（手持的計(jì)算機(jī)、語音設(shè)備、新聞閱讀器等），還可以供盲人或其他殘障人士使用。

• XML 用于創(chuàng)建新的 Internet 語言
  很多新的 Internet 語言是通過 XML 創(chuàng)建的：
  其中的例子包括：

• XHTML - 最新的 HTML 版本

• WSDL - 用于描述可用的 web service

• WAP 和 WML - 用于手持設(shè)備的標(biāo)記語言

• RSS - 用于 RSS feed 的語言

• RDF 和 OWL - 用于描述資源和本體

• SMIL - 用于描述針針對 web 的多媒體

XHTML

• XHTML含義：可擴(kuò)展標(biāo)記語言（Extensible HyperText Markup Language，簡稱：XHTML）

XHTML基于可擴(kuò)展標(biāo)記語言（XML）。XHTML就是一個扮演著類似HTML的角色的可擴(kuò)展標(biāo)記語言（XML），所以，本質(zhì)上說，XHTML是一個過渡技術(shù)，結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡單特性。XHTML 1.0是一種在HTML 4.0基礎(chǔ)上優(yōu)化和改進(jìn)的的新語言，目的是基于XML應(yīng)用。XHTML是一種增強(qiáng)了的HTML,XHTML 是更嚴(yán)謹(jǐn)更純凈的 HTML 版本。它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對成千上萬已有的基于HTML語言設(shè)計(jì)的網(wǎng)站，直接采用XML還為時過早。因此，在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進(jìn)行擴(kuò)展，得到了XHTML。所以，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。XHTML 于2000年的1月26日成為 W3C （World Wide Web Consortium ，萬維網(wǎng)聯(lián)盟），文件擴(kuò)展名為xhtml.。

XHTML 是更嚴(yán)格更純凈的 HTML 代碼

• XHTML 的目標(biāo)是取代 HTML。
• XHTML 與 HTML 4.01 幾乎是相同的。
• XHTML 是更嚴(yán)格更純凈的 HTML 版本。
• XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。
• XHTML 是一個 W3C 標(biāo)準(zhǔn)。

為什么要使用XHTML？

XHTML是當(dāng)前HTML版的繼承者。HTML語法要求比較松散，這樣對網(wǎng)頁編寫者來說，比較方便，但對于機(jī)器來說，語言的語法越松散，處理起來就越困難，對于傳統(tǒng)的計(jì)算機(jī)來說，還有能力兼容松散語法，但對于許多其他設(shè)備，比如手機(jī)，難度就比較大。因此產(chǎn)生了由DTD定義規(guī)則，語法要求更加嚴(yán)格XHTML。大部分常見的瀏覽器都可以正確地解析XHTML，即使早期的瀏覽器，XHTML作為HTML的一個子集，許多也可以解析。也就是說，幾乎所有的網(wǎng)頁瀏覽器在正確解析HTML的同時，也可兼容XHTML。當(dāng)然，從HTML完全轉(zhuǎn)移到XHTML，還需要一個過程。

HTML與XHTML的區(qū)別

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

總結(jié)

• HTML、XML、XHTML都是標(biāo)記語言
• HTML關(guān)注網(wǎng)頁內(nèi)容的展現(xiàn)
• XML關(guān)注數(shù)據(jù)的準(zhǔn)確，語法嚴(yán)格，用于數(shù)據(jù)傳輸
• XHTML將XML的嚴(yán)謹(jǐn)性和HTML的簡便性結(jié)合，適應(yīng)更加靈活多變的網(wǎng)頁需求

2.怎么理解HTML語義化？

語義化是指用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。通俗地講,語義化就是對數(shù)據(jù)和信息進(jìn)行處理,使得機(jī)器可以理解。

也就是說，用html中的標(biāo)簽，讓整個網(wǎng)頁有一定的格式，機(jī)器在理解是，遇到某個標(biāo)簽，知道這部分是做什么的。

語義化的優(yōu)點(diǎn)
1.為了在沒有css代碼時，也能呈現(xiàn)很好的內(nèi)容結(jié)構(gòu)，代碼結(jié)構(gòu)，以至于達(dá)到?jīng)]有編程基礎(chǔ)的非技術(shù)人員，也能看懂一二。（其實(shí)，就是為了不穿CSS外衣，裸奔依然好看）。
2.提高用戶體驗(yàn)，比如：title，alt用于解釋名詞和圖片信息。
3.利于SEO，語義化能和搜索引擎建立良好的聯(lián)系，有利于爬蟲抓取更多的有效信息。爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重。
4.方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以語義的方式來渲染網(wǎng)頁。
5.便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，如果遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個標(biāo)準(zhǔn)，可以減少差異化，利于規(guī)范化。

3.怎樣理解內(nèi)容與樣式分離原則？

• 寫HTML的時候先不管樣式，重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓HTML能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。樣式交給CSS完成，交互交給JS完成
• 寫JS的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
• HTML內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式。

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

<meta>標(biāo)簽

• <meta> 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。

• <meta> 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。

  
  
  image.png

<meta charset='xxx'>：告訴瀏覽器器，當(dāng)前頁面采用的編碼方式。

name屬性

name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

格式：<meta name="參數(shù)"content="具體的參數(shù)值">。

1.Keywords(關(guān)鍵字):告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。
<meta name="keywords"content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">

2.description(網(wǎng)站內(nèi)容描述):用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。
<meta name="description"content="xxx博客,html的meta總結(jié)，meta是html語言head區(qū)的一個輔助性標(biāo)簽。">

3.robots(機(jī)器人向?qū)?:告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。
<meta name="robots"content="none">
可選擇參數(shù)

• 信息參數(shù)為all：文件將被檢索，且頁面上的鏈接可以被查詢

• 信息參數(shù)為none：文件將不被檢索，且頁面上的鏈接不可以被查詢

• 信息參數(shù)為index：文件將被檢索

• 信息參數(shù)為follow：頁面上的鏈接可以被查詢

• 信息參數(shù)為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢

• 信息參數(shù)為nofollow：文件將被檢索，但頁面上的鏈接不可以被查詢

4.author(作者)：標(biāo)注網(wǎng)頁的作者
<meta name="author"content="root,root@xxxx.com">

5.generator:明網(wǎng)站的采用的什么軟件制作。
<meta name="generator"content="信息參數(shù)"/>

6.COPYRIGHT:代表說明網(wǎng)站版權(quán)信息。
<META NAME="COPYRIGHT"CONTENT="信息參數(shù)">

7.revisit-after:代表網(wǎng)站重訪,7days代表7天，依此類推。
<META name="revisit-after"CONTENT="7days">

http-equiv屬性

相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個參數(shù)的變量值。

格式：<meta http-equiv="參數(shù)"content="參數(shù)變量值">

1.Expires(期限):可以用于設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
PS:必須使用GMT的時間格式。

2.Pragma(cache模式):禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。訪問者無法脫機(jī)瀏覽
<meta http-equiv="Pragma"content="no-cache">

3.Refresh(刷新):自動刷新并指向新頁面。
<meta http-equiv="Refresh"content="2;URL=http://www.xxx.com">
PS:注意后面的引號，分別在秒數(shù)的前面和網(wǎng)址的后面,例子中為2秒后刷新到url的網(wǎng)址

4.Set-Cookie(cookie設(shè)定)：如果網(wǎng)頁過期，那么存盤的cookie將被刪除。
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
PS:必須使用GMT的時間格式。

5.Window-target(顯示窗口的設(shè)定):強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示。
<meta http-equiv="Window-target"content="_top">
PS:用來防止別人在框架里調(diào)用自己的頁面。

6.content-Type(顯示字符集的設(shè)定):設(shè)定頁面使用的字符集。
<meta http-equiv="content-Type"content="text/html;charset=gb2312">
不同參數(shù)
meta標(biāo)簽的charset的信息參數(shù)如GB2312時，代表說明網(wǎng)站是采用的編碼是簡體中文

meta標(biāo)簽的charset的信息參數(shù)如BIG5時，代表說明網(wǎng)站是采用的編碼是繁體中文

meta標(biāo)簽的charset的信息參數(shù)如iso-2022-jp時，代表說明網(wǎng)站是采用的編碼是日文

meta標(biāo)簽的charset的信息參數(shù)如ks_c_5601時，代表說明網(wǎng)站是采用的編碼是韓文

meta標(biāo)簽的charset的信息參數(shù)如ISO-8859-1時，代表說明網(wǎng)站是采用的編碼是英文

meta標(biāo)簽的charset的信息參數(shù)如UTF-8時，代表世界通用的語言編碼

7.content-Language（顯示語言的設(shè)定）
<meta http-equiv="Content-Language"content="zh-cn"/>

8.http-equiv="imagetoolbar":指定是否顯示圖片工具欄，當(dāng)為false代表不顯示，當(dāng)為true代表顯示。
<meta http-equiv="imagetoolbar"content="false"/>

9.Content-Script-Type:W3C網(wǎng)頁規(guī)范，指明頁面中腳本的類型。
<Meta http-equiv="Content-Script-Type"Content="text/javascript">

**10.Pics-label(網(wǎng)頁等級評定) **:在IE的internet選項(xiàng)中有一項(xiàng)內(nèi)容設(shè)置，可以防止瀏覽一些受限制的網(wǎng)站，而網(wǎng)站的限制級別就是通過meta屬性來設(shè)置的。
`<meta http-equiv="Pics-label" content=""> ·

5.文檔聲明的作用？嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?

• 文檔聲明的作用：告知瀏覽器的解析器， 用什么 文檔類型規(guī)范 來解析這個文檔。
• 嚴(yán)格模式和混雜模式
  嚴(yán)格模式：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。
  混雜模式：瀏覽器使用自己的怪異模式解析渲染頁面。
• <!doctype html> 的作用：

它是html5標(biāo)準(zhǔn)網(wǎng)頁聲明,全稱為Document Type HyperText Mark-up Language，意思為文檔種類為超文本標(biāo)記性語言或超文本鏈接標(biāo)示語言，現(xiàn)在是這個簡潔形式，支持html5標(biāo)準(zhǔn)的主流瀏覽器都認(rèn)識這個聲明。表示網(wǎng)頁采用html5，<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

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

• 保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
• 在保存文件時，charset的屬性值與當(dāng)前頁面保持一致

7.常見的瀏覽器有哪些？使用什么內(nèi)核？

• 常見內(nèi)核：Trident、Gecko、Webkit、Blink。
  常見瀏覽器
• IE: trident內(nèi)核（IE6~IE11）
• Chrome:Blink(基于webkit，Google與Opera Software共同開發(fā))
• Firefox：gecko內(nèi)核
• Safari:webkit內(nèi)核
• Opera:以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
• 360安全瀏覽器：1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink
• 360極速瀏覽器：7.5之前為Trident+Webkit,7.5為Trident+Blink
• QQ瀏覽器：Chromium內(nèi)核+IE雙內(nèi)核

8.常見html標(biāo)簽及使用場景

常見的html標(biāo)簽