關(guān)于 HTML
超文本標(biāo)記語言（HyperText Markup Language性誉，簡稱 HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)净嘀，常與CSS狂魔、JavaScript一起被眾多網(wǎng)站用于設(shè)計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面凌彬。網(wǎng)頁瀏覽器可以讀取HTML文件沸柔，并將其渲染成可視化網(wǎng)頁。
- HTML是網(wǎng)頁內(nèi)容的載體饿序。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息勉失，可以包含文字、圖片原探、視頻等
- CSS樣式是表現(xiàn)乱凿。就像網(wǎng)頁的外衣顽素，比如：標(biāo)題字體、顏色變化徒蟆，或為標(biāo)題加入背景圖片胁出、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)
- JavaScript是用來實現(xiàn)網(wǎng)頁上的特殊效果段审。如：鼠標(biāo)滑過彈出下拉菜單全蝶，或鼠標(biāo)劃過表格的背景顏色改變，還有焦點新聞（圖片）的輪換寺枉∫忠可以這么理解，有動畫的姥闪，有交互的一般都是用JavaScript來實現(xiàn)的
發(fā)展
| 年份 | 版本 |
|---|---|
| 1997.1 | HTML 3.2 |
| 1997.12 | HTML 4.0 |
| 1999.12 | HTML 4.01 |
| 2014.10 | HTML 5 |
HTML vs XML vs XHTML
HTML
HTML（Hyper Text Markup Language）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言始苇，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言筐喳。它告訴瀏覽器如何顯示內(nèi)容
主要特點
- 簡易性：超級文本標(biāo)記語言版本升級采用超集方式催式，從而更加靈活方便
- 可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求避归，超級文本標(biāo)記語言采取子類元素的方式荣月，為系統(tǒng)擴(kuò)展帶來保證
- 平臺無關(guān)性：雖然個人計算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在梳毙，超級文本標(biāo)記語言可以使用在廣泛的平臺上哺窄，這也是萬維網(wǎng)（WWW）盛行的另一個原因
- 通用性：另外，HTML是網(wǎng)絡(luò)的通用語言顿天，一種簡單堂氯、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面牌废，這些頁面可以被網(wǎng)上任何其他人瀏覽到咽白，無論使用的是什么類型的電腦或瀏覽器
XML
XML（EXtensible Markup Language），即可擴(kuò)展標(biāo)記語言鸟缕，是用于網(wǎng)絡(luò)上數(shù)據(jù)交換的語言晶框。它沒有標(biāo)簽集，也沒有語法規(guī)則懂从，但是它有句法規(guī)則
XML 與 HTML 的主要區(qū)別
- 目標(biāo)：HTML的設(shè)計目標(biāo)是顯示數(shù)據(jù)并集中于數(shù)據(jù)外觀授段，而XML的設(shè)計目標(biāo)是描述數(shù)據(jù)并集中于數(shù)據(jù)的內(nèi)容，它的顯示形式靠CSS或XSL幫完成
- 語法：HTML的標(biāo)記不是所有的都需要成對出現(xiàn)番甩，XML則要求所有的標(biāo)記必須成對出現(xiàn)侵贵；HTML標(biāo)記不區(qū)分大小寫，XML則大小敏感缘薛，即區(qū)分大小寫
- 更新：XML允許粒度更新窍育，不必在XML文檔每次有局部改變時都發(fā)送整個文檔的內(nèi)容卡睦，只有改變的元素才必須從服務(wù)器發(fā)送到客戶機(jī)，而HTML卻不支持這樣的功能
- 可讀性：HTML側(cè)重于網(wǎng)頁數(shù)據(jù)表現(xiàn)形式的定義和描述漱抓，欠缺對文檔數(shù)據(jù)含義的確切描述表锻，不能適應(yīng)對于日益增多的各類信息進(jìn)行傳遞與存檔的需求。例如
<h2>Apple</h2>,在瀏覽器中顯示的Apple乞娄，人們并不知道它具體是水果還是一個手機(jī)瞬逊，HTML并不能解釋數(shù)據(jù)Apple的含義；而XML不會給大家這個錯覺如果描述的是水果中的蘋果的話它會很清楚的這樣表示<水果>Apple</水果>仪或。所以說HTML的可讀性相對較差确镊。 - 還有一點就是XML標(biāo)記由架構(gòu)或文檔的作者定義，并且是無限制的溶其。HTML 標(biāo)記則是預(yù)定義的骚腥；HTML 作者只能使用當(dāng)前 HTML 標(biāo)準(zhǔn)所支持的標(biāo)記
XHTML
XHTML（EXtensible HyperText Markup Language）,即擴(kuò)展超文本標(biāo)簽語言，目標(biāo)是取代HTML
XHTML 與 HTML 的主要區(qū)別
- XHTML是當(dāng)前HTML版的繼承者瓶逃，由于HTML的語法較為松散，對于許多其他設(shè)備的要求較高廓块，因此就出現(xiàn)了由DTD定義規(guī)則,語法要求更加嚴(yán)格的XHTML
- XHTML與HTML的最大的變化在于所有標(biāo)簽必須閉合
- XHTML中所有的標(biāo)簽必須小寫
- XHTML 元素必須被正確地嵌套
- XHTML 文檔必須擁有根元素
怎樣理解 HTML 語義化
- 語義化HTML是一種編寫HTML的方式厢绝，是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）带猴，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時昔汉，讓瀏覽器的爬蟲和機(jī)器很好的解析
-
優(yōu)點：
- 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)拴清、代碼結(jié)構(gòu)靶病；
- 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息口予、label標(biāo)簽的活用娄周；
- 有利于SEO（Search Engine Optimization），即搜索引擎優(yōu)化：和搜索引擎建立良好溝通沪停，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重煤辨；
- 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器木张、移動設(shè)備）以有意義的方式來渲染網(wǎng)頁众辨；
- 便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性舷礼，是下一步網(wǎng)頁的重要動向鹃彻，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化妻献。
怎樣理解內(nèi)容與樣式分離的原則
- 對于內(nèi)容蛛株、結(jié)構(gòu)與表現(xiàn)相分離团赁，最早是在軟件開發(fā)架構(gòu)理論中提出來的，XHTML的標(biāo)簽只用來定義文檔的結(jié)構(gòu)泳挥，所有涉及表現(xiàn)的東西通通剝離出來然痊，把它放到一個單獨的文件里，這個單獨的文件就是CSS屉符。
-
運用：
- 寫HTML的時候先不管樣式剧浸，重點放在HTML的結(jié)構(gòu)和語義化上，讓HTML能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容矗钟。然后通過CSS進(jìn)行樣式設(shè)置減少HTML和CSS契合度（即內(nèi)容和樣式分離）
- 寫JS的時候唆香，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除
class來控制樣式變化（即行為分離） - HTML內(nèi)不允許出現(xiàn)屬性樣式吨艇，盡量不要出現(xiàn)行內(nèi)樣式
-
優(yōu)點：
- 數(shù)據(jù)的多樣顯示躬它。通過不同的樣式表適應(yīng)不同的設(shè)備，做到內(nèi)容與設(shè)備無關(guān)东涡；
- 保持整個站點的視覺一致性變得非常簡單冯吓，修改樣式表就可以輕松改版；
- 由于結(jié)構(gòu)清晰疮跑，數(shù)據(jù)的集成组贺、更新和處理更加方便靈活；
- 更有意義的搜索祖娘。
常見的 meta 標(biāo)簽
- 元數(shù)據(jù)是（MetaData）是數(shù)據(jù)的的數(shù)據(jù)信息
-
<meta>標(biāo)簽提供了HTML文檔的元數(shù)據(jù)失尖。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的渐苏。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面）掀潮，搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)琼富。 - 屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| charset |
UTF-8（Unicode 字符編碼）仪吧、ISO-8859-1（拉丁字母表的字符編碼） |
規(guī)定HTML文檔的字符編碼。文檔的編碼一定要與文件本身的編碼保持一致公黑，否則會出現(xiàn)亂碼邑商，推薦使用UTF-8編碼（charset屬性可以通過任意元素上的lang屬性來重寫） |
| context | text | 定義與 http-equiv 或 name 屬性相關(guān)的元信息 |
| http-equiv | content-type（規(guī)定文檔的字符編碼）、default-style（規(guī)定要使用的預(yù)定義的樣式表）凡蚜、refresh（定義文檔自動刷新的時間間隔）人断、expires（指定網(wǎng)頁在緩存中的過期時間）、set-cookie | 把 content 屬性關(guān)聯(lián)到 HTTP 頭部 |
| name | application-name（規(guī)定頁面所代表的 Web 應(yīng)用程序的名稱）朝蜘、author（規(guī)定文檔的作者的名字）恶迈、description（規(guī)定頁面的描述。搜索引擎會把這個描述顯示在搜索結(jié)果中）、generator(規(guī)定用于生成文檔的一個軟件包（不用于手寫頁面））暇仲、keywords（規(guī)定一個逗號分隔的關(guān)鍵詞列表 - 相關(guān)的網(wǎng)頁（告訴搜索引擎頁面是與什么相關(guān)的））步做、revised、others | 把 content 屬性關(guān)聯(lián)到一個名稱 |
- 注意：
-
<meta>標(biāo)簽通常位于<head>區(qū)域內(nèi) - 元數(shù)據(jù)通常以 名稱／值 對出現(xiàn)
- 如果沒有提供
name屬性奈附，那么名稱／值對中的名稱會采用http-equiv屬性的值
-
SEO 優(yōu)化
- 頁面關(guān)鍵詞全度，每個網(wǎng)頁應(yīng)具有描述該網(wǎng)頁內(nèi)容的一組唯一的關(guān)鍵字。使用人們可能會搜索斥滤，并準(zhǔn)確描述網(wǎng)頁上所提供信息的描述性和代表性關(guān)鍵字及短語将鸵。標(biāo)記內(nèi)容太短，則搜索引擎可能不會認(rèn)為這些內(nèi)容相關(guān)佑颇。另外標(biāo)記不應(yīng)超過 874 個字符
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
- 頁面描述顶掉，每個網(wǎng)頁都應(yīng)有一個不超過 150 個字符且能準(zhǔn)確反映網(wǎng)頁內(nèi)容的描述標(biāo)簽
<meta name="description" content="Free Web tutorials on HTML and CSS" />
-
搜索引擎索引方式，robotterms是一組使用逗號
,分割的值挑胸，通常有如下幾種取值：none痒筒，noindex，nofollow茬贵，all簿透，index 和 follow。確保正確使用 nofollow 和 noindex 屬性值解藻。
<meta name="robots" content="index, follow" />
<!--
all：文件將被檢索萎战，且頁面上的鏈接可以被查詢；
none：文件將不被檢索舆逃，且頁面上的鏈接不可以被查詢；
index：文件將被檢索戳粒； follow：頁面上的鏈接可以被查詢路狮；
noindex：文件將不被檢索； nofollow：頁面上的鏈接不可以被查詢蔚约。
-->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />
- 頁面重定向和刷新：content 內(nèi)的數(shù)字代表時間（秒）奄妨，即多少時間后刷新。如果加 url苹祟，則會重定向到指定網(wǎng)頁（搜索引擎能夠自動檢測砸抛，也很容易被引擎視作誤導(dǎo)而受到懲罰）。
<!-- 定時跳轉(zhuǎn)（讓網(wǎng)頁多少秒刷新树枫，或跳轉(zhuǎn)到其他網(wǎng)頁） -->
<meta http-equiv="refresh" content="5" />
<meta http-equiv="refresh" content="5; url=http://www.baidu.com" />
- 其它：
<!-- 作者直焙、版權(quán) -->
<meta name="author" content="littlematch" />
<meta name="copyright" content="" />
移動設(shè)備
- 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 到 10,000，默認(rèn)為980 像素）
height：高度（數(shù)值 / device-height）（范圍從 223 到 10,000）
initial-scale：初始的縮放比例 （范圍從 >0 到 10）
minimum-scale：允許用戶縮放到的最小比例
maximum-scale：允許用戶縮放到的最大比例
user-scalable：用戶是否可以手動縮 (no蜕煌，yes)
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)容傀广。
// WebApp全屏模式：偽裝app颁独，離線應(yīng)用
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 啟用 WebApp 全屏模式 -->
// 隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色：只有在開啟WebApp全屏模式時才生效。content的值為 default | black | black-translucent 伪冰。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
// 添加到主屏后的標(biāo)題
<meta name="apple-mobile-web-app-title" content="標(biāo)題" />
// 忽略數(shù)字自動識別為電話號碼
<meta content="telephone=no" name="format-detection" />
// 忽略識別郵箱
<meta content="email=no" name="format-detection" />
// 添加智能 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" />
- 其它
<!-- 針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別 viewport 的瀏覽器贮聂，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
meta name="MobileOptimized" content="320">
<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
網(wǎng)頁相關(guān)
- 聲明編碼
<meta charset="utf-8">
- 優(yōu)先使用 IE 最新版本和 Chrome
<!-- 強(qiáng)制瀏覽器按照特定的版本標(biāo)準(zhǔn)進(jìn)行渲染靠柑。但不支持IE7及以下版本。如果是IE瀏覽器就用最新的IE渲染吓懈，如果是雙核瀏覽器就用Chrome內(nèi)核 -->
<meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1' />
<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)核渲染隔嫡。
- 國內(nèi)雙核瀏覽器默認(rèn)內(nèi)核模式如下：1. 搜狗高速瀏覽器、QQ瀏覽器：IE內(nèi)核（兼容模式）2. 360極速瀏覽器甘穿、遨游瀏覽器：Webkit內(nèi)核（極速模式）
<meta name="renderer" content="webkit|ie-comp|ie-stand">
- 禁止瀏覽器從本地計算機(jī)的緩存中訪問頁面內(nèi)容：這樣設(shè)定腮恩，訪問者將無法脫機(jī)瀏覽。
<meta http-equiv="Pragma" content="no-cache">
- Windows 8
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標(biāo) -->
- 站點適配：主要用于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)系募判。 -->
- 轉(zhuǎn)碼申明：用百度打開網(wǎng)頁可能會對其進(jìn)行轉(zhuǎn)碼（比如貼廣告）荡含，避免轉(zhuǎn)碼可添加如下 meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
- 其它：
<!-- 期限（指定網(wǎng)頁在緩存中的過期時間） -->
<meta http-equiv="Expires" Content="0" />
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800" />
<!-- cookie -->
<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/" />
文檔聲明的作用？嚴(yán)格模式和混雜模式指什么届垫？<!DOCTYPE html> 的作用?
- 聲明叫做文件類型定義（DTD）释液，聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔敦腔。聲明必須在 HTML 文檔的第一行均澳，這并不是一個 HTML 標(biāo)簽
-
<!DOCTYPE>標(biāo)簽沒有結(jié)束標(biāo)簽 -
<!DOCTYPE>聲明不區(qū)分大小寫
-
- 嚴(yán)格模式（Strict）：又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼。
混雜模式（Transitional）：又稱怪異模式或兼容模式找前，是指瀏覽器用自己的方式解析代碼 -
<!DOCTYPE html>的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式糟袁，使用最新的 HTML5標(biāo)準(zhǔn)來解析渲染頁面；如果不寫躺盛，瀏覽器就會進(jìn)入混雜模式项戴，而這是我們要避免的 - 常用的 DOCTYPE 聲明：
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）槽惫。不允許框架集（Framesets）
HTML 4.01 Transitional
該 DTD 包含所有 HTML 元素和屬性周叮，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）界斜。
HTML 4.01 Frameset
該 DTD 等同于 HTML 4.01 Transitional仿耽，但允許框架集內(nèi)容。
XHTML 1.0 Strict
該 DTD 包含所有 HTML 元素和屬性各薇，但不包括展示性的和棄用的元素（比如 font）项贺。不允許框架集（Framesets）。必須以格式正確的
XML 來編寫標(biāo)記峭判。
XHTML 1.0 Transitional
該 DTD 包含所有 HTML 元素和屬性开缎，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）林螃。必須以格式正確的
XML 來編寫標(biāo)記奕删。
XHTML 1.0 Frameset
該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內(nèi)容疗认。
XHTML 1.1
該 DTD 等同于 XHTML 1.0 Strict完残，但允許添加模型（例如提供對東亞語系的 ruby 支持）。
瀏覽器亂碼的原因是什么横漏？如何解決
亂碼產(chǎn)生的原因
- 亂碼產(chǎn)生的根本原因是文件保存的編碼格式和 meta 中指定的解碼格式不匹配導(dǎo)致的
- 沒有指定 meta 的 charset
- 注意：
- 只有非英文和阿拉伯?dāng)?shù)字以外的字符才會出現(xiàn)亂碼
- 純粹的英文不會出現(xiàn)亂碼問題坏怪，即使編碼方式和解碼方式不一致。因為 utf-8绊茧、gbk 對英文都是采用1個字節(jié)的編碼方式，并且使用了相同的碼字
- 不同編碼集中字符占用的 byte 值不一樣
- 只有非英文和阿拉伯?dāng)?shù)字以外的字符才會出現(xiàn)亂碼
- 常見編碼集：UTF-8打掘、UTF-16华畏、GBK、Unicode
如何解決尊蚁？
-
指定正確的 charset 值亡笑。在文件保存的時候，自己要清楚使用哪種編碼方式保存横朋，并且規(guī)定 HTML 文檔的字符編碼仑乌。
- 比如文件保存為 utf-8 格式，那么就要在
<head>里添加<meta charset="utf-8">，告訴瀏覽器打開此頁面時直接使用 utf-8 進(jìn)行解碼晰甚。如果文件保存為 gbk 格式衙传，則添加<meta charset="gbk">
- 比如文件保存為 utf-8 格式，那么就要在
常見的瀏覽器與內(nèi)核
常見的瀏覽器
- IE姐扮、Mozilla Firefox匀谣、Google Chrome爬骤、Opera幢痘、360向拆、QQ似芝、搜狗蛹磺、獵豹锹安、遨游等
瀏覽器內(nèi)核
瀏覽器內(nèi)核是什么畅买？
瀏覽器內(nèi)核可以分成兩部分：渲染引擎（layout engineer 或者 Rendering Engine）和 JS 引擎并闲。它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML谷羞、圖像等等）帝火、整理信息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式洒宝，然后會輸出至顯示器或打印機(jī)购公。瀏覽器內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同雁歌。所有網(wǎng)頁瀏覽器宏浩、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核靠瞎。JS 引擎則是解析 Javascript 語言比庄，執(zhí)行 Javascript 語言來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和 JS 引擎沒有并沒有區(qū)分的很明確乏盐，后來 JS 引擎越來越獨立佳窑，內(nèi)核就傾向于只指渲染引擎。
瀏覽器內(nèi)核主要指的是瀏覽器的渲染引擎父能，2013 年以前神凑，代表有 Trident（IE），Gecko（Firefox）何吝，Webkit（Safari Chrome 等）以及 Presto（Opera)溉委。2013 年，谷歌開始研發(fā) Blink 引擎爱榕，Chrome 28 以后開始使用瓣喊，而 Opera 則放棄了自主研發(fā)的 Presto 引擎，投入谷歌懷抱黔酥，和谷歌一起研發(fā) Blink 引擎藻三，國內(nèi)各種 Chrome系的瀏覽器（360洪橘、UC、QQ棵帽、2345 等等）也紛紛放棄 Webkit熄求，投入 Blink 的懷抱。
Trident
Trident：IE瀏覽器使用的內(nèi)核岖寞，該內(nèi)核在 1997 年的 IE4 種首次被采用抡四，是微軟在 Mosaic（“馬賽克”，這是人類歷史上第一個瀏覽器仗谆，從此網(wǎng)頁可以在圖形界面的窗口瀏覽） 代碼的基礎(chǔ)之上修改而來的指巡，并沿用到 IE11，也被普遍稱作“IE內(nèi)核”
Trident 實際上是一款開放的內(nèi)核隶垮，其接口內(nèi)核設(shè)計的相當(dāng)成熟藻雪，因此才有許多采用 IE 內(nèi)核而非 IE 的瀏覽器（殼瀏覽器）涌現(xiàn)。由于 IE 本身的 “壟斷性”狸吞，而使得 Trident 內(nèi)核的長期一家獨大勉耀。國內(nèi)很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 “兼容模式”蹋偏。
Gecko
Gecko（Firefox 內(nèi)核）：Netscape6 開始采用的內(nèi)核便斥，后來的 Mozilla FireFox（火狐瀏覽器）也采用了該內(nèi)核，Gecko 的特點是代碼完全公開威始，因此枢纠，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼黎棠，增加功能晋渺。因為這是個開源內(nèi)核，因此受到許多人的青睞脓斩，Gecko 內(nèi)核的瀏覽器也很多木西，這也是 Gecko 內(nèi)核雖然年輕但市場占有率能夠迅速提高的重要原因
Webkit
一提到 Webkit，首先想到的便是 Chrome随静，可以說八千，Chrome 讓 Webkit 內(nèi)核深入人心，殊不知燎猛，Webkit 的鼻祖其實是 Safari〉鸪螅現(xiàn)在很多人錯誤地把 Webkit 叫做 Chrome 內(nèi)核（即使 Chrome 內(nèi)核已經(jīng)是 Blink 了）。
WebKit 前身是 KDE 小組的 KHTML 引擎扛门，可以說 WebKit 是 KHTML 的一個開源的分支。當(dāng)年蘋果在比較了 Gecko 和 KHTML 后纵寝，選擇了后者來做引擎開發(fā)论寨，是因為 KHTML 擁有清晰的源碼結(jié)構(gòu)和極快的渲染速度星立。
Webkit 內(nèi)核可以說是以硬件盈利為主的蘋果公司給軟件行業(yè)的最大貢獻(xiàn)之一。隨后葬凳，2008 年谷歌公司發(fā)布 Chrome 瀏覽器绰垂，采用的 Chromium 內(nèi)核便 fork 了 Webkit。
Chromeium/Bink
2008 年火焰，谷歌公司發(fā)布了 Chrome 瀏覽器劲装，瀏覽器使用的內(nèi)核被命名為 Chromium。
谷歌公司還研發(fā)了自己的 Javascript 引擎昌简，V8占业，極大地提高了 Javascript 的運算速度。
Chromium 問世后纯赎，帶動了國產(chǎn)瀏覽器行業(yè)的發(fā)展谦疾。一些基于 Chromium 的單核，雙核瀏覽器如雨后春筍般拔地而起犬金，例如 搜狗念恍、360、QQ瀏覽器等等晚顷，無一不是套著不同的外殼用著相同的內(nèi)核峰伙。
2013年開始，Google 在 WebKit 代碼的基礎(chǔ)上研發(fā)更加快速和簡約的渲染引擎该默，并逐步脫離 WebKit 的影響瞳氓，創(chuàng)造一個完全獨立的 Blink 引擎。Blink 引擎問世后权均，國產(chǎn)各種 Chrome 系的瀏覽器也紛紛投入 Blink 的懷抱顿膨，可以在瀏覽器地址欄輸入 chrome://version 進(jìn)行查看
Presto
Presto 是挪威產(chǎn)瀏覽器 Opera 的 “前任” 內(nèi)核，為何說是 “前任”叽赊，因為最新的 Opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營恋沃。
Opera 的一個里程碑作品是 Opera7.0，因為它使用了 Opera Software 自主開發(fā)的 Presto 渲染引擎必指，取代了舊版 Opera 4 至 6 版本使用的 Elektra 排版引擎囊咏。該款引擎的特點就是渲染速度的優(yōu)化達(dá)到了極致，然而代價是犧牲了網(wǎng)頁的兼容性塔橡。
Presto 與開源的 WebKit 和經(jīng)過谷歌加持的 Chromium 系列相比毫無推廣上的優(yōu)勢梅割，這是 Opera 轉(zhuǎn)投 WebKit 的主要原因，并且使用 WebKit 內(nèi)核的 Opera 瀏覽器可以兼容谷歌 Chrome 瀏覽器海量的插件資源葛家。但是換內(nèi)核的代價對于 Opera 來說過于慘痛户辞。使用谷歌的 WebKit 內(nèi)核之后，原本快速癞谒，輕量化底燎，穩(wěn)定的 Opera 瀏覽器變得異常的卡頓刃榨，而且表現(xiàn)不穩(wěn)定，造成了眾多的用戶流失双仍。
KHTML
KHTML枢希，是HTML網(wǎng)頁排版引擎之一，由KDE所開發(fā)朱沃。KDE系統(tǒng)自KDE2版起苞轿，在檔案及網(wǎng)頁瀏覽器使用了KHTML引擎。該引擎以C++編程語言所寫逗物，并以LGPL授權(quán)搬卒，支援大多數(shù)網(wǎng)頁瀏覽標(biāo)準(zhǔn)。由于微軟的Internet Explorer的占有率相當(dāng)高敬察，不少以FrontPage制作的網(wǎng)頁均包含只有IE才能讀取的非標(biāo)準(zhǔn)語法秀睛，為了使KHTML引擎可呈現(xiàn)的網(wǎng)頁達(dá)到最多，部分IE專屬的語法也一并支援莲祸。KHTML擁有速度快捷的優(yōu)點蹂安，但對錯誤語法的容忍度則比Mozilla產(chǎn)品所使用的Gecko引擎小
移動端
移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
目前移動設(shè)備瀏覽器上常用的內(nèi)核有 Webkit锐帜，Blink田盈，Trident，Gecko 等缴阎。其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit允瞧。Android 4.4 之前的 Android 系統(tǒng)瀏覽器內(nèi)核是 WebKit，Android4.4 系統(tǒng)瀏覽器切換到了Chromium蛮拔，內(nèi)核是 Webkit 的分支 Blink述暂。Windows Phone 8 系統(tǒng)瀏覽器內(nèi)核是 Trident。
