選擇器
1、類選擇器 # 和ID選擇器 . 例子如下：
.first{
color:red;
font-size:14px;
}
<span class="error">這是第一個(gè)例子</span>
也可以針對(duì)不同類型的元素對(duì)同一個(gè)名稱的類選擇器設(shè)定不同的樣式規(guī)則，即使是相同名稱的類選擇器，也可以有不同的表現(xiàn)。
舉例如下：
div.error{
color:red;
font-size:14px;
}
p.error{
color:green;
font-size:14px;
這便表現(xiàn)出了類選擇器的可以重復(fù)使用
2、后代選擇器
<h3>外部</h3>
<div id="sider">
<h3>內(nèi)部</h3>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
在這里，可以定義如下的CSS樣式，就可以實(shí)現(xiàn)分層調(diào)用
h3 {color:green;}
1 #sider h3 {color:red;}
2 #sider ul {color:red;}
3 #sider ul li{color:red;}
form表單
![]()
image.png
HTML 表單用于收集不同類型的用戶輸入。
主流瀏覽器及其內(nèi)核
成為主流瀏覽器要符合兩個(gè)要求：
1：在市場(chǎng)上有一定的市場(chǎng)份額
2：必須有獨(dú)立研發(fā)的內(nèi)核
瀏覽器=shell+內(nèi)核
其中shell的種類相對(duì)比較多，內(nèi)核則比較少。Shell是指瀏覽器的外殼：例如菜單，工具欄 等。主要是提供給用戶界面操作，參數(shù)設(shè)置等等。它是調(diào)用內(nèi)核來實(shí)現(xiàn)各種功能的。內(nèi)核才是瀏覽器的核心。內(nèi)核是基于標(biāo)記語言顯示內(nèi)容的程序或模塊。
什么是瀏覽器內(nèi)核
瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至 顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi) 容的應(yīng)用程序都需要內(nèi)核。（參見維基百科）JS引擎則是解析Javascript語言，執(zhí)行javascript語言來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。最開始渲染引 擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁顯示效果的原因。JS引擎負(fù)責(zé)對(duì)JavaScript進(jìn)行解釋、編譯和執(zhí)行，以使網(wǎng)頁達(dá)到一些動(dòng)態(tài)的效果。但是常見的瀏覽器內(nèi)核可以分這五種：Trident、Gecko、 Presto、Webkit、Blink。
內(nèi)核分類
Trident
Trident(IE內(nèi)核)：該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修改而來的，并沿用到IE11，也被普遍稱作”IE內(nèi)核”。Trident實(shí)際上是一款開放的內(nèi)核，其接口內(nèi)核設(shè)計(jì)的相當(dāng)成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器(殼瀏覽器)涌現(xiàn)。
由于IE本身的“壟斷性”（雖然名義上IE并非壟斷，但實(shí)際上，特別是從Windows 95年代一直到XP初期，就市場(chǎng)占有率來說IE的確借助Windows的東風(fēng)處于“壟斷”的地位）而使得Trident內(nèi)核的長(zhǎng)期一家獨(dú)大，微軟很長(zhǎng)時(shí)間都并沒有更新Trident內(nèi)核，這導(dǎo)致了兩個(gè)后果——一是Trident內(nèi)核曾經(jīng)幾乎與W3C標(biāo)準(zhǔn)脫節(jié)（2005年），二是Trident內(nèi)核的大量 Bug等安全性問題沒有得到及時(shí)解決，然后加上一些致力于開源的開發(fā)者和一些學(xué)者們公開自己認(rèn)為IE瀏覽器不安全的觀點(diǎn)，也有很多用戶轉(zhuǎn)向了其他瀏覽器，F(xiàn)irefox和Opera就是這個(gè)時(shí)候興起的。非Trident內(nèi)核瀏覽器的市場(chǎng)占有率大幅提高也致使許多網(wǎng)頁開發(fā)人員開始注意網(wǎng)頁標(biāo)準(zhǔn)和非IE瀏覽器的瀏覽效果問題。
補(bǔ)充：IE從版本11開始，初步支持WebGL技術(shù)。IE8的JavaScript引擎是Jscript，IE9開始用Chakra，這兩個(gè)版本區(qū)別很大，Chakra無論是速度和標(biāo)準(zhǔn)化方面都很出色。
Trident內(nèi)核的常見瀏覽器有：[1] IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；[1] 360安全瀏覽器（1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink）獵豹極輕瀏覽器，360極速瀏覽器（7.5之前為Trident+Webkit，7.5為Trident+Blink）獵豹安全瀏覽器（1.0-4.2版本為Trident+Webkit，4.3及以后版本為Trident+Blink）獵豹極輕瀏覽器，傲游瀏覽器（傲游1.x、2.x為IE內(nèi)核，3.x為IE與Webkit雙核）、百度瀏覽器（早期版本）、世界之窗瀏覽器[2] （最初為IE內(nèi)核，2013年采用Chrome+IE內(nèi)核）、2345瀏覽器、騰訊TT、淘寶瀏覽器、采編讀瀏覽器、搜狗高速瀏覽器（1.x為Trident，2.0及以后版本為Trident+Webkit）、阿云瀏覽器（早期版本）、瑞星安全瀏覽器、Slim Browser、 GreenBrowser、愛帆瀏覽器（12 之前版本）、115瀏覽器、155瀏覽器、閃游瀏覽器、N氧化碳瀏覽器、糖果瀏覽器、彩虹瀏覽器、瑞影瀏覽器、勇者無疆瀏覽器、114瀏覽器、螞蟻瀏覽器、飛騰瀏覽器、速達(dá)瀏覽器、佐羅瀏覽器、海豚瀏覽器（iPhone/iPad/Android）、UC瀏覽器（Blink內(nèi)核+Trident內(nèi)核）等。
其中部分瀏覽器的新版本是“雙核”甚至是“多核”，其中一個(gè)內(nèi)核是Trident，然后再增加一個(gè)其他內(nèi)核。國(guó)內(nèi)的廠商一般把其他內(nèi)核叫做“高速瀏覽模式”，而Trident則是“兼容瀏覽模式”，用戶可以來回切換。
Gecko
Gecko(Firefox內(nèi)核)：Netscape6開始采用的內(nèi)核，后來的Mozilla FireFox(火狐瀏覽器) 也采用了該內(nèi)核，Gecko的特點(diǎn)是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因?yàn)檫@是個(gè)開源內(nèi)核，因此受到許多人的青睞，Gecko內(nèi)核的瀏覽器也很多，這也是Gecko內(nèi)核雖然年輕但市場(chǎng)占有率能夠迅速提高的重要原因。
事實(shí)上，Gecko引擎的由來跟IE不無關(guān)系，前面說過IE沒有使用W3C的標(biāo)準(zhǔn)，這導(dǎo)致了微軟內(nèi)部一些開發(fā)人員的不滿；他們與當(dāng)時(shí)已經(jīng)停止更新了的 Netscape的一些員工一起創(chuàng)辦了Mozilla，以當(dāng)時(shí)的Mosaic內(nèi)核為基礎(chǔ)重新編寫內(nèi)核，于是開發(fā)出了Gecko。不過事實(shí)上，Gecko 內(nèi)核的瀏覽器仍然還是Firefox (火狐) 用戶最多，所以有時(shí)也會(huì)被稱為Firefox內(nèi)核。此外Gecko也是一個(gè)跨平臺(tái)內(nèi)核，可以在Windows、 BSD、Linux和Mac OS X中使用。
補(bǔ)充：JavaScript引擎是SpiderMonkey。
Gecko內(nèi)核常見的瀏覽器：[1] Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon
Presto
Presto(Opera前內(nèi)核) (已廢棄)： Opera12.17及更早版本曾經(jīng)采用的內(nèi)核，現(xiàn)已停止開發(fā)并廢棄，該內(nèi)核在2003年的Opera7中首次被使用，該款引擎的特點(diǎn)就是渲染速度的優(yōu)化達(dá)到了極致，然而代價(jià)是犧牲了網(wǎng)頁的兼容性。
實(shí)際上這是一個(gè)動(dòng)態(tài)內(nèi)核，與前面幾個(gè)內(nèi)核的最大的區(qū)別就在腳本處理上，Presto有著天生的優(yōu)勢(shì)，頁面的全部或者部分都能夠在回應(yīng)腳本事件時(shí)等情況下被重新解析。此外該內(nèi)核在執(zhí)行Javascrīpt的時(shí)候有著最快的速度，根據(jù)在同等條件下的測(cè)試，Presto內(nèi)核執(zhí)行同等Javascrīpt所需的時(shí)間僅有Trident和Gecko內(nèi)核的約1/3（Trident內(nèi)核最慢，不過兩者相差沒有多大），本文的其中一個(gè)修改者認(rèn)為上述測(cè)試信息過于老舊且不完整，因?yàn)樗鲞^的小測(cè)試顯示Presto部分快部分慢，各內(nèi)核總體相當(dāng)。那次測(cè)試的時(shí)候因?yàn)锳pple機(jī)的硬件條件和普通PC機(jī)不同所以沒有測(cè)試WebCore內(nèi)核。只可惜Presto是商業(yè)引擎，使用Presto的除開Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770網(wǎng)絡(luò)瀏覽器等，這很大程度上限制了Presto的發(fā)展。
Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核。
Webkit
Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開源):它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)的開發(fā)。所以Webkit也是自由軟件，同時(shí)開放源代碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器在國(guó)內(nèi)還是很安全的。
限于Mac OS X的使用不廣泛和Safari瀏覽器曾經(jīng)只是Mac OS X的專屬瀏覽器，這個(gè)內(nèi)核本身應(yīng)該說市場(chǎng)范圍并不大；但似乎根據(jù)最新的瀏覽器調(diào)查表明，該瀏覽器的市場(chǎng)甚至已經(jīng)超過了Opera的Presto了——當(dāng)然這一方面得益于蘋果轉(zhuǎn)到x86架構(gòu)之后的人氣暴漲，另外也是因?yàn)镾afari 3終于推出了Windows版的緣故吧。Mac下還有OmniWeb、Shiira等人氣很高的瀏覽器。
搜狗高速瀏覽器高速模式也使用Webkit作為內(nèi)核(在腳本理解方面，Chrome使用自己研發(fā)的V8引擎)。WebKit 內(nèi)核在手機(jī)上的應(yīng)用也十分廣泛，例如 Google 的手機(jī) Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 內(nèi)核引擎，都是基于 WebKit。
WebKit內(nèi)核常見的瀏覽器：傲游瀏覽器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機(jī)瀏覽器、Android 默認(rèn)瀏覽器，
Blink
產(chǎn)品簡(jiǎn)介
Blink是一個(gè)由Google和Opera Software開發(fā)的瀏覽器排版引擎，Google計(jì)劃將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分，并且在2013年4月的時(shí)候公布了這一消息。這一渲染引擎是開源引擎WebKit中WebCore組件的一個(gè)分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。
總結(jié)
IE(9以前)=Trident+Jscript
IE(9以后)=Trident+Chakra
360=Trident+Blink
搜狗=Trident+WebKit
Firefox=Gecko+JagerMonkey
Safari=webkit=webcore+jscore
Chrome=Blink+v8
Opera=Blink+v8
瀏覽器內(nèi)核實(shí)現(xiàn)原理
渲染流程如下所示：
渲染引擎運(yùn)作流程
Mozilla架構(gòu)設(shè)計(jì)：界面和實(shí)現(xiàn)分離。采用標(biāo)記語言，JavaScript，C++來開發(fā)。JSEngine就是指SpideMonkey，Layout就是指Gecko。Mozilla的一個(gè)關(guān)鍵部分是XPCOM和NSPR。
Webkit的處理流程：
Mozilla架構(gòu)設(shè)計(jì)：界面和實(shí)現(xiàn)分離。采用標(biāo)記語言，JavaScript，C++來開發(fā)。JSEngine就是指SpideMonkey，Layout就是指Gecko。Mozilla的一個(gè)關(guān)鍵部分是XPCOM和NSPR。
參考資料：http://www.iefans.net/liulanqi-neihe-jiexi/
http://blog.csdn.net/jing_valora/article/details/51901208
http://www.cnblogs.com/kylin2016/p/5845658.html
