柚子快報激活碼778899分享：前端 HTML5和CSS3提高

http://yzkb.51969.com/

一、HTML5的新特性

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

注意：

這些語義化標準主要針對搜索引擎的

新標簽可以使用多次

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

新增的多媒體標簽

主要包含兩個

1、音頻：

2、視頻：

1、視頻

語法：

谷歌瀏覽器把autoplay屬性給我們禁用了，IE可以用

2、音頻

新增的input類型

我們驗證的時候必須添加表單域form，點擊提交按鈕就可以驗證

新增的表單屬性

二、CSS的新特性

css新增選擇器

1、屬性選擇器

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

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

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

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

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

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

3、偽元素選擇器

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

顯示隱藏遮罩案例

偽元素選擇器案例

CSS盒子模型

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

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

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

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

CSS3的其他特性

1、圖片變模糊

CSS3濾鏡filter:

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

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

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

width： calc（100%-80px）；括號里面可以使用加減乘除計算

CSS3過渡 transition

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

過渡動畫：從一個狀態(tài) 漸漸地過渡到另一個狀態(tài)

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

過渡使用口訣：誰做過渡給誰加

如果想要寫多個屬性利用逗號進行分割

三、廣義的HTML5

廣義的HTML5是HTML5+CSS3+JavaScript

柚子快報激活碼778899分享：前端 HTML5和CSS3提高

http://yzkb.51969.com/

推薦閱讀