一渐苏、HTML5的新特性

HTML5的新增特性主要是針對(duì)于以前的不足，增加了一些新的標(biāo)簽菇夸、新的表單和新的表單屬性等琼富。

這些新特性都有兼容性問題，基本是IE9+以上版本的瀏覽器才支持庄新，如果不考慮兼容性問題鞠眉，可以大量使用這些新特性薯鼠。

1.1 HTML5新增的語義化標(biāo)簽

以前布局，基本使用div來做械蹋。div對(duì)于搜索引擎來說出皇，是沒有語義的。

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

• <header>：頭部標(biāo)簽

• <nav>：導(dǎo)航標(biāo)簽

• <article>：內(nèi)容標(biāo)簽

• <section>：定義文檔某個(gè)區(qū)域

• <aside>：側(cè)邊欄標(biāo)簽

• <footer>：尾部標(biāo)簽

新增語義化標(biāo)簽.png

注意：

• 這種語義化標(biāo)準(zhǔn)主要是針對(duì)搜索引擎的
• 這些新標(biāo)簽頁面中可以使用多次
• 在IE9中哗戈，需要把這些元素轉(zhuǎn)換為塊級(jí)元素
• 其實(shí)郊艘，移動(dòng)端更喜歡使用這些標(biāo)簽
• HTML5還增加了很多其他標(biāo)簽

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

新增的多媒體標(biāo)簽主要包含兩個(gè)：

1. 音頻：<audio>
2. 視頻：<video>

使用它們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用flash和其他瀏覽器插件唯咬。

1.2.1 視頻<video>

當(dāng)前<video>元素支持三種視頻格式：盡量使用mp4格式

語法

<video src="文件地址" controls="controls"></video>

<video controls="controls" width="300">
    <source src="move.ogg" type="video/ogg">
    <source src="move.mp4" type="video/mp4">
    您的瀏覽器暫不支持<video>標(biāo)簽播放視頻
</video>

視頻<video>——常見屬性

1.2.2 音頻<audio>

當(dāng)前<audio>元素支持三種音頻格式：

語法

<audio src="文件地址" controls=“controls”></audio>

<audio controls="controls">
    <source src="happt.mp3" type="audio/mpeg">
    <source src="happt.ogg" type="audio/ogg">
    您的瀏覽器暫不支持<audio>標(biāo)簽
</audio>

音頻<audio>——常見屬性

• 谷歌瀏覽器把音頻和視頻自動(dòng)播放禁止了

1.2.3 多媒體標(biāo)簽總結(jié)

• 音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致
• 瀏覽器支持情況不同
• 谷歌瀏覽器把音頻和視頻自動(dòng)播放禁止了
• 可以給視頻標(biāo)簽添加muted屬性來靜音播放視頻，音頻不可以(音頻用js解決)
• 視頻經(jīng)常設(shè)置自動(dòng)播放顶掉，不使用controls控件草娜，循環(huán)和設(shè)置大小屬性

1.3 HTML5新增的input類型

1.4 HTML5新增的表單屬性

二、CSS的新特性

2.1 CSS3的現(xiàn)狀

• 新增的CSS3特性有兼容性問題老充，ie9+才支持
• 移動(dòng)端支持優(yōu)于PC端
• 不斷改進(jìn)中
• 應(yīng)用相對(duì)廣泛
• 主要學(xué)習(xí)：新增選擇器和盒子模型以及其他特性

CSS3新增選擇器

CSS3給我們新增了選擇器葡盗，可以更加便捷，更加自由的選擇目標(biāo)元素啡浊。

1. 屬性選擇器
2. 結(jié)構(gòu)偽類選擇器
3. 偽元素選擇器

2.2屬性選擇器

屬性選擇器可以根據(jù)元素特定屬性的來選擇元素觅够。這樣就不用借助于類或者id選擇器。

注意：類選擇器巷嚣、屬性選擇器喘先、偽類選擇器，權(quán)重為10.

代碼示例如下

<input type="text" value="請(qǐng)輸入用戶名">
<input type="password">

input[value]{
    color:pink;
}
input[type=password]{
    color:blue;
}

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

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

區(qū)別：

1. nth-child對(duì)父元素里面所有孩子排序選擇（序號(hào)是固定的）先找到第n個(gè)孩子窘拯，然后看看是否和E匹配
2. nth-of-type對(duì)父元素里面指定子元素進(jìn)行排序選擇红且。先去匹配E，然后再根據(jù)E找第n個(gè)孩子

代碼示例如下：

<ul>
    <li>demo01</li>
    <li>demo02</li>
    <li>demo03</li>
    <li>demo04</li>
</ul>

ul li:first-child{
    background-color:pink;
}

nth-child(n)選擇某個(gè)父元素的一個(gè)或多個(gè)特定的子元素

• n可以是數(shù)字涤姊，關(guān)鍵字和共識(shí)

• n如果是數(shù)字直焙，就是選擇第n個(gè)子元素，里面數(shù)字從1開始...

• n可以是關(guān)鍵字：even偶數(shù)砂轻，odd奇數(shù)

• n可以是公式：常見的公式如下（如果n是共識(shí)奔誓，則從0開始計(jì)算，但是第0個(gè)元素或者超出了元素的個(gè)數(shù)會(huì)被忽略）

2.4 偽元素選擇器（重點(diǎn)）

偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素搔涝，而不需要HTML標(biāo)簽厨喂，從而簡化HTML結(jié)構(gòu)。

注意：

• before和after創(chuàng)建一個(gè)元素庄呈，但是屬于行內(nèi)元素
• 新創(chuàng)建的這個(gè)元素在文檔樹中是找不到的蜕煌，所以我們稱為偽元素
• 語法：element::before{}
• before和after必須有content屬性
• before在父元素內(nèi)容的前面創(chuàng)建元素，after在父元素內(nèi)容的后面插入元素
• 偽元素選擇器和標(biāo)簽選擇器一樣诬留，權(quán)重為1

2.5 CSS3盒子模型

CSS3中可以通過box-sizing來指定盒子模型斜纪，有2個(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ì)超過width寬度）

2.6 CSS3其他特性（了解）

CSS3濾鏡filter：

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

filter:函數(shù)(); 例如：filter:blur(5px); blur模糊處理 數(shù)值越大越模糊

添加模糊.png

CSS3 calc函數(shù)：

calc() 此CSS函數(shù)讓你在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算因块。

width:calc(100%-80px);

括號(hào)里面可以使用+-*/來進(jìn)行計(jì)算。

2.7 CSS3過渡（重點(diǎn)）

過渡（transition）是CSS3中具有顛覆性的特征之一籍铁，我們可以在不使用Flash動(dòng)畫或JavaScript的情況下涡上，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

過渡動(dòng)畫：是從一個(gè)狀態(tài)漸漸的過渡到另外一種狀態(tài)

經(jīng)常和 :hover 一起搭配使用

transition:要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始;

1. 屬性：想要變化的css屬性拒名，寬度高度 背景顏色 內(nèi)外編劇都可以吩愧。all是所有的屬性都變化過渡。
2. 花費(fèi)時(shí)間：單位是 秒（必須寫單位）比如0.5s
3. 運(yùn)送曲線：默認(rèn)是ease（可省略）
4. 何時(shí)開始：單位是 秒（必須寫單位）可以設(shè)置延遲出發(fā)時(shí)間 默認(rèn)是0s（可以省略）

transition: width .5s ease 1s; /*單屬性*/
transition: width .5s,height .5s; /*多屬性*/
transition: all .5s; /*全部屬性*/