html和xhtml和xml的區(qū)別

1. html即是超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language），是最早寫(xiě)網(wǎng)頁(yè)的語(yǔ)言换棚，但是由于時(shí)間早，規(guī)范不是很好，大小寫(xiě)混寫(xiě)且編碼不規(guī)范豺型；

2. xhtml即是升級(jí)版的html（Extensible Hyper Text Markup Language），對(duì)html進(jìn)行了規(guī)范买乃，編碼更加嚴(yán)謹(jǐn)純潔姻氨，也是一種過(guò)渡語(yǔ)言，html向xml過(guò)渡的語(yǔ)言剪验；

3. xml即時(shí)可擴(kuò)展標(biāo)記語(yǔ)言（Extensible Markup Language）肴焊，是一種跨平臺(tái)語(yǔ)言，編碼更自由功戚，可以自由創(chuàng)建標(biāo)簽娶眷。

網(wǎng)頁(yè)編碼按照html>>xhtml>>xml這個(gè)過(guò)程發(fā)展。

怎樣理解 HTML 語(yǔ)義化

語(yǔ)義化的含義就是用正確的標(biāo)簽做正確的事情啸臀，html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化届宠，便于對(duì)瀏覽器、搜索引擎解析乘粒；在沒(méi)有樣式CCS情況下也以一種文檔格式顯示豌注，并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重灯萍，利于 SEO轧铁。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解竟稳。

怎樣理解內(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)

寫(xiě)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)容與樣式分離） 茶袒，寫(xiě)JS的時(shí)候梯刚，盡量不要用JS去直接操作樣式，而是通過(guò)給元素添加刪除class來(lái)控制樣式變化（即行為分離）薪寓。

（3）分離原則的優(yōu)點(diǎn)

• 瀏覽器加載網(wǎng)頁(yè)頁(yè)面速度變快亡资。分離原則下，大部分頁(yè)面代碼寫(xiě)在了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)不變形的前提下棉钧，放心在不同瀏覽器渲染顯示樣式。

有哪些常見(jiàn)的meta標(biāo)簽

申明編碼
<meta charset='utf-8' />

優(yōu)先使用 IE 最新版本和 Chrome

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 關(guān)于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

瀏覽器內(nèi)核控制
國(guó)內(nèi)瀏覽器很多都是雙內(nèi)核（webkit和Trident）,webkit內(nèi)核高速瀏覽涕蚤，IE內(nèi)核兼容網(wǎng)頁(yè)和舊版網(wǎng)站宪卿。 而添加meta標(biāo)簽的網(wǎng)站可以控制瀏覽器選擇何種內(nèi)核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
國(guó)內(nèi)雙核瀏覽器默認(rèn)內(nèi)核模式如下：

1. 搜狗高速瀏覽器万栅、QQ瀏覽器：IE內(nèi)核（兼容模式）
2. 360極速瀏覽器佑钾、遨游瀏覽器：Webkit內(nèi)核（極速模式）

禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問(wèn)頁(yè)面內(nèi)容
這樣設(shè)定，訪問(wèn)者將無(wú)法脫機(jī)瀏覽
<meta http-equiv="Pragma" content="no-cache">
站點(diǎn)適配
主要用于PC-手機(jī)頁(yè)的對(duì)應(yīng)關(guān)系
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

• [wml|xhtml|html5]
  根據(jù)手機(jī)頁(yè)的協(xié)議語(yǔ)言烦粒，選擇其中一種
• url="url"
  后者代表當(dāng)前PC頁(yè)所對(duì)應(yīng)的手機(jī)頁(yè)URL休溶，兩者必須是一一對(duì)應(yīng)關(guān)系代赁。

用于SEO優(yōu)化

頁(yè)面關(guān)鍵詞
每個(gè)網(wǎng)頁(yè)應(yīng)具有描述該網(wǎng)頁(yè)內(nèi)容的一組唯一的關(guān)鍵字, 不要太短也不要太長(zhǎng)
<meta name="keywords" content="your tags" />
頁(yè)面描述
每個(gè)網(wǎng)頁(yè)都應(yīng)該有一個(gè)不超過(guò)150個(gè)字符的頁(yè)面描述
<meta name="description" content="150 words" />

移動(dòng)設(shè)備

viewport
viewport能優(yōu)化移動(dòng)瀏覽器的顯示。 如果不是響應(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"/>

width=device-width 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開(kāi)頁(yè)面時(shí)出現(xiàn)黑邊

• width 寬度
  數(shù)值 或 device-width, 范圍從200 到 10000孽尽，默認(rèn)為 980 像素
• height 高度
  數(shù)值 或 device-height, 范圍從 223 到 10000
• initial-scale 初始的縮放比例
  范圍從0 到10
• minimum-scale 允許用戶縮放到的最小比例
• maximum-scale 允許用戶縮放到的最大比例
• user-scalable 用戶是否可以手動(dòng)縮(user-scalable=no 或者 user-scalable=yes)

注意窖壕，很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上，這會(huì)讓網(wǎng)站以100%寬度渲染杉女，用戶需要手動(dòng)移動(dòng)頁(yè)面或者縮放艇拍。 如果和initial-scale=1同時(shí)使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網(wǎng)頁(yè)來(lái)看到全部的內(nèi)容宠纯。
WebApp全屏模式
啟用全屏模式, 偽裝app，離線應(yīng)用层释。
<meta name="apple-mobile-web-app-capable" content="yes" />

更多用法可以點(diǎn)擊參考鏈接

文檔聲明的作用?

DOCTYPE聲明的作用是指出閱讀程序應(yīng)該用什么規(guī)則集來(lái)解釋文檔中的標(biāo)記婆瓜。不正確的doctype聲明經(jīng)常導(dǎo)致網(wǎng)頁(yè)不正確顯示，或者導(dǎo)致它們根本不能顯示贡羔。

嚴(yán)格模式和混雜模式指什么?

• 嚴(yán)格模式（推薦）現(xiàn)在也稱(chēng)為標(biāo)準(zhǔn)模式廉白，在該模式下，瀏覽器會(huì)嚴(yán)格按照 HTML 和 CSS 標(biāo)準(zhǔn)來(lái)解析乖寒、渲染你的文檔猴蹂。
• 混雜模式（不推薦）的由來(lái)是一個(gè)歷史問(wèn)題。在互聯(lián)網(wǎng)早期楣嘁，網(wǎng)頁(yè)一般寫(xiě)成兩個(gè)版本：一個(gè)寫(xiě)給網(wǎng)景公司的 Navigator瀏覽器磅轻，一個(gè)寫(xiě)給微軟公司的IE瀏覽器。當(dāng)W3C制定了 Web 標(biāo)準(zhǔn)后逐虚，這兩個(gè)瀏覽器不能馬上開(kāi)始按標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面聋溜，因?yàn)檫@樣會(huì)破壞當(dāng)時(shí)大部分頁(yè)面的顯示效果。所以各瀏覽器就引入了混雜模式叭爱，在該模式下撮躁，瀏覽器會(huì)模擬Navigator 4和IE5的非標(biāo)準(zhǔn)行為來(lái)解析渲染頁(yè)面，這樣做就是為了兼容在W3C標(biāo)準(zhǔn)出現(xiàn)之前就存在的那些“不標(biāo)準(zhǔn)”的頁(yè)面买雾。

<!doctype html> 的作用?

<!doctype html> 的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式把曼，使用最新的 HTML5標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面；如果不寫(xiě)漓穿，瀏覽器就會(huì)進(jìn)入混雜模式嗤军，而這是我們要避免的。

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

下面這個(gè)流程是我們寫(xiě)入文件到展示文件的簡(jiǎn)單描述：

1. 我們使用編輯器編寫(xiě) HTML 文件
2. 保存編寫(xiě)的HTML文件
3. 使用瀏覽器打開(kāi)HTML文件
4. HTML文件在瀏覽器展示

亂碼產(chǎn)生的根源就在與第2步驟和第4步型雳。

比如我們?cè)诘诙嫉臅r(shí)候保存用gbk編碼格式保存了，在第4步瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)，它并不知道你的這個(gè)文件是使用什么編碼方式纠俭，于是自作主張使用了默認(rèn)解碼方式沿量。比如在Chrome打開(kāi)時(shí)默認(rèn)使用 ISO -8859的解碼方式，就導(dǎo)致編碼和解碼不匹配冤荆，產(chǎn)生亂碼朴则。

那如何規(guī)避這個(gè)問(wèn)題呢？即如何通知瀏覽器用什么方式解碼呢钓简？
最有效的方法在html 的 <head>里添加<meta charset="utf-8">乌妒，這句話的意思是告訴瀏覽器在打開(kāi)這個(gè)頁(yè)面的時(shí)侯直接用utf-8去解碼。 同理外邓，如果你的文件保存為gbk格式撤蚊，一定在文件里添加<meta charset="gbk">。

常見(jiàn)的瀏覽器有哪些损话，什么內(nèi)核

IE侦啸，Mozilla Firefox，Google Chrome丧枪，opera光涂，360，TT拧烦，搜狗忘闻，遨游，瑞影恋博，hotbrowser齐佳，等等
內(nèi)核
Trident：IE瀏覽器使用的內(nèi)核
Gecko：Netscape6開(kāi)始采用的內(nèi)核，后來(lái)的Mozilla FireFox也采用了該內(nèi)核
Presto： 目前Opera采用的內(nèi)核
Webkit：蘋(píng)果公司自己的內(nèi)核债沮，也是蘋(píng)果的Safari瀏覽器使用的內(nèi)核重虑。
Blink：Blink是一個(gè)由Google和Opera Software開(kāi)發(fā)的瀏覽器排版引擎，這一渲染引擎是開(kāi)源引擎WebKit中WebCore組件的一個(gè)分支秦士，并且在Chrome（28及往后版本）缺厉、Opera（15及往后版本）和Yandex瀏覽器中使用。

常見(jiàn)的標(biāo)簽以及使用場(chǎng)景

所有標(biāo)簽使用時(shí)有包含在<>內(nèi)