柚子快報(bào)激活碼778899分享：前端 HTML5和CSS3提高

http://yzkb.51969.com/

一、HTML5的新特性

增加了一些新的標(biāo)簽，新的表單，新的表單屬性，IE9+以上版本的瀏覽器才支持

注意：

這些語(yǔ)義化標(biāo)準(zhǔn)主要針對(duì)搜索引擎的

新標(biāo)簽可以使用多次

在IE9中需要把這些元素轉(zhuǎn)化為塊級(jí)元素

新增的多媒體標(biāo)簽

主要包含兩個(gè)

1、音頻：

2、視頻：

1、視頻

語(yǔ)法：

谷歌瀏覽器把a(bǔ)utoplay屬性給我們禁用了，IE可以用

2、音頻

新增的input類(lèi)型

我們驗(yàn)證的時(shí)候必須添加表單域form，點(diǎn)擊提交按鈕就可以驗(yàn)證

新增的表單屬性

二、CSS的新特性

css新增選擇器

1、屬性選擇器

根據(jù)元素特定屬性來(lái)選擇元素

2、結(jié)構(gòu)偽類(lèi)選擇器

主要根據(jù)文檔結(jié)構(gòu)來(lái)選擇元素，常用于父級(jí)選擇器里面的子元素

nth-child（n）里面的n可以是數(shù)字（選擇第n個(gè)子元素，從1開(kāi)始）、關(guān)鍵字（even偶數(shù)，odd奇數(shù)）、公式（從0開(kāi)始計(jì)算，但是第0個(gè)元素或者超出了元素的個(gè)數(shù)會(huì)被忽略）

nth-child會(huì)把所有的盒子都排列序號(hào)，執(zhí)行的時(shí)候首先看? ?：nth-child（1） 之后回去看前面div

nth-of-type 會(huì)把指定的盒子排列序號(hào)，執(zhí)行時(shí)候先看 div指定的元素? 之后看? ：nth-of-type（1）第幾個(gè)盒子

3、偽元素選擇器

幫助我們利用CSS創(chuàng)建新標(biāo)簽元素不需要HTML標(biāo)簽

顯示隱藏遮罩案例

偽元素選擇器案例

CSS盒子模型

CSS3可以通過(guò)box-sizing 來(lái)指定盒模型，有兩個(gè)值：即可指定為content-box、border-box，這樣計(jì)算盒子大小的方式就發(fā)生改變

1、box-sizing： content-box 盒子大小為width +padding +border （以前默認(rèn)的）

2、box-sizing： border-box 盒子大小為width

如果盒子模型我們改為了box-sizing： border-box，那padding和border就不會(huì)撐大盒子（前提padding和border不會(huì)超過(guò)width寬度）

CSS3的其他特性

1、圖片變模糊

CSS3濾鏡filter:

filter css 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素

filter： 函數(shù)（）；? ?例如： filter： blur（5px）；模糊處理? 數(shù)值越大越模糊

2、計(jì)算盒子寬度 width：calc函數(shù)

width： calc（100%-80px）；括號(hào)里面可以使用加減乘除計(jì)算

CSS3過(guò)渡 transition

過(guò)渡是CSS3中具有顛覆性的特征之一，

過(guò)渡動(dòng)畫(huà)：從一個(gè)狀態(tài) 漸漸地過(guò)渡到另一個(gè)狀態(tài)

我們現(xiàn)在經(jīng)常和 ：hover 一起搭配使用

過(guò)渡使用口訣：誰(shuí)做過(guò)渡給誰(shuí)加

如果想要寫(xiě)多個(gè)屬性利用逗號(hào)進(jìn)行分割

三、廣義的HTML5

廣義的HTML5是HTML5+CSS3+JavaScript

柚子快報(bào)激活碼778899分享：前端 HTML5和CSS3提高

http://yzkb.51969.com/

推薦閱讀