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

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

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

3. xml即時可擴(kuò)展標(biāo)記語言（Extensible Markup Language），是一種跨平臺語言，編碼更自由，可以自由創(chuàng)建標(biāo)簽。

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

怎樣理解 HTML 語義化

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

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

（1）網(wǎng)頁分離

一個網(wǎng)頁分為三個部分：Html——結(jié)構(gòu)，css——表現(xiàn)，javascrip——行為。內(nèi)容也就是html，樣式也就是css。所以內(nèi)容和樣式的分離，就是指在網(wǎng)頁編碼的過程中，要將html和css兩大部分分開。

（2）如何實(shí)現(xiàn)

寫HTML的時候先不管樣式，重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓HTML能提現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,，然后進(jìn)行 css 樣式設(shè)置，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） ，寫JS的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）。

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

• 瀏覽器加載網(wǎng)頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當(dāng)中，頁面體積容量變得更小。
• 網(wǎng)頁修改設(shè)計時，效率、省時。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記，到CSS里找到相應(yīng)的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構(gòu)和其他部分的樣式。
  典型的應(yīng)用就是網(wǎng)頁換膚，使用相同的 html 結(jié)構(gòu)，不同的 css 樣式。
• 更好地被搜索引擎收錄?；趦?nèi)容與樣式分離的原則，html的語義化就是首要考慮的,網(wǎng)頁中語義化的標(biāo)簽代碼就會更加適合搜索引擎。
• css樣式的分離，它可以根據(jù)不同的瀏覽器，達(dá)到顯示效果的統(tǒng)一。保證網(wǎng)頁架構(gòu)不變形的前提下，放心在不同瀏覽器渲染顯示樣式。

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

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

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

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

用于SEO優(yōu)化

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

移動設(shè)備

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

width=device-width 會導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(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 用戶是否可以手動縮(user-scalable=no 或者 user-scalable=yes)

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

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

文檔聲明的作用?

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

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

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

<!doctype html> 的作用?

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

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

下面這個流程是我們寫入文件到展示文件的簡單描述：

1. 我們使用編輯器編寫 HTML 文件
2. 保存編寫的HTML文件
3. 使用瀏覽器打開HTML文件
4. HTML文件在瀏覽器展示

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

比如我們在第二布的時候保存用gbk編碼格式保存了，在第4步瀏覽器打開網(wǎng)頁時，它并不知道你的這個文件是使用什么編碼方式，于是自作主張使用了默認(rèn)解碼方式。比如在Chrome打開時默認(rèn)使用 ISO -8859的解碼方式，就導(dǎo)致編碼和解碼不匹配，產(chǎn)生亂碼。

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

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

IE，Mozilla Firefox，Google Chrome，opera，360，TT，搜狗，遨游，瑞影，hotbrowser，等等
內(nèi)核
Trident：IE瀏覽器使用的內(nèi)核
Gecko：Netscape6開始采用的內(nèi)核，后來的Mozilla FireFox也采用了該內(nèi)核
Presto： 目前Opera采用的內(nèi)核
Webkit：蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。
Blink：Blink是一個由Google和Opera Software開發(fā)的瀏覽器排版引擎，這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。

常見的標(biāo)簽以及使用場景

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