HTML知識(shí)點(diǎn)

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

1. HTML是什么?

  • 描述網(wǎng)頁的一種語言
  • 超文本標(biāo)記語言 (Hyper Text Markup Language)
  • HTML 被設(shè)計(jì)用來顯示數(shù)據(jù)。
  • 不是一種編程語言,而是一種標(biāo)記語言 (markup language)
  • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
  • HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

2. XML是什么?

  • 指可擴(kuò)展標(biāo)記語言(EXtensible Markup Language)
  • XML 被設(shè)計(jì)用來傳輸和存儲(chǔ)數(shù)據(jù),而非顯示數(shù)據(jù)。
  • 是一種標(biāo)記語言,很類似 HTML
  • XML 標(biāo)簽沒有被預(yù)定義,需要自行定義標(biāo)簽。
  • XML 被設(shè)計(jì)為具有自我描述性。
  • XML 是 W3C 的推薦標(biāo)準(zhǔn)

3. XHTML 是什么?

  • XHTML 指可擴(kuò)展超文本標(biāo)記語言(EXtensible HyperText Markup Language)
  • XHTML 是 HTML 與 XML(擴(kuò)展標(biāo)記語言)的結(jié)合物
  • XHTML 與 HTML 4.01 幾乎是相同的。
  • XHTML 的目標(biāo)是取代 HTML。
  • XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。
  • XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)。

4. XML 與 HTML 的主要差異

  • XML 被設(shè)計(jì)為傳輸和存儲(chǔ)數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的內(nèi)容。
  • HTML 被設(shè)計(jì)用來顯示數(shù)據(jù),其焦點(diǎn)是數(shù)據(jù)的外觀。
  • HTML 旨在顯示信息,而 XML 旨在傳輸信息。

5. HTML 與 XHTML 的主要差異

  • XHTML 對(duì)比 HTML, XHTML 文檔具有良好完整的排版,體現(xiàn)在兩方面:
    a、元素必須要有結(jié)束標(biāo)簽;
    b、元素必須嵌套;
<!-- 正確-嵌套元素 -->
<p>夢(mèng)之都<em>XHTML教程</em></p>
<!-- 不正確-層疊元素 -->
<p>夢(mèng)之都<em>XHTML教程</p></em>
  • 對(duì)于HTML的元素和屬性,XHTML 必須小寫, 因?yàn)?strong>XML是嚴(yán)格區(qū)分大小寫的,如<li>和<LI>是不同的標(biāo)簽

  • XHTML 的屬性值必須在引號(hào)之中

  • XHTML 不支持最小化屬性

 <!-- 正確:非最小化屬性(unminimized attributes) --> 
  <input checked="checked">
 <!-- 不正確:最小化屬性(minimized attributes) --> 
  <input checked>
  • 在XHTML 中,name屬性是不贊成使用的,在以后的版本中將被刪除。

關(guān)于HTML 和XHTML 和XML 的區(qū)別可以參考以下網(wǎng)頁:
http://www.cnblogs.com/fredshare/archive/2011/11/10/2244308.html
http://www.dreamdu.com/xhtml/html_xhtml/


二、怎樣理解 HTML 語義化

HTML 語義化優(yōu)點(diǎn):

  1. 語義化的含義就是用正確的標(biāo)簽做正確的事情,HTML語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化,便于對(duì)瀏覽器、搜索引擎解析;在沒有CSS樣式情況下也能呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)。
  2. 搜索引擎的爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重,所以HTML語義化有利于 SEO。
  3. 方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備),以有意義的方式來渲染網(wǎng)頁。
  4. 便于團(tuán)隊(duì)開發(fā)和維護(hù)。語義化更具可讀性,遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn),可以減少差異化。

若想要做到HTML 語義化,則網(wǎng)頁的開發(fā)者應(yīng)該要做到熟悉所有規(guī)范的HTML標(biāo)簽的使用場(chǎng)景,在合適的地方使用合適的標(biāo)簽。如:

  1. 盡量少用<div>和<span>這兩個(gè)標(biāo)簽,因?yàn)榇a中使用的標(biāo)簽<div>和<span>是在所有的HTML標(biāo)簽中最沒有語義的,在使用這兩個(gè)標(biāo)簽時(shí)盡量能找到更有語義的標(biāo)簽代替;
  2. 和標(biāo)簽語義化的重要性一樣,某些屬性的設(shè)置也是HTML語義化重要的環(huán)節(jié)。例如,在img標(biāo)簽中,alt是必須要設(shè)置的屬性,因?yàn)閕mg是自閉合標(biāo)簽,并沒有包含可以解釋說明圖片的額外信息。alt屬性的文字說明是當(dāng)圖片在瀏覽器中未加載時(shí)的顯示的代替。

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

總的來說就是,結(jié)構(gòu)、表現(xiàn)、行為三者分離。

1. 網(wǎng)頁分離

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

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

內(nèi)容與樣式分離的原則的實(shí)現(xiàn),一個(gè)是要依靠意識(shí),另一個(gè)是依靠經(jīng)驗(yàn)。
舉例而言,面對(duì)一個(gè)分塊明顯的網(wǎng)頁設(shè)計(jì)圖時(shí):
初級(jí)的開發(fā)人員思路及制作方法:div 層層嵌套;
中級(jí)的開發(fā)人員思路及制造方法:去掉多余的 div ,進(jìn)行簡(jiǎn)化;
高級(jí)的開發(fā)人員思路及制造方法:最大化的簡(jiǎn)化 HTML 的結(jié)構(gòu),然后用 CSS 進(jìn)行設(shè)置,減少 HTML 與 CSS 的契合度。
正確做法是寫HTML的時(shí)候先不管樣式,重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上,讓HTML能提現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,然后進(jìn)行 CSS 樣式設(shè)置,減少 HTML 與 CSS 契合度(即內(nèi)容與樣式分離),寫 JavaScript 的時(shí)候,盡量不要用JS去直接操作樣式,而是通過給元素添加/刪除 class 屬性來控制樣式變化(即行為分離)。

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

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

關(guān)于 HTML 語義化 及 內(nèi)容與樣式分離的原則參考:
http://www.lxweimin.com/p/55a7e598957f


四、有哪些常見的meta標(biāo)簽

meta常用屬性 - 提供HTML文檔的元數(shù)據(jù), 常用于告知瀏覽器如何顯示內(nèi)容和搜索引擎優(yōu)化

1. 網(wǎng)頁相關(guān)

  • 申明編碼
<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)核渲染。
    國內(nèi)雙核瀏覽器默認(rèn)內(nèi)核模式如下:
    搜狗高速瀏覽器、QQ瀏覽器:IE內(nèi)核(兼容模式)
    360極速瀏覽器、遨游瀏覽器:Webkit內(nèi)核(極速模式)
<meta name="renderer" content="webkit|ie-comp|ie-stand">
  • 禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容
    這樣設(shè)定,訪問者將無法脫機(jī)瀏覽。
<meta http-equiv="Pragma" content="no-cache">
  • Windows 8
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼圖標(biāo) -->
<meta name="msapplication-TileImage" content="icon.png"/>
  • 站點(diǎn)適配
    主要用于PC-手機(jī)頁的對(duì)應(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頁所對(duì)應(yīng)的手機(jī)頁url,
兩者必須是一一對(duì)應(yīng)關(guān)系(而不是統(tǒng)一對(duì)應(yīng)至手機(jī)站首頁) -->
<meta name="mobile-agent" content="format=html5;url=http://3g.sina.com.cn/">
  • 避免百度轉(zhuǎn)碼申明
    用百度打開網(wǎng)頁可能會(huì)對(duì)其進(jìn)行轉(zhuǎn)碼(比如貼廣告),避免轉(zhuǎn)碼可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />

2. 用于SEO優(yōu)化

  • 頁面關(guān)鍵詞
    每個(gè)網(wǎng)頁應(yīng)具有描述該網(wǎng)頁內(nèi)容的一組唯一的關(guān)鍵字, 不要太短也不要太長(zhǎng)
<meta name="keywords" content="your tags" />
  • 頁面描述
    每個(gè)網(wǎng)頁都應(yīng)該有一個(gè)不超過150個(gè)字符的頁面描述
<meta name="description" content="150 words" />
  • 設(shè)置搜索引擎索引方式
<meta name="robots" content="index,follow" />
<!--
    all:文件將被檢索,且頁面上的鏈接可以被查詢;
    none:文件將不被檢索,且頁面上的鏈接不可以被查詢;
    index:文件將被檢索;
    follow:頁面上的鏈接可以被查詢;
    noindex:文件將不被檢索;
    nofollow:頁面上的鏈接不可以被查詢。
 -->

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

3.1 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。

width=device-width 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時(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)縮, 參數(shù) no,yes

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

注意,很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上,這會(huì)讓網(wǎng)站以100%寬度渲染,用戶需要手動(dòng)移動(dòng)頁面或者縮放。 如果和initial-scale=1同時(shí)使用user-scalable=no或maximum-scale=1,則用戶將不能放大/縮小網(wǎng)頁來看到全部的內(nèi)容。

3.2 WebApp全屏模式
  • 啟用全屏模式, 偽裝app,離線應(yīng)用。
<meta name="apple-mobile-web-app-capable" content="yes" />
  • 隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色
    只有在開啟WebApp全屏模式時(shí)才生效。 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)題">
3.3 其他
  • 忽略數(shù)字自動(dòng)識(shí)別為電話號(hào)碼
<meta content="telephone=no" name="format-detection" />
  • 忽略識(shí)別郵箱
<meta content="email=no" name="format-detection" />
  • 添加智能 App 廣告條 Smart App Banner
    告訴瀏覽器這個(gè)網(wǎng)站對(duì)應(yīng)的app,并在頁面上顯示下載banner
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  • 針對(duì)不識(shí)別Viewport的手持設(shè)備進(jìn)行優(yōu)化
    主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器,比如黑莓
<meta name="HandheldFriendly" content="true">
  • 適配微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
  • 強(qiáng)制豎屏
<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">
  • 強(qiáng)制全屏
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="true">
  • windows phone 點(diǎn)擊無高光
<meta name="msapplication-tap-highlight" content="no">

關(guān)于meta常用屬性可以參考:
https://tink.gitbooks.io/fe-collections/content/ch02-html/s03-meta.html


五、文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!DOCTYPE html> 的作用?

1. 文檔聲明的作用

DTD(document type definition,文檔類型定義)是一系列的語法規(guī)則, 用來定義XML或(X)HTML的文件類型。瀏覽器會(huì)使用它來判斷文檔類型, 決定使用何種協(xié)議來解析,以及切換瀏覽器模式。
DOCTYPE是document type(文檔類型)的簡(jiǎn)寫,用來聲明文檔類型和DTD規(guī)范的,一個(gè)主要的用途便是文件的合法性驗(yàn)證。它說明了你用的XHTML或者HTML是什么版本。如果文件代碼不合法,那么瀏覽器解析時(shí)便會(huì)出一些差錯(cuò)。
<!DOCTYPE> 聲明指出閱讀程序應(yīng)該用什么規(guī)則集來解釋文檔中的標(biāo)記。在Web文檔的情況下,“閱讀程序”通常是瀏覽器或者校驗(yàn)器這樣的一個(gè)程序,“規(guī)則”則是W3C所發(fā)布的一個(gè)文檔類型定義(DTD)中包含的規(guī)則。
要建立符合標(biāo)準(zhǔn)的網(wǎng)頁,<!DOCTYPE> 聲明是必不可少的關(guān)鍵組成部分。除非你的XHTML確定了一個(gè)正確的DOCTYPE,否則你的標(biāo)識(shí)和CSS都不會(huì)生效。
如果沒有DOCTYPE,瀏覽器會(huì)進(jìn)入一種被稱為Quirks模式的怪異狀態(tài),在該模式下,瀏覽器的盒模型、樣式解析、布局等都與標(biāo)準(zhǔn)規(guī)定的存在差異。
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于 <html> 標(biāo)簽之前。
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽;它是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。
在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD,因?yàn)?HTML 4.01 基于 SGML。HTML5 不基于 SGML,所以不需要引用 DTD。
請(qǐng)始終向 HTML 文檔添加 <!DOCTYPE> 聲明,這樣瀏覽器才能獲知文檔類型。

2. 瀏覽器模式:嚴(yán)格模式和混雜模式

為了能夠很好地顯示滿足標(biāo)準(zhǔn)的頁面,又能最大程度兼容不合法的HTML。 瀏覽器廠商一般會(huì)提供兩種瀏覽器模式:

嚴(yán)格模式(standards mode):瀏覽器根據(jù)標(biāo)準(zhǔn)規(guī)約來渲染頁面。
混雜模式(quirks mode):瀏覽器采用更加寬松的、向后兼容的方式來渲染頁面。

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

3. 關(guān)于<!DOCTYPE html>

HTML5將DOCTYPE的聲明簡(jiǎn)化了,只需要<!DOCTYPE html>即可。<!DOCTYPE html> 的作用就是讓瀏覽器進(jìn)入標(biāo)準(zhǔn)模式,使用最新的 HTML5標(biāo)準(zhǔn)來解析渲染頁面;如果不寫,瀏覽器就會(huì)進(jìn)入混雜模式,而這是我們要避免的。

關(guān)于 DOCTYPE 可以參考:
http://harttle.land/2016/01/22/doctype.html
http://blog.csdn.net/jom_ch/article/details/1772165
http://www.w3school.com.cn/tags/tag_doctype.asp
http://www.divcss5.com/html/h22.shtml#no2
http://www.cnblogs.com/GrayZhang/archive/2011/03/31/learning-html5-doctype.html

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

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

  1. 我們使用編輯器編寫 HTML 文件
  2. 保存編寫的 HTML 文件
  3. 使用瀏覽器打開 HTML 文件
  4. HTML文件在瀏覽器展示
  • 我們編寫 HTML 文件時(shí),如果在<html>中指定了<meta charset="gbk">,設(shè)定字符集為gbk。
  • 然后在第2步保持文件時(shí)會(huì)把我們寫入的文字使用編輯器默認(rèn)的編碼方式進(jìn)行保存,而默認(rèn)的編碼方式是utf-8。
  • 接著瀏覽器打開 HTML 文件時(shí),它看到<meta charset="gbk">,這時(shí)候它就會(huì)用gbk字符集來解碼你的 HTML 文檔
  • 由于utf-8和gbk對(duì)中文的編碼方式不一樣,那么HTML文件在瀏覽器中顯示示出來肯定是亂碼。

瀏覽器亂碼的原因

  1. 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時(shí)的解碼格式不匹配導(dǎo)致的。
  2. 亂碼一般是英文以外的字符才會(huì)出現(xiàn)。

關(guān)于編碼涉及到3個(gè)方面:

  1. HTML 文檔中的<meta charset=""> 指定的字符集
  2. 編輯器保存文檔使用的字符集
  3. 瀏覽器解析 HTML 文檔使用的字符集
  4. 這里的關(guān)鍵在于2和3步,如果這兩步的字符集不一樣,那么英文以外的文字就會(huì)出現(xiàn)亂碼。英文不會(huì)出現(xiàn)亂碼是因?yàn)橐话阒髁鞯淖址瘜?duì)英文使用的編碼方式都是一樣的,可以互相兼容。
  5. 而第3步瀏覽器解析 HTML 文檔使用的字符集依賴于第1步 HTML 文檔中的<meta charset=""> 指定的字符。
  6. 那如果 HTML 文檔沒指定呢?那瀏覽器就會(huì)用自己的方式去猜要用哪個(gè)字符集來解析 HTML 文檔,這里就可能會(huì)發(fā)生錯(cuò)誤。

所以總結(jié)下如何解決瀏覽器亂碼:

  1. HTML 文檔一定要指定字符集為utf-8,因?yàn)檫@個(gè)字符集包括了世界上幾乎所有的文字,沒有理由不用它。<meta charset="utf-8">
  2. 編輯器保存文檔使用的字符集一定要跟 HTML 文檔指定的字符集匹配,也就是 utf-8

關(guān)于瀏覽器亂碼,可以參考
http://www.lxweimin.com/p/c9c76370b2fb
http://blog.csdn.net/sxhlovehmm/article/details/41347715
http://ruoyu.jirengu.com/post/%E5%85%B3%E4%BA%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B9%B1%E7%A0%81

七、常見的瀏覽器有哪些,什么內(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 的懷抱。
Safari是蘋果公司開發(fā)的瀏覽器,使用了KDE(Linux桌面系統(tǒng))的KHTML作為瀏覽器的運(yùn)算核心,Safari所用瀏覽器內(nèi)核的名稱是大名鼎鼎的WebKit。 Safari在2003年1月7日首度發(fā)行測(cè)試版,并成為Mac OS X v10.3與之后版本的默認(rèn)瀏覽器,也成為蘋果其它系列產(chǎn)品的指定瀏覽器(也已支持Windows平臺(tái))。
目前移動(dòng)設(shè)備瀏覽器上常用的內(nèi)核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等蘋果 iOS 平臺(tái)主要是 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。

Read More:
各主流瀏覽器內(nèi)核介紹
瀏覽器內(nèi)核
移動(dòng)瀏覽器的內(nèi)核WebKit介紹
主流瀏覽器內(nèi)核介紹(前端開發(fā)值得了解的瀏覽器內(nèi)核歷史)

八、列出常見的標(biāo)簽,并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景

標(biāo)簽 運(yùn)用場(chǎng)景
<html> HTML 頁面的根元素
<body> 文檔的內(nèi)容
<head> 用于定義文檔的頭部
<meta> 提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上,被瀏覽器解析
<title> 文檔的標(biāo)題
<h1>~<h6> 定義了一級(jí)標(biāo)題到六級(jí)標(biāo)題,標(biāo)題字體大小逐漸減弱
<p> 定義一個(gè)段落
<a> 網(wǎng)頁鏈接
<div> 塊級(jí)元素,它可用于組合其他 HTML 元素的容器,沒有特定的含義
<span> 內(nèi)聯(lián)元素,也沒有特定的含義,可用作文本的容器
<u> 下劃線
<em> 強(qiáng)調(diào)文本
<strong> 加重文本
<ol> 有序列表
<ul> 無序列表
<li> 定義列表項(xiàng)目
<img> 圖片
<br > 換行
<input> 定義輸入控件
<i> 斜體字
<table> 定義表
<tr> 定義表格中的行
<td> 定義表中的單元格
<th> 定義表格的表頭
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳
<hr> 創(chuàng)建一條水平線
<iframe> 定義內(nèi)聯(lián)框架
<cite> 定義作品的標(biāo)題
<button> 按鈕
<b> 定義粗體文本
<form> 定義用于用戶輸入的HTML表單
<caption> 定義表標(biāo)題
<footer> 定義文檔或節(jié)的頁腳

Read More:
基本的 HTML 標(biāo)簽
HTML常見標(biāo)簽用法

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

推薦閱讀更多精彩內(nèi)容