HTML 簡介

關于 HTML

超文本標記語言(HyperText Markup Language,簡稱 HTML)是一種用于創建網頁的標準標記語言。HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站用于設計令人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。網頁瀏覽器可以讀取HTML文件,并將其渲染成可視化網頁。

  • HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等
  • CSS樣式是表現。就像網頁的外衣,比如:標題字體、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現
  • JavaScript是用來實現網頁上的特殊效果。如:鼠標滑過彈出下拉菜單,或鼠標劃過表格的背景顏色改變,還有焦點新聞(圖片)的輪換。可以這么理解,有動畫的,有交互的一般都是用JavaScript來實現的

發展

年份 版本
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)即超文本標記語言或超文本鏈接標示語言,是目前網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。它告訴瀏覽器如何顯示內容

主要特點

  1. 簡易性:超級文本標記語言版本升級采用超集方式,從而更加靈活方便
  2. 可擴展性:超級文本標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言采取子類元素的方式,為系統擴展帶來保證
  3. 平臺無關性:雖然個人計算機大行其道,但使用MAC等其他機器的大有人在,超級文本標記語言可以使用在廣泛的平臺上,這也是萬維網(WWW)盛行的另一個原因
  4. 通用性:另外,HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器

XML

XML(EXtensible Markup Language),即可擴展標記語言,是用于網絡上數據交換的語言。它沒有標簽集,也沒有語法規則,但是它有句法規則

XML 與 HTML 的主要區別

  1. 目標:HTML的設計目標是顯示數據并集中于數據外觀,而XML的設計目標是描述數據并集中于數據的內容,它的顯示形式靠CSS或XSL幫完成
  2. 語法:HTML的標記不是所有的都需要成對出現,XML則要求所有的標記必須成對出現;HTML標記不區分大小寫,XML則大小敏感,即區分大小寫
  3. 更新:XML允許粒度更新,不必在XML文檔每次有局部改變時都發送整個文檔的內容,只有改變的元素才必須從服務器發送到客戶機,而HTML卻不支持這樣的功能
  4. 可讀性:HTML側重于網頁數據表現形式的定義和描述,欠缺對文檔數據含義的確切描述,不能適應對于日益增多的各類信息進行傳遞與存檔的需求。例如<h2>Apple</h2>,在瀏覽器中顯示的Apple,人們并不知道它具體是水果還是一個手機,HTML并不能解釋數據Apple的含義;而XML不會給大家這個錯覺如果描述的是水果中的蘋果的話它會很清楚的這樣表示<水果>Apple</水果>。所以說HTML的可讀性相對較差。
  5. 還有一點就是XML標記由架構或文檔的作者定義,并且是無限制的。HTML 標記則是預定義的;HTML 作者只能使用當前 HTML 標準所支持的標記

XHTML

XHTML(EXtensible HyperText Markup Language),即擴展超文本標簽語言,目標是取代HTML

XHTML 與 HTML 的主要區別

  1. XHTML是當前HTML版的繼承者,由于HTML的語法較為松散,對于許多其他設備的要求較高,因此就出現了由DTD定義規則,語法要求更加嚴格的XHTML
  2. XHTML與HTML的最大的變化在于所有標簽必須閉合
  3. XHTML中所有的標簽必須小寫
  4. XHTML 元素必須被正確地嵌套
  5. XHTML 文檔必須擁有根元素

怎樣理解 HTML 語義化

  • 語義化HTML是一種編寫HTML的方式,是指根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化),便于開發者閱讀和寫出更優雅的代碼的同時,讓瀏覽器的爬蟲和機器很好的解析
  • 優點
    • 為了在沒有CSS的情況下,頁面也能呈現出很好地內容結構、代碼結構;
    • 用戶體驗:例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用;
    • 有利于SEO(Search Engine Optimization),即搜索引擎優化:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關鍵字的權重;
    • 方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以有意義的方式來渲染網頁;
    • 便于團隊開發和維護,語義化更具可讀性,是下一步網頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。

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

  • 對于內容、結構與表現相分離,最早是在軟件開發架構理論中提出來的,XHTML的標簽只用來定義文檔的結構,所有涉及表現的東西通通剝離出來,把它放到一個單獨的文件里,這個單獨的文件就是CSS。
  • 運用
    • 寫HTML的時候先不管樣式,重點放在HTML的結構和語義化上,讓HTML能體現頁面結構或者內容。然后通過CSS進行樣式設置減少HTML和CSS契合度(即內容和樣式分離)
    • 寫JS的時候,盡量不要用JS去直接操作樣式,而是通過給元素添加刪除class來控制樣式變化(即行為分離)
    • HTML內不允許出現屬性樣式,盡量不要出現行內樣式
  • 優點
    1. 數據的多樣顯示。通過不同的樣式表適應不同的設備,做到內容與設備無關;
    2. 保持整個站點的視覺一致性變得非常簡單,修改樣式表就可以輕松改版;
    3. 由于結構清晰,數據的集成、更新和處理更加方便靈活;
    4. 更有意義的搜索。

常見的 meta 標簽

  • 元數據是(MetaData)是數據的的數據信息
  • <meta>標簽提供了HTML文檔的元數據。元數據不會顯示在頁面上,但是對于機器是可讀的。它可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
  • 屬性
屬性 說明
charset UTF-8(Unicode 字符編碼)、ISO-8859-1(拉丁字母表的字符編碼) 規定HTML文檔的字符編碼。文檔的編碼一定要與文件本身的編碼保持一致,否則會出現亂碼,推薦使用UTF-8編碼(charset屬性可以通過任意元素上的lang屬性來重寫)
context text 定義與 http-equiv 或 name 屬性相關的元信息
http-equiv content-type(規定文檔的字符編碼)、default-style(規定要使用的預定義的樣式表)、refresh(定義文檔自動刷新的時間間隔)、expires(指定網頁在緩存中的過期時間)、set-cookie 把 content 屬性關聯到 HTTP 頭部
name application-name(規定頁面所代表的 Web 應用程序的名稱)、author(規定文檔的作者的名字)、description(規定頁面的描述。搜索引擎會把這個描述顯示在搜索結果中)、generator(規定用于生成文檔的一個軟件包(不用于手寫頁面))、keywords(規定一個逗號分隔的關鍵詞列表 - 相關的網頁(告訴搜索引擎頁面是與什么相關的))、revised、others 把 content 屬性關聯到一個名稱
  • 注意:
    • <meta>標簽通常位于<head>區域內
    • 元數據通常以 名稱/值 對出現
    • 如果沒有提供name屬性,那么名稱/值對中的名稱會采用http-equiv屬性的值

SEO 優化

  • 頁面關鍵詞,每個網頁應具有描述該網頁內容的一組唯一的關鍵字。使用人們可能會搜索,并準確描述網頁上所提供信息的描述性和代表性關鍵字及短語。標記內容太短,則搜索引擎可能不會認為這些內容相關。另外標記不應超過 874 個字符
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
  • 頁面描述,每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽
<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 內的數字代表時間(秒),即多少時間后刷新。如果加 url,則會重定向到指定網頁(搜索引擎能夠自動檢測,也很容易被引擎視作誤導而受到懲罰)。
<!-- 定時跳轉(讓網頁多少秒刷新,或跳轉到其他網頁) -->
<meta http-equiv="refresh" content="5" />
<meta http-equiv="refresh" content="5; url=http://www.baidu.com" />
  • 其它
<!-- 作者、版權 -->
<meta name="author" content="littlematch" />
<meta name="copyright" content="" />

移動設備

  • 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">
<!-- 
`width=device-width` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊
width:寬度(數值 / device-width)(范圍從 200 到 10,000,默認為980 像素)
height:高度(數值 / device-height)(范圍從 223  到 10,000)
initial-scale:初始的縮放比例 (范圍從 >0 到 10)
minimum-scale:允許用戶縮放到的最小比例
maximum-scale:允許用戶縮放到的最大比例
user-scalable:用戶是否可以手動縮 (no,yes)
minimal-ui:可以在頁面加載時最小化上下狀態欄。(已棄用)
-->
  • 注意:很多人使用 initial-scale=1 到非響應式網站上,這會讓網站以100%寬度渲染,用戶需要手動移動頁面或者縮放。
    如果和 initial-scale=1 同時使用 user-scalable=no 或 maximum-scale=1,則用戶將不能放大/縮小網頁來看到全部的內容。
// WebApp全屏模式:偽裝app,離線應用
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 啟用 WebApp 全屏模式 -->

// 隱藏狀態欄/設置狀態欄顏色:只有在開啟WebApp全屏模式時才生效。content的值為 default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

// 添加到主屏后的標題
<meta name="apple-mobile-web-app-title" content="標題" />

// 忽略數字自動識別為電話號碼
<meta content="telephone=no" name="format-detection" />

// 忽略識別郵箱
<meta content="email=no" name="format-detection" />

// 添加智能 App 廣告條 Smart App Banner:告訴瀏覽器這個網站對應的app,并在頁面上顯示下載 banner
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />
  • 其它
<!-- 針對手持設備優化,主要是針對一些老的不識別 viewport 的瀏覽器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

網頁相關

  • 聲明編碼
<meta charset="utf-8">  
  • 優先使用 IE 最新版本和 Chrome
<!-- 強制瀏覽器按照特定的版本標準進行渲染。但不支持IE7及以下版本。如果是IE瀏覽器就用最新的IE渲染,如果是雙核瀏覽器就用Chrome內核 -->
<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 -->
  • 瀏覽器內核控制:國內瀏覽器很多都是雙內核(webkit 和 Trident),webkit 內核高速瀏覽,IE內核兼容網頁和舊版網站。而添加 meta 標簽的網站可以控制瀏覽器選擇何種內核渲染。
    • 國內雙核瀏覽器默認內核模式如下:1. 搜狗高速瀏覽器、QQ瀏覽器:IE內核(兼容模式)2. 360極速瀏覽器、遨游瀏覽器:Webkit內核(極速模式)
<meta name="renderer" content="webkit|ie-comp|ie-stand">
  • 禁止瀏覽器從本地計算機的緩存中訪問頁面內容:這樣設定,訪問者將無法脫機瀏覽。
<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 磁貼圖標 -->
  • 站點適配:主要用于PC-手機頁的對應關系
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!-- [wml|xhtml|html5] 根據手機頁的協議語言,選擇其中一種;url="url" 后者代表當前PC頁所對應的手機頁URL,兩者必須是一一對應關系。 -->
  • 轉碼申明:用百度打開網頁可能會對其進行轉碼(比如貼廣告),避免轉碼可添加如下 meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
  • 其它:
<!-- 期限(指定網頁在緩存中的過期時間) -->
<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=/" />

文檔聲明的作用?嚴格模式和混雜模式指什么?<!DOCTYPE html> 的作用?

  • 聲明叫做文件類型定義(DTD),聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪個規范來解析文檔。聲明必須在 HTML 文檔的第一行,這并不是一個 HTML 標簽
    • <!DOCTYPE>標簽沒有結束標簽
    • <!DOCTYPE>聲明不區分大小寫
  • 嚴格模式(Strict):又稱標準模式,是指瀏覽器按照 W3C 標準解析代碼。
    混雜模式(Transitional):又稱怪異模式或兼容模式,是指瀏覽器用自己的方式解析代碼
  • <!DOCTYPE html>的作用就是讓瀏覽器進入標準模式,使用最新的 HTML5標準來解析渲染頁面;如果不寫,瀏覽器就會進入混雜模式,而這是我們要避免的
  • 常用的 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,但允許框架集內容。

XHTML 1.0 Strict
  該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 
XML 來編寫標記。

XHTML 1.0 Transitional
  該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 
XML 來編寫標記。

XHTML 1.0 Frameset
  該 DTD 等同于 XHTML 1.0 Transitional,但允許框架集內容。

XHTML 1.1
  該 DTD 等同于 XHTML 1.0 Strict,但允許添加模型(例如提供對東亞語系的 ruby 支持)。

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

亂碼產生的原因

  • 亂碼產生的根本原因是文件保存的編碼格式和 meta 中指定的解碼格式不匹配導致的
  • 沒有指定 meta 的 charset
  • 注意:
    • 只有非英文和阿拉伯數字以外的字符才會出現亂碼
      • 純粹的英文不會出現亂碼問題,即使編碼方式和解碼方式不一致。因為 utf-8、gbk 對英文都是采用1個字節的編碼方式,并且使用了相同的碼字
    • 不同編碼集中字符占用的 byte 值不一樣
  • 常見編碼集:UTF-8、UTF-16、GBK、Unicode

如何解決?

  • 指定正確的 charset 值。在文件保存的時候,自己要清楚使用哪種編碼方式保存,并且規定 HTML 文檔的字符編碼。
    • 比如文件保存為 utf-8 格式,那么就要在<head>里添加<meta charset="utf-8">,告訴瀏覽器打開此頁面時直接使用 utf-8 進行解碼。如果文件保存為 gbk 格式,則添加 <meta charset="gbk">

常見的瀏覽器與內核

常見的瀏覽器

  • IE、Mozilla Firefox、Google Chrome、Opera、360、QQ、搜狗、獵豹、遨游等

瀏覽器內核

瀏覽器內核是什么?

瀏覽器內核可以分成兩部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它負責取得網頁的內容(HTML、XML、圖像等等)、整理信息(例如加入CSS等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。JS 引擎則是解析 Javascript 語言,執行 Javascript 語言來實現網頁的動態效果。最開始渲染引擎和 JS 引擎沒有并沒有區分的很明確,后來 JS 引擎越來越獨立,內核就傾向于只指渲染引擎

瀏覽器內核主要指的是瀏覽器的渲染引擎,2013 年以前,代表有 Trident(IE),Gecko(Firefox),Webkit(Safari Chrome 等)以及 Presto(Opera)。2013 年,谷歌開始研發 Blink 引擎,Chrome 28 以后開始使用,而 Opera 則放棄了自主研發的 Presto 引擎,投入谷歌懷抱,和谷歌一起研發 Blink 引擎,國內各種 Chrome系的瀏覽器(360、UC、QQ、2345 等等)也紛紛放棄 Webkit,投入 Blink 的懷抱。

Trident

Trident:IE瀏覽器使用的內核,該內核在 1997 年的 IE4 種首次被采用,是微軟在 Mosaic(“馬賽克”,這是人類歷史上第一個瀏覽器,從此網頁可以在圖形界面的窗口瀏覽) 代碼的基礎之上修改而來的,并沿用到 IE11,也被普遍稱作“IE內核”

Trident 實際上是一款開放的內核,其接口內核設計的相當成熟,因此才有許多采用 IE 內核而非 IE 的瀏覽器(殼瀏覽器)涌現。由于 IE 本身的 “壟斷性”,而使得 Trident 內核的長期一家獨大。國內很多的雙核瀏覽器的其中一核便是 Trident,美其名曰 “兼容模式”。

Gecko

Gecko(Firefox 內核):Netscape6 開始采用的內核,后來的 Mozilla FireFox(火狐瀏覽器)也采用了該內核,Gecko 的特點是代碼完全公開,因此,其可開發程度很高,全世界的程序員都可以為其編寫代碼,增加功能。因為這是個開源內核,因此受到許多人的青睞,Gecko 內核的瀏覽器也很多,這也是 Gecko 內核雖然年輕但市場占有率能夠迅速提高的重要原因

Webkit

一提到 Webkit,首先想到的便是 Chrome,可以說,Chrome 讓 Webkit 內核深入人心,殊不知,Webkit 的鼻祖其實是 Safari。現在很多人錯誤地把 Webkit 叫做 Chrome 內核(即使 Chrome 內核已經是 Blink 了)。

WebKit 前身是 KDE 小組的 KHTML 引擎,可以說 WebKit 是 KHTML 的一個開源的分支。當年蘋果在比較了 Gecko 和 KHTML 后,選擇了后者來做引擎開發,是因為 KHTML 擁有清晰的源碼結構和極快的渲染速度。

Webkit 內核可以說是以硬件盈利為主的蘋果公司給軟件行業的最大貢獻之一。隨后,2008 年谷歌公司發布 Chrome 瀏覽器,采用的 Chromium 內核便 fork 了 Webkit。

Chromeium/Bink

2008 年,谷歌公司發布了 Chrome 瀏覽器,瀏覽器使用的內核被命名為 Chromium。

谷歌公司還研發了自己的 Javascript 引擎,V8,極大地提高了 Javascript 的運算速度。

Chromium 問世后,帶動了國產瀏覽器行業的發展。一些基于 Chromium 的單核,雙核瀏覽器如雨后春筍般拔地而起,例如 搜狗、360、QQ瀏覽器等等,無一不是套著不同的外殼用著相同的內核。

2013年開始,Google 在 WebKit 代碼的基礎上研發更加快速和簡約的渲染引擎,并逐步脫離 WebKit 的影響,創造一個完全獨立的 Blink 引擎。Blink 引擎問世后,國產各種 Chrome 系的瀏覽器也紛紛投入 Blink 的懷抱,可以在瀏覽器地址欄輸入 chrome://version 進行查看

Presto

Presto 是挪威產瀏覽器 Opera 的 “前任” 內核,為何說是 “前任”,因為最新的 Opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。

Opera 的一個里程碑作品是 Opera7.0,因為它使用了 Opera Software 自主開發的 Presto 渲染引擎,取代了舊版 Opera 4 至 6 版本使用的 Elektra 排版引擎。該款引擎的特點就是渲染速度的優化達到了極致,然而代價是犧牲了網頁的兼容性。

Presto 與開源的 WebKit 和經過谷歌加持的 Chromium 系列相比毫無推廣上的優勢,這是 Opera 轉投 WebKit 的主要原因,并且使用 WebKit 內核的 Opera 瀏覽器可以兼容谷歌 Chrome 瀏覽器海量的插件資源。但是換內核的代價對于 Opera 來說過于慘痛。使用谷歌的 WebKit 內核之后,原本快速,輕量化,穩定的 Opera 瀏覽器變得異常的卡頓,而且表現不穩定,造成了眾多的用戶流失。

KHTML

KHTML,是HTML網頁排版引擎之一,由KDE所開發。KDE系統自KDE2版起,在檔案及網頁瀏覽器使用了KHTML引擎。該引擎以C++編程語言所寫,并以LGPL授權,支援大多數網頁瀏覽標準。由于微軟的Internet Explorer的占有率相當高,不少以FrontPage制作的網頁均包含只有IE才能讀取的非標準語法,為了使KHTML引擎可呈現的網頁達到最多,部分IE專屬的語法也一并支援。KHTML擁有速度快捷的優點,但對錯誤語法的容忍度則比Mozilla產品所使用的Gecko引擎小

移動端

移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。

目前移動設備瀏覽器上常用的內核有 Webkit,Blink,Trident,Gecko 等。其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit。Android 4.4 之前的 Android 系統瀏覽器內核是 WebKit,Android4.4 系統瀏覽器切換到了Chromium,內核是 Webkit 的分支 Blink。Windows Phone 8 系統瀏覽器內核是 Trident。

參考

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容