HTML5和CSS3提高
HTML5的新特性
新特性 有兼容性問題，基本上都是IE9+以上版本的瀏覽器才支持。
div對於搜索引擎來說是沒有語義的
HTML5新增的語義化標籤
- <header>:頭部標籤
- <nav>:導航標籤
- <article>: 內容標籤
- <section>:定義文檔某個區域 相當於大號的div
- <aside>: 側邊欄標籤
- <footer>:尾部標籤
注意： 1. 這種語義化標準主要是針對搜索引擎的；
- 這些新標籤頁面中可以使用多次；
- 在IE9中，需要把這些元素轉換爲塊級元素；
- 其中，我們移動端更喜歡使用這些標籤；
- HTML5還增加了很多其他標籤，我們後面再慢慢學。
HTML5新增的多媒體標籤
包含兩個：1. <auto>音頻
- <video>視頻，<video>元素支持三種視頻格式：MP4,Webm和Ogg。儘量使用mp4格式。
<video src=”文件地址” controls=”controls”></video>
<video width:”320” height=”240” controls>
<source src=”movie.mp4” type=”video/mp4”>
<source src=”movie.ogg” type=”video.ogg”>
您的瀏覽器不支持video標籤
</video>
怎樣下載視頻： 在對應的網頁中點擊右鍵，選擇“檢查”，點擊該視頻找到對應的video中的src，右鍵，選擇open in new tab， 打開視頻後右鍵另存爲。
<video src=”media/mi.mp4” autoplay=”autoplay” muted=”muted></video>谷歌瀏覽器可以自動播放。
.video{
width: 100%;
}
<!-- autoplay表示自動播放，muted表示允許谷歌自動播放 controls表示顯示控件，比如播放按鈕等
loop表示自動循環播放 poster表示等待加載時顯示的圖片 -->
3. 音頻<audio>
支持三種音頻格式
<audio src=”文件地址” controls=”controls”></a
<audio controls=”controls”>
<source src=”happy.mp3” type=”audio/mpeg”>
<source src=”happy.oog” type=”autio/ogg”>
您的瀏覽器暫不支持<autio>標籤
</audio>
4. 新增搜索表單
<input type=”search”>
5. HTML5新增的表單屬性
屬性
-->
<form action="">
ltCSS3的新特性
有兼容性問題ie9才支持
- 新增選擇器
- 屬性選擇器 （也有權重，權重值爲10）
Input[value]{ color: pink; }
- 結構僞類選擇器
主要根據文檔結構來選擇器元素， 常用於根據父級選擇器裏面的子元素。
nth-child(n) 選擇某個父元素的一個或多個特定的子元素。
n可以是數字，關鍵字和公式
n如果是數字就選擇第n個子元素，裏面數字從1開始...
n可以是關鍵字：even偶數，odd奇數
n可以是公式
隔行變色
/* nth-child與nth-of-type的區別
- nth-child對父元素裏面所有孩子排序選擇（序號是固定的）先找到第n個孩子，然後看看是否和E匹配。
- nth-of-type對父元素裏面指定子元素進行排序選擇。先去匹配E，然後再根據E找第n個孩子。
- 無序列表nth-child更多。
/
* nth-child與nth-of-type的區別 */
1.1. 僞元素選擇器（當在盒子裏插入一些裝飾的小標籤時使用）
::before 在元素內部的前面插入內容
::after 在元素內部的後面插入內容
Content: ‘’; 是必填內容
注意：
before和after創建一個元素，但是屬於行內元素
新創建的這個元素在文檔樹中是找不到的，所以我們稱爲僞元素
語法：element::before{}
before和after必須有content屬性
before在父元素內容的前面創建元素，after在父元素內容的後面插入
僞元素選擇器的應用：
/* 僞
元素選擇器使用場景2: 仿土豆效果 即一個圖片有遮
後面兩種僞元素 清除浮動算是第一種額外標籤法的一個升級和優化
- 圖片模糊處理
CSS3濾鏡filter filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。blur是函數。
filter:函數(); 例如：filter:blur(5px); blur模糊處理 數值越大越模糊。
im
/* blur
是函數，數值越大越模糊 */
filte
1. 計算盒子寬度width: calc函數
calc()此CSS函數讓你在聲明CSS屬性值時執行一些計算
width: calc(100% -80px);
括號裏可以使用+-*/
/* 計算
盒子寬度width: calc函數 */
4. CSS3過渡（重點） 誰做過渡給誰加
過渡動畫：是從一個狀態漸漸的過渡到另外一個狀態，經常和：hover一起搭配使用
transition:要過渡的屬性 花費時間運動曲線 何時開始；
- 屬性：想要變化的css屬性 寬度高度 背景顏色 內外邊距都可以。如果想要所有屬性都變化過渡，寫一個all就可以了。
- 花費時間：單位是秒（必須寫單位）比如0.5s
- 運動曲線：默認是ease（可以省略）
- 何時開始：單位是秒（必須寫單位）可以設置延遲觸發時間 默認是0s（可以省略）
/* 
css過渡 */
比如進度條就利用過渡 css過渡練習-進度條 */
.b
- H5介紹
廣義的html5是html5本身+css3+javascript
ar {
width: 150px;
height: 30px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
<!-- css過渡練習-進度條 -->
<div class="bar">
<div class="bar_in"></div>
罩層*/
.tudou::before{
content: '';
/* 隱藏遮罩層 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4) url(image...) no-repeat center;
}
.tudou:hover::before{
display: block;
}
/* 僞元素選擇器使用場景3: 清除浮動 */
.clearfix:before,.clearfix:after{
content: '';
display: table;
}
.clearfix:after{
clear: both;
}
<!-- 僞元素選擇器使用場景1：僞元素字體圖標 -->
<div></div>
<!-- 僞元素選擇器使用場景2: 仿土豆效果 即一個圖片有遮罩層 -->
<div class="tudou">
<img src="" alt="">
</div>
<!-- 僞元素選擇器使用場景3: 清除浮動 -->