一睦柴、Web時(shí)代的變遷

二诽凌、HTML5與HTML4的區(qū)別

1.新增的元素：section、article坦敌、aside侣诵、header、hgroup狱窘、footer杜顺、nav、figure训柴、video哑舒、audio、embed幻馁、mark洗鸵、progress、time仗嗦、ruby膘滨、rt、rp稀拐、wbr火邓、canvas、command、details铲咨、datalist躲胳、datagrid、keygen纤勒、output坯苹、source、menu

2.新增的input元素：email摇天、url粹湃、number、range泉坐、Date Pickers

3.廢除的元素：

能使用CSS替代的元素：basefont为鳄、big、center腕让、font孤钦、s、strike记某、tt司训、u

不再使用frame框架，僅支持iframe

applet液南、bsound壳猜、blink、marquee

rb滑凉、acronym统扳、dir、isindex畅姊、listing咒钟、xmp、nextid若未、plaintext

4.新增的屬性：

表單相關(guān)：autofocus朱嘴、placeholder、form粗合、required萍嬉、autocomplete、min隙疚、max壤追、multiple、pattern供屉、step行冰、list溺蕉、formaction、formenctype悼做、formmethod疯特、formnovalidate、formtarget贿堰、novalidate

鏈接相關(guān)：media辙芍、hreflang啡彬、rel羹与、sizes、target

其他屬性：reversed庶灿、charset纵搁、type、label往踢、scoped腾誉、async、manifest峻呕、sandbox利职、seamless、srcdoc

5.全局屬性

contentEditable：允許用戶編輯元素中的內(nèi)容瘦癌，isContentEditable

designMode：指定整個(gè)頁(yè)面是否可編輯猪贪，只能在JS腳本里被編輯修改，只有"on"和"off"值

hidden：瀏覽器不渲染該元素讯私，使該元素處于不可見狀態(tài)

spellcheck：對(duì)用戶輸入的文本內(nèi)容進(jìn)行拼寫和語(yǔ)法檢查

tabindex：每個(gè)tab是第幾個(gè)被訪問(wèn)到

三热押、HTML5的結(jié)構(gòu)

A.新增的主體結(jié)構(gòu)元素

1.article：代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的斤寇、完整的桶癣、可以獨(dú)自被外部引用的內(nèi)容

2.section：用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，可以理解為section元素中的內(nèi)容可以單獨(dú)存儲(chǔ)到數(shù)據(jù)庫(kù)中或輸出到word文檔中娘锁，通常不推薦為那些沒(méi)有標(biāo)題的內(nèi)容使用section元素

3.nav：可以用作頁(yè)面導(dǎo)航的鏈接組牙寞，其中導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分∧眩可用于傳統(tǒng)導(dǎo)航條间雀、側(cè)邊欄導(dǎo)航、頁(yè)內(nèi)導(dǎo)航馏锡、翻頁(yè)操作

4.aside：用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分雷蹂，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用 、側(cè)邊欄杯道、廣告匪煌、導(dǎo)航條责蝠，以及其他類似的有別于主要內(nèi)容的部分

5.time：代表24小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期，表示時(shí)刻時(shí)允許帶時(shí)差

6.pubdata屬性：是一個(gè)可選的萎庭，boolean值的屬性霜医，可以用到article中的time元素上，意思是time元素代表了文章或整個(gè)網(wǎng)頁(yè)的發(fā)布日期

B.新增的非主體結(jié)構(gòu)元素

1.header：是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素驳规，通常用來(lái)放置整個(gè)頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題肴敛，但也可以包含其他內(nèi)容

2.hgroup：是將標(biāo)題及其子標(biāo)題進(jìn)行分組的元素，通過(guò)會(huì)將h1-h6元素進(jìn)行分組吗购，譬如一個(gè)內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題算一組

3.footer：可以作為其上層父級(jí)內(nèi)容區(qū)塊或是一個(gè)根區(qū)塊的腳注

4.address：用來(lái)在文檔中呈現(xiàn)聯(lián)系信息医男，包括文檔作者或文檔維護(hù)者的名字、他們的網(wǎng)站鏈接捻勉、電子郵箱镀梭、真實(shí)地址、電話號(hào)碼等

C.HTML5結(jié)構(gòu)

1.顯式編排內(nèi)容區(qū)塊：指明確使用section等元素創(chuàng)建文檔結(jié)構(gòu)踱启，在每個(gè)內(nèi)容區(qū)塊內(nèi)使用標(biāo)題（h1-h6报账、hgroup等），盡量使用顯式編排

2.隱式編排內(nèi)容區(qū)塊：指不明確使用section等元素埠偿，而是根據(jù)頁(yè)面中所書寫的各級(jí)標(biāo)題（h1-h6透罢、hgroup等 ）等把內(nèi)容區(qū)塊自動(dòng)創(chuàng)建出來(lái)

四、表單與文件

A.新增元素與屬性

1.form屬性：表單元素放在表單外冠蒋，可以用form指定表單id

2.formaction屬性：按扭元素可以指定不同的action

3.formmethod屬性：按扭元素可以指定不同的method

4.placeholder屬性：當(dāng)文本框處于未輸入狀態(tài)時(shí)文本框中顯示的輸入提示

5.autofocus屬性：當(dāng)頁(yè)面打開時(shí)羽圃，控件自動(dòng)獲得光標(biāo)焦點(diǎn)，一個(gè)頁(yè)面只能有一個(gè)控件具有該屬性浊服，不要濫用

6.list屬性：為單行文本增加一個(gè)list屬性统屈，該屬性的值為某個(gè)datalist元素的id，實(shí)現(xiàn)類似下拉功能

7.autocomplete屬性：配合list屬性實(shí)現(xiàn)自動(dòng)補(bǔ)全牙躺，可以指定on愁憔、off和""

8.增加的input元素：search、tel孽拷、url吨掌、email、datetime脓恕、date膜宋、month、week炼幔、time秋茫、datetime-local、number乃秀、range肛著、color

9.file增加multiple屬性圆兵，可以一次選擇多個(gè)文件，可以通過(guò)accept屬性限制文件的種類

10.output元素枢贿，定義不同類型的輸出殉农，比如計(jì)算結(jié)果或腳本的輸出

B.表單驗(yàn)證

1.required屬性：非空驗(yàn)證

2.pattern屬性：通過(guò)正則檢查內(nèi)容

3.min與max屬性：在數(shù)值和日期控件中使用，限制范圍

4.step屬性：指定數(shù)值類型的步長(zhǎng)

5.js中可以獲取控件的checkValidity()方法獲取驗(yàn)證狀態(tài)局荚，還有validity屬性

6.取消驗(yàn)證：novalidate屬性超凳、formnovalidate屬性

7.自定義錯(cuò)誤信息：js調(diào)用setCustomValidity方法

C.增強(qiáng)的頁(yè)面元素

1.figure元素：用來(lái)表示網(wǎng)頁(yè)上一塊獨(dú)立的內(nèi)容，將其從網(wǎng)頁(yè)上移除后不會(huì)對(duì)網(wǎng)頁(yè)上的其他內(nèi)容產(chǎn)生任何影響 耀态，主要用于圖片轮傍、統(tǒng)計(jì)圖或代碼示例，也可以用于其他的內(nèi)容茫陆；figcaption元素表示figure元素的標(biāo)題金麸，從屬于figure元素，必須在figure內(nèi)部

2.details元素：用于局部區(qū)域進(jìn)行展開或收縮的方法簿盅，內(nèi)部需要一個(gè)summary元素，open屬性表示處于展開狀態(tài)

3.mark元素：表示頁(yè)面中需要突出顯示或高亮顯示的揍魂，對(duì)于當(dāng)前用戶具有參考作用的一段文字

4.progress元素：代表一個(gè)任務(wù) 的完成進(jìn)度桨醋，可能用0到某個(gè)最大數(shù)字之間的數(shù)字來(lái)表示 準(zhǔn)確的進(jìn)度完成情況

5.meter元素：表示規(guī)定范圍內(nèi)的數(shù)量值，包含六個(gè)屬性：value现斋、min喜最、max、low庄蹋、high瞬内、optimum

6.menu和command元素：表示菜單和菜單項(xiàng)

7.改良的ol列表：添加了start屬性，表示編號(hào)的起始值限书，reversed屬性虫蝶，對(duì)列表反序

8.改良的dl列表：增加dt、dd

9.加以嚴(yán)格限制的cite元素：僅用于表示作品的標(biāo)題

10.重新定義的small元素：專門用來(lái)標(biāo)識(shí)所謂“小字印刷體”的元素倦西，不允許被應(yīng)用在頁(yè)面主內(nèi)容中能真，只允許被當(dāng)做輔助信息用inline方式內(nèi)嵌在頁(yè)面上使用

D.文件API

1.HTML5中，添加multiple屬性扰柠，file控件允許放置多個(gè)文件粉铐，F(xiàn)ileList對(duì)象則為這些file對(duì)象的列表，代表用戶選擇的所有文件

2.Blob表示二進(jìn)制原始數(shù)據(jù)卤档，提供一個(gè)slice方法蝙泼，有size和type屬性，file對(duì)象繼承了該對(duì)象

3.FileReader接口：用來(lái)把文件讀入內(nèi)存劝枣，并且讀取文件中的數(shù)據(jù)汤踏，可以在瀏覽器中異步訪問(wèn)文件系統(tǒng)倡缠，讀取文件中的數(shù)據(jù)，可讀取為二進(jìn)制碼茎活、文本昙沦、DataURL，包含讀取過(guò)程事件

E.拖放API

1.實(shí)現(xiàn)步驟：

將對(duì)象元素的draggable屬性設(shè)為true载荔，img與a元素默認(rèn)允許拖放

編寫拖放相關(guān)的事件處理代碼：dragstart盾饮、drag、dragenter懒熙、dragover丘损、dragleave、drop工扎、dragend

2.DataTransfer對(duì)象：可以實(shí)現(xiàn)定制拖放圖標(biāo)徘钥，讓它只支持特定拖放等，甚至可以實(shí)現(xiàn)更復(fù)雜的拖放操作

屬性：dropEffect肢娘、effectAllowed呈础、types

方法：clearData、setData橱健、getData而钞、setDragImage

五、繪制圖形

A.canvas元素的基礎(chǔ)知識(shí)

1.在頁(yè)面上放置一個(gè)canvas元素拘荡，就相當(dāng)于在頁(yè)面上放置了一塊“畫布”臼节，可以在其中進(jìn)行圖形的描繪，只是一個(gè)透明的區(qū)域珊皿，需要利用JS編寫在其中進(jìn)行繪畫的腳本

2.要指定ID网缝、width、height三個(gè)屬性

3.相關(guān)api

getContext('2d')獲取context

fillRect(x,y,w,h)填充

strokeRect(x,y,w,h)邊框

fillStyle填充的樣式

strokeStyle邊框樣式

lineWidth邊框?qū)挾?/p>

clearRect(x,y,w,h)擦除指定區(qū)域中的圖形

B.使用路徑

1.相關(guān)api

beginPath()開始路徑的創(chuàng)建

arc(x,y,radius,startAngle,endAngle,anticlockwise)繪制圓形

closePath()關(guān)閉路徑

fill()直接填充路徑

stroke()直接繪制路徑邊框

2.不關(guān)閉路徑蟋定，已創(chuàng)建的路徑會(huì)永遠(yuǎn)保留著粉臊，創(chuàng)建的圖形會(huì)一次又一次地進(jìn)行重疊

3.繪制線段

moveTo(x,y)將光標(biāo)移動(dòng)到指定的起點(diǎn)

lineTo(x,y)在起點(diǎn)與終點(diǎn)之間創(chuàng)建路徑

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)貝濟(jì)埃曲線

C.繪制漸變圖形

1.createLinearGradient(xStart,yStart,xEnd,yEnd)線性漸變的LinearGradient對(duì)象

2.addCOlorStop(offset,color)追加漸變的顏色，至少追加兩次溢吻，開始顏色與漸變顏色

3.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd )徑向漸變

D.繪制變形圖形

1.坐標(biāo)變換

translate(x,y)平移

scale(x,y)擴(kuò)大

rotate(angle)旋轉(zhuǎn)

2.transform(m11,m12,m21,m22,dx,dy)矩陣變換

E.圖形組合

1.globalCompositeOperation=type维费，type的值：

source-over默認(rèn)覆蓋

destination-over在原有圖形之下繪制

source-in作in運(yùn)算，只顯示新圖形重疊的部分

destination-in促王，只顯示原圖形重疊的部分

source-out犀盟，只顯示新圖形不重疊的部分

destionation-out，只顯示原圖形不重疊的部分

source-atop蝇狼，只顯示新圖片重疊及未被覆蓋的原有圖形部分

destionation-atop阅畴，只顯示原圖形重疊及未被覆蓋的新圖形部分

xor，只繪制新圖形不重疊的部分

copy迅耘，重疊的部分透明

F.給圖形繪制陰影

1.幾個(gè)屬性：

shadowOffsetX贱枣，陰影的橫向位移量

shadowOffsetY监署，陰影的縱向位移量

shadowColor，陰影的顏色

shadowBlur纽哥，陰影的模糊范圍

G.繪制圖像

1.drawImage(image,……)繪制圖像

2.createPattern(image,type)圖像平鋪钠乏，type，no-repeat春塌、repeat-x晓避、repeat-y、repeat

3.像素處理：getImageData(……)只壳、putImageData(……)

H.繪制文字

1.fillText(text,x,y,[maxWidth])填充繪制

2.strokeText(text,x,y,[maxWidth])輪廓繪制

3.文字相關(guān)屬性：font俏拱、textAlign、textBaseline

I.補(bǔ)充知識(shí)

1.save()將當(dāng)前狀態(tài)保存到棧中吼句，restore()從棧中取出

2.toDataURL(type)锅必，把狀態(tài)輸出到一個(gè)data URL中然后重新裝載

六、多媒體播放

1.video：播放視頻惕艳，需要指定長(zhǎng)寬

2.audio：播放音頻

3.source：為同一個(gè)媒體數(shù)據(jù)指定多個(gè)播放格式與編碼方式

4.屬性：

src搞隐，指定媒體數(shù)據(jù)的URL

autoplay，指定媒體是否在頁(yè)面加載后自動(dòng)播放

preload尔艇，指定媒體是否預(yù)加載

poster尔许，video元素獨(dú)有，當(dāng)視頻不可用時(shí)终娃，可以向用戶展示一幅替代用的圖片

loop，指定是否循環(huán)播放視頻或音頻

controls蒸甜，是否為視頻或音頻添加瀏覽器自帶的播放用的控制條

width與height棠耕，指定視頻的寬度與高度，video獨(dú)有

error柠新，只要出現(xiàn)錯(cuò)誤窍荧，將返回一個(gè)MediaError對(duì)象，為只讀屬性恨憎，錯(cuò)誤狀態(tài)包括MEDIA_ERR_ABORTED（1）蕊退、MEDIA_ERR_NETWORK（2）、MEDIA_ERR_DECODE（3）憔恳、MEDIA_ERR_SRC_NOT_SUPPORTED（4）

networkState瓤荔，讀取當(dāng)前網(wǎng)絡(luò)狀態(tài)，為只讀屬性钥组，包括NETWORK_EMPTY（0）输硝、NETWORK_IDLE（1）、NETWORK_LOADING（2）程梦、NETWORK_NO_SOURCE（3）

currentSrc点把，讀取播放中的媒體數(shù)據(jù)的URL地址橘荠，為只讀

buffered，返回一個(gè)對(duì)象郎逃，該對(duì)象實(shí)現(xiàn)TimeRanges接口哥童，以確認(rèn)瀏覽器是否已緩存媒體數(shù)據(jù)

readyState，返回媒體當(dāng)前播放位置的就緒狀態(tài)褒翰，包括HAVE_NOTING（0）贮懈、HAVE_METADATA（1）、HAVE_CURRENT_DATA（2）影暴、HAVE_RUTURE_DATA（3）错邦、HAVE-ENOUGH_DATA（4）

seeking與seekable，seeking表示瀏覽器是否正在請(qǐng)求某一特定播放位置的數(shù)據(jù)型宙，seekable返回一個(gè)TimeRanges對(duì)象撬呢，表示 請(qǐng)求到的數(shù)據(jù)的時(shí)間范圍

currentTime，startTime妆兑、duration魂拦，currentTime讀取媒體的當(dāng)前播放位置，為可讀寫屬性搁嗓，startTime讀取媒體播放的開始時(shí)間通常為0芯勘，duration讀取媒體文件的總的播放時(shí)間

played、paused腺逛、ended荷愕，played返回一個(gè)TimeRanges對(duì)象，可以讀取媒體文件的已播放部分的時(shí)間段棍矛，paused表示是否暫停播放安疗，played返回是否播放完畢

defaultPlaybackRate、playbackRate够委，defaultPlaybackRate讀取或修改媒體默認(rèn)的播放速率荐类，playbackRate讀取或修改媒體當(dāng)前的播放速率

volume、muted茁帽，volume讀取或修改媒體的播放音量玉罐，muted讀取或修改媒體的靜音狀態(tài)

5.方法

play方法，播放媒體

pause方法潘拨，暫停媒體

load方法吊输，重新載入媒體進(jìn)行播放

canPlayType方法，測(cè)試瀏覽器是否支持指定的媒體類型

6.事件：loadstart战秋、progress璧亚、suspend、abort、error癣蟋、emptied透硝、stalled、play疯搅、pause濒生、loadedmetadata、loadeddata幔欧、waiting罪治、playing、canplay礁蔗、canplaythrough觉义、seeking、seeked浴井、timeupdate晒骇、ended、ratechange磺浙、durationchange洪囤、volumechange

七、本地存儲(chǔ)

A.Web Storage

1.sessionStorage：將數(shù)據(jù)保存在session對(duì)象中撕氧，臨時(shí)保存

2.localStorage：將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中瘤缩，永久保存

3.保存：

sessionStorage.setItem(key,value);

localStorage.setItem(value);

4.獲取：

sessionStorage.getItem(key);

localStorage.getItem(key);

5.清除：.clear()方法

B.本地?cái)?shù)據(jù)庫(kù)

1.使用SQLLite數(shù)據(jù)庫(kù)

2.var db = openDatabase(dbname,version,describe,size);

3.db.transaction(function(){})伦泥，事務(wù)

4.executeSql(sqlquery,params,dataHandler,errorHandler)方法執(zhí)行SQL

八剥啤、離線應(yīng)用程序

1.本地緩存與瀏覽器緩存的區(qū)別：

本地緩存是為整個(gè)Web應(yīng)用程序服務(wù)的，而瀏覽器的網(wǎng)頁(yè)緩存只服務(wù)于單個(gè)網(wǎng)頁(yè)

網(wǎng)頁(yè)緩存是不安全不脯、不可靠的铐殃，本地緩存是可靠的

2.Web應(yīng)用程序的本地緩存是通過(guò)每個(gè)頁(yè)面的mainfest文件來(lái)管理的，需要服務(wù)器添加text/cache-manifest的mime類型

3.只要頁(yè)面上的資源文件被本地緩存過(guò)跨新，下次瀏覽器打開這個(gè)頁(yè)面時(shí)，總是先使用本地緩存中的資源坏逢，然后請(qǐng)求manifest文件

4.applicationCache對(duì)象代表了本地緩存域帐，可以用它來(lái)通知用戶本地緩存中已經(jīng)被更新，也允許用戶手工更新本地緩存

updateReady是整，通知本地緩存已被更新

swapCache肖揣，手工執(zhí)行本地緩存的更新

九、通信API

1.跨文檔消息傳輸：

window.postMessage(message,targetOrigin);向其他窗口發(fā)送消息

window.addEventListener('message',function(){...},false);監(jiān)聽消息事件

2.Web Sockets可以在服務(wù)器與客戶端之間建立一個(gè)非HTTP的雙向連接浮入，實(shí)時(shí)的龙优、永久的，除非被顯式關(guān)閉

3.使用：

var ws = new WebSocket("ws://localhost:8005/socket");

ws.send("data");發(fā)送數(shù)據(jù)

ws.onmessage=function(event){}事秀，接收數(shù)據(jù)

ws.onopen=function(event){}彤断，監(jiān)聽socket的打開事件

ws.onclose=function(event){}野舶，監(jiān)聽socket的關(guān)閉事件

ws.close()，關(guān)閉socket

4.readyState屬性可獲取WebSocket對(duì)象的狀態(tài)：CONNECTING(0)宰衙、OPEN(1)平道、CLOSING(2)、CLOSED(3)

十供炼、使用Web Workers處理線程

1.在后臺(tái)線程中不能訪問(wèn)頁(yè)面或窗口對(duì)象一屋，如果使用window或document會(huì)引起錯(cuò)誤

2.使用：

var worker = new Worker("worker.js");

worker.onmessage = function(event){}; 處理收到的消息

worker.postMessage(message); 發(fā)送消息

3.線程中可以嵌套子純種，可以把較大的后臺(tái)線程切分成幾個(gè)子線程

十一袋哼、獲取地理位置信息

1.為window.navigator對(duì)象增加了一個(gè)geolocation屬性

2.geolocation屬性的方法：

getCurrentPosition(onSuccess,onError,options)冀墨，獲取地理位置信息

watchCurrentPosition(onSuccess,onError,options)，持續(xù)監(jiān)控當(dāng)前位置信息

clearWatch(watchId)涛贯，停止獲取當(dāng)前用戶的位置信息

3.position對(duì)象屬性：latitude诽嘉、longitude、altitude疫蔓、accuracy含懊、altitudeAccurancy、heading衅胀、speed岔乔、timestamp

十二、CSS3概述

模塊與模塊化結(jié)構(gòu)滚躯，為了避免產(chǎn)生瀏覽器對(duì)于某個(gè)模塊支持不完全的情況

十三雏门、選擇器

1.class屬性缺點(diǎn)：本身沒(méi)有語(yǔ)義；容易混亂掸掏；

2.CSS3提倡使用選擇器來(lái)將樣式與元素直接綁定茁影，減少樣式表的代碼書寫量

3.語(yǔ)法：E[foo$="val"]，可以使用^丧凤、?募闲、*通配符

4.偽元素選擇器，并不是針對(duì)真正的元素使用的選擇器愿待，而是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器浩螺，格式：選擇器 類名:偽元素 {屬性:值}

5.偽元素選擇器：

:first-line：用于為某個(gè)元素中的第一行文字使用樣式

:first-letter：用于為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式

:before：在某個(gè)元素之前插入一些內(nèi)容

:after：在某個(gè)元素之后插入一些內(nèi)容

:root，將樣式綁定到頁(yè)面的根元素仍侥，就是元素要出，注意與背景色的范圍

:not，如果想對(duì)某個(gè)結(jié)構(gòu)元素使用樣式农渊，但是想排除指定的子結(jié)構(gòu)元素

:empty患蹂，當(dāng)元素內(nèi)容為空白時(shí)使用的樣式

:target，對(duì)頁(yè)面中某個(gè)target元素指定樣式，只在用戶點(diǎn)擊了頁(yè)面中的超鏈接传于，并且跳轉(zhuǎn)到target元素后起作用

:first-child囱挑，元素中的第一個(gè)子元素

:last-child，元素中的最后一個(gè)子元素

:nth-child(n)格了，:nth-last-child(n)看铆，對(duì)指定序號(hào)的子元素指定樣式，n可以指定為數(shù)字盛末，或odd為奇數(shù)弹惦，even為偶數(shù)，可以實(shí)現(xiàn)循環(huán)列表的樣式如（4n+1）

:nth-of-type(n)悄但，nth-last-of-type(n)棠隐，在計(jì)算子元素時(shí)只針對(duì)同類型的子元素計(jì)算

:only-child，:only-of-type檐嚣，讓樣式只對(duì)唯一子元素起作用的實(shí)現(xiàn)方法

6.UI元素偽類選擇器：

E:hover助泽，當(dāng)鼠標(biāo)移動(dòng)到元素上面時(shí)所使用的樣式

E:active，指定元素被激活（元素在鼠標(biāo)上按下還沒(méi)松開時(shí)）

E:focus嚎京，指定元素獲得光標(biāo)焦點(diǎn)時(shí)使用的樣式

E:enabled嗡贺，當(dāng)元素牌可用狀態(tài)時(shí)的樣式

E:disabled，當(dāng)元素牌不可用狀態(tài)時(shí)的樣式

E:read-only鞍帝，指定元素牌只讀狀態(tài)時(shí)的樣式

E:read-write诫睬，指定元素處于非只讀狀態(tài)時(shí)的樣式

E:checked，指定當(dāng)表單中的radio或checkbox處于選中狀態(tài)時(shí)的樣式

E:default帕涌，指定當(dāng)頁(yè)面打開時(shí)默認(rèn)處于選取狀態(tài)的radio或checkbox的樣式

E:indeterminate摄凡，指定當(dāng)前頁(yè)面打開 時(shí)，如果一組單選框中任何一個(gè)單選框都沒(méi)有被設(shè)定為選取狀態(tài)時(shí)整組單選框的樣式

E:selection蚓曼，指定當(dāng)元素處于選中狀態(tài)時(shí)的樣式

7.通用兄弟元素選擇器：<子元素> ~ <子元素之后的同級(jí)兄弟元素>{}

十四亲澡、使用選擇器在頁(yè)面中插入內(nèi)容

1.使用content:''，可以指定none

2.content:url()纫版，可以插入圖像

3.content:counter(計(jì)數(shù)器名);針對(duì)多個(gè)項(xiàng)目追加連續(xù)編號(hào)床绪，在元素樣式中counter-increment屬性設(shè)定計(jì)數(shù)器名counter-increment:before選擇器或after選擇器中指定的計(jì)數(shù)器名

4.content:'第'counter(計(jì)數(shù)器名)'章'，可以追加文字

5.content:counter(計(jì)數(shù)器名,編號(hào)種類)其弊，編號(hào)種類可以是list-style-type類型

6.可以使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加括號(hào)会涎、單引號(hào)、雙引號(hào)之類的潛逃文字符號(hào)瑞凑，在元素樣式中使用quotes屬性來(lái)指定使用什么嵌套文字符號(hào)

十五、文字與字體相關(guān)樣式

1.text-shadow:length length length color概页，給頁(yè)面上的文字添加陰影效果籽御，可以指定多個(gè)陰影

2.word-break屬性：normal，使用默認(rèn)換行規(guī)則，keep-all技掏，只能在半角空格或連字符處換行铃将，break-all，允許在單詞內(nèi)換行

3.word-wrap屬性單詞換行：normal哑梳，默認(rèn)劲阎，break-word，在長(zhǎng)單詞或url地址內(nèi)部進(jìn)行換行

4.@font-face屬性可以使用服務(wù)器端字體鸠真，包括：font-family:WebFont悯仙，聲明服務(wù)器端字體，src:url('xxxxx.otf') format('字體文件格式')吠卷，指定服務(wù)器端字體路徑

5.@font-face中可以指定的其他屬性值：font-style锡垄、font-variant（字體大小寫）、font-weight祭隔、font-stretch（設(shè)置字體是否伸縮變形）货岭、font-size

6.font-size-adjust: aspect，保持文字大小不發(fā)生變化的情況下改變字體的種類疾渴，aspect值是比例值千贯，可以用來(lái)保持大小，計(jì)算方法為x-height值除以該字體的尺寸

十六搞坝、盒相關(guān)樣式

A.盒的類型

1.基本類型：

block搔谴，一行只有一個(gè)

inline，一行并列容納多個(gè)

2.inline-block類型瞄沙，屬于block類型盒的一種己沛，但是在顯示時(shí)具有inline類型盒的特點(diǎn)，但可以指定width和height屬性距境，可代替float

3.inline-table類型鞭衩，表格文字環(huán)繞，可以vertical-align設(shè)計(jì)對(duì)齊方式

4.list-item類型挑格，可以將元素的類型設(shè)定為list-item類型专控，可以將多個(gè)元素作為列表來(lái)顯示，同時(shí)在元素的開頭加上列表的標(biāo)記

5.run-in類型與compact類型诬滩，如果元素后面還有block類型的元素霹粥，run-in類型的元素將被包含在block類型的元素內(nèi)部，而compact類型的元素將被放置在block類型的元素左邊

6.表格相關(guān)類型：table疼鸟、inline-table后控、table-row、table-cell空镜、table-row-group浩淘、table-header-group捌朴、table-footer-group、table-column张抄、table-column-group砂蔽、table-caption

B.對(duì)于盒中容納不下的內(nèi)容的顯示

1.overflow屬性：hidden、scroll署惯、auto左驾、visiable

2.overflow-x屬性與overflow-y屬性：?jiǎn)为?dú)指定在水平方向或垂直方向上內(nèi)容超出盒容納范圍時(shí)的顯示方法

3.text-overflow屬性，在盒的末尾顯示省略符號(hào)极谊，只在水平方向上有效

C.對(duì)盒使用陰影

1.box-shadow屬性诡右，box-shadow:length length length color

D.指定針對(duì)元素的寬度與高度的計(jì)算方法

1.box-sizing屬性，可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內(nèi)部的補(bǔ)白區(qū)域怀酷，以及邊框的寬度與高度

2.box-sizeing可以指定：

content-box稻爬，表示元素的寬度與高度不包括內(nèi)部補(bǔ)白區(qū)域，及邊框的寬度與高度蜕依，默認(rèn)

border-box桅锄，表示元素的寬度與高度包括內(nèi)部補(bǔ)白區(qū)域，及邊框的寬度與高度

十七样眠、與背景和邊框相關(guān)的樣式

A.與背景相關(guān)的新增屬性

1.background-clip:border|pading;友瘤，背景范圍，包括邊框或不包括

2.background-origin:border|padding|content;檐束，背景的起始繪制范圍

3.background-size:寬 高辫秧，指定背景圖片的尺寸

4.background-break:bounding-box|each-box|continuous，指定平鋪內(nèi)聯(lián)元素背景圖像時(shí)的循環(huán)方式

B.在一個(gè)元素中顯示多個(gè)背景圖像

1.通過(guò)多個(gè)background-image被丧、background-repeat盟戏、background-position、background-clip甥桂、background-origin柿究、background-size來(lái)實(shí)現(xiàn)背景中顯示多個(gè)圖像文件的功能

C.圓角邊框的繪制

1.border-radius，指定圓角半徑黄选，可以指定多個(gè)半徑

2.border-radius-topleft蝇摸、border-radius-topright、border-radius-bottomleft办陷、border-radius-bottomright指定四個(gè)角

D.使用圖像邊框

border-image貌夕，指定圖像邊框

十八、CSS3中的變形處理

1.transform:xxx();

scale(0.5)民镜，縮放

skew(水平角度,垂直角度)啡专，傾斜

translate(水平方向，垂直方向)制圈，移動(dòng)

rotate(角度)植旧，旋轉(zhuǎn)

2.transform-origin:left|top|bottom|right|center辱揭，指定變形基準(zhǔn)點(diǎn)，可多個(gè)參數(shù)聯(lián)合設(shè)置病附，如左上

十九、CSS3中的動(dòng)畫功能

1.Transitions功能通過(guò)將元素的某個(gè)屬性從一個(gè)屬性值在指定的時(shí)間內(nèi)平滑過(guò)濾到另一個(gè)屬性值來(lái)實(shí)現(xiàn)動(dòng)畫功能亥鬓，transition: property duration timing-function[,...];

2.Animations與Transitions功能相同完沪，都是通過(guò)改變?cè)氐膶傩灾祦?lái)實(shí)現(xiàn)動(dòng)畫效果，區(qū)別在于使用Transitions功能時(shí)只能通過(guò)指定屬性的開始值與結(jié)束值嵌戈，然后平滑的過(guò)度覆积，而Animations則通過(guò)定義多個(gè)關(guān)鍵幀以及定義每個(gè)關(guān)鍵幀中元素的屬性值來(lái)實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫

3.Animations：

使用keyframes建立關(guān)鍵幀集合

animations:keyframes duration timing-function

4.實(shí)現(xiàn)動(dòng)畫的方法：linear、ease-in熟呛、ease-out宽档、ease、ease-in-out

二十庵朝、布局相關(guān)樣式

A.多欄布局

1.通過(guò)column-count屬性吗冤，將一個(gè)元素中的內(nèi)容分為多欄進(jìn)行顯示

2.使用cloumn-width屬性單獨(dú)設(shè)置每一欄的寬度而不設(shè)定元素的寬度

3.使用column-gap屬性來(lái)設(shè)定多欄之間的間隔距離

4.使用column-rule屬性在欄與欄之間增加一條間隔線，可以設(shè)定寬度九府、顏色等椎瘟，與border相同

B.盒布局

1.使用display:box，屬性侄旬，實(shí)現(xiàn)盒布局

2.多欄布局寬度是相等的肺蔚，盒布局不用

3.使用box-flex屬性，將盒內(nèi)部元素變?yōu)閺椥院胁季?/p>

4.使用box-ordinal-group改變?cè)氐娘@示順序

5.使用box-orient指定元素的排列方向儡羔，垂直或水平

6.使用box-pack和box-align屬性來(lái)指定元素中的文字宣羊、圖像及子元素水平方向或垂直方向水平的對(duì)齊方式

二十一、Media Queries相關(guān)樣式

1.媒體查詢（media query）表達(dá)式汰蜘，用以指定媒體類型仇冯，然后根據(jù)媒體類型來(lái)選擇應(yīng)該使用的樣式

2.@media screen|all|print|handheld|tv|speech|braille|embossed|projection|tty and (max-width: xxxxpx){…………}

二十二、CSS3的其他重要樣式和屬性

A.顏色相關(guān)樣式

1.rgba(x,x,x,alpha)：通過(guò)設(shè)定alpha通道的方法來(lái)定義RGBA顏色鉴扫，實(shí)現(xiàn)透明效果

2.alpha通道不會(huì)將元素內(nèi)的文字也變透明赞枕，opacity會(huì)將文字和背景色都透明

B.用戶界面相關(guān)樣式

1.css2中的outline屬性，在元素周圍繪制一條輪廓線坪创，outline:color style width

2.css3中outline-offset屬性炕婶，緊貼著邊框外圍繪制一條輪廓線

3.resize屬性，允許用戶以拖動(dòng)的方式來(lái)修改元素的尺寸莱预，主要用于可以使用overflow屬性的任何容器元素中

C.取消對(duì)元素的樣式指定——initial屬性值

1.使用initial屬性值讓各種屬性使用默認(rèn)值柠掂，不等于直接刪除對(duì)應(yīng)屬性

二十三、綜合實(shí)例

https://github.com/zhangyue0503/html5js/tree/master/html5yucss3quanweizhinan