柚子快報激活碼778899分享：前端 HTML5和CSS3提高
柚子快報激活碼778899分享：前端 HTML5和CSS3提高
1.HTML的新特性
HTML5
的新增特性主要是針對于以前的不足，增加了一些
新的標簽
、
新的表單
和
新的表單屬性
等。
這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這
些新特性
1.1 HTML5 新增的語義化標簽
以前布局，我們基本用 div 來做。div 對于搜索引擎來說，是沒有語義的。
注意：
這種語義化標準主要是針對
搜索引擎
的
這些新標簽頁面中可以使用
多次
在 IE9 中，需要把這些元素轉換為
塊級元素
1.2 HTML5 新增的多媒體標簽
新增的多媒體標簽主要包含兩個：
1. 音頻：
2. 視頻：
使用它們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用 flash 和其他瀏覽器插件。
HTML5 在不使用插件的情況下，也可以原生的支持視頻格式文件的播放，當然，支持的格式是有限的。
1. 視頻
您的瀏覽器暫不支持
2. 音頻
當前
< audio controls="controls" >
您的瀏覽器暫不支持
常見屬性
3. 多媒體標簽總結
1.音頻標簽和視頻標簽使用方式基本一致
2.瀏覽器支持情況不同
3.谷歌瀏覽器把音頻和視頻自動播放禁止了
4.我們可以給視頻標簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
5.視頻標簽是重點，我們經(jīng)常設置自動播放，不使用 controls 控件，循環(huán)和設置大小屬性
1.3 HTML5 新增的 input 類型
1.4 HTML5 新增的表單屬性
可以通過以下設置方式修改placeholder里面的字體顏色：
input::placeholder {
color: pink;
}
2.CSS3的新特性
2.1 CSS3 的現(xiàn)狀
新增的CSS3特性有兼容性問題，ie9+才支持
移動端支持優(yōu)于 PC 端
不斷改進中
應用相對廣泛
CSS3 新增選擇器
CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。
1. 屬性選擇器
2. 結構偽類選擇器
3. 偽元素選擇器
注意：
類選擇器、屬性選擇器、偽類選擇器，權重為 10。
2.2 屬性選擇器CSS3
屬性選擇器可以根據(jù)元素特定屬性的來選擇元素。 這樣就可以不用借助于類或者
id
選擇器。
新增選擇器
CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。
1. 屬性選擇器
2.
結構偽類選擇器
3. 偽元素選擇器
2.3 結構偽類選擇器
結構偽類選擇器主要根據(jù)
文檔結構
來選擇器元素， 常用于根據(jù)父級選擇器里面的子元素
注意：
類選擇器、屬性選擇器、偽類選擇器，權重為 10。
nth-child（n）
選擇
某個父元素的一個或多個特定的子元素（重點）
n 可以是數(shù)字，關鍵字和公式
n 如果是數(shù)字，就是選擇第 n 個子元素， 里面數(shù)字從1開始…
n 可以是關鍵字：even 偶數(shù)，odd 奇數(shù)
n 可以是公式：常見的公式如下 ( 如果n是公式，則從0開始計算，但是第 0 個元素或者超出了元素的個數(shù)會被忽略 )
結構偽類選擇器主要根據(jù)
文檔結構
來選擇器元素， 常用于根據(jù)父級選擇器里面的子元素
區(qū)別：
1.
nth-child 對父元素里面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然后看看是否和E匹配
2.
nth-of-type 對父元素里面指定子元素進行排序選擇。 先去匹配E ，然后再根據(jù)E 找第n個孩子
2.4 偽元素選擇器（重點）
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標簽元素，而不需要HTML標簽，從而簡化HTML結構。
before 和 after 創(chuàng)建一個元素，但是屬于行內(nèi)元素
新創(chuàng)建的這個元素在文檔樹中是找不到的，所以我們稱為
偽元素
語法： element::before {}
before 和 after 必須有
content 屬性
before 在父元素內(nèi)容的前面創(chuàng)建元素，after 在父元素內(nèi)容的后面插入元素
2.5 CSS3 盒子模型
CSS3 中可以通過
box-sizing
來指定盒模型，有2個值：即可指定為
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寬度）
2.6 CSS3 其他特性
1. 圖片變模糊
2. 計算盒子寬度 width: calc 函數(shù)
CSS3濾鏡filter:
filter CSS屬性將模糊或顏色偏移等圖形效果應用于元素。
filter: 函數(shù)(); 例如： filter: blur(5px); blur模糊處理 數(shù)值越大越模糊
CSS3 calc 函數(shù):
calc() 此CSS函數(shù)讓你在聲明CSS屬性值時執(zhí)行一些計算
。
width: calc(100% - 80px);
括號里面可以使用 + - * / 來進行計算。
2.7 CSS3 過渡（重點）
過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或
JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
過渡動畫： 是從一個狀態(tài) 漸漸的過渡到另外一個狀態(tài)
可以讓我們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會影響
頁面布局。
我們現(xiàn)在經(jīng)常和 :hover 一起 搭配使用。
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
1.屬性
： 想要變化的 css 屬性， 寬度高度 背景顏色 內(nèi)外邊距都可以 。如果想要所有的屬性都
變化過渡， 寫一個all 就可以。
2. 花費時間：
單位是 秒（必須寫單位） 比如 0.5s
3. 運動曲線：
默認是 ease （可以省略）
4.何時開始 ：
單位是 秒（必須寫單位）可以設置延遲觸發(fā)時間 默認是 0s （可以省略）
記住過渡的使用口訣： 誰做過渡給誰加
柚子快報激活碼778899分享：前端 HTML5和CSS3提高
參考鏈接
本文內(nèi)容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
沃爾瑪外貿(mào)優(yōu)選
