- 能夠說出3~5個HTML5新增布局和表單標簽
- 能夠說出CSS3的新增特性有哪些
1. HTML5的新特性
HTML5的新增特性主要是針對以前的不足怜俐，增加了一些新的標簽足陨、新的表單和新的表單屬性等飞傀。
這些新特性都有兼容性問題勘天，基本是IE9+以上版本的瀏覽器才支持高帖，如果不考慮兼容性問題找御，可以大量使用這些新特性舔稀。
聲明：
- 新特性增加了很多乳丰，但是我們專注于開發(fā)常用的新特性。
- 我們講解部分新特性内贮，到了之后還會繼續(xù)降解其他新特性产园。
1.1 HTML5新增的語義化標簽
以前布局，我們基本用div來做夜郁。div對于搜索引擎來說什燕，是沒有語義的。
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
- <header>:頭部標簽
- <nav>:導航標簽
- <article>:內(nèi)容標簽
- <section>:定義文檔某個區(qū)域
- <aside>:側(cè)邊欄標簽
- <footer>:尾部標簽
注意：
- 這些語義化標準主要是針對搜索引擎的竞端。
- 這些新標簽頁面中可以使用多次
- 在IE9中屎即，需要把這些元素轉(zhuǎn)換為塊級元素
- 其實，我們移動端更喜歡使用這些標簽
- HTML5還增加了很多其他標簽事富，我們后面再慢慢學
1.2 HTML5新增的多媒體標簽
新增的多媒體標簽主要包含兩個：
- 音頻：<audio>
- 視頻：<videl>
使用它們可以很方便的在頁面中嵌入音頻和視頻技俐，而不再去使用flash和其他瀏覽器的插件。
HTML5在不使用插件的情況下统台，也可以原生的支持視頻格式文件的播放雕擂，當然，支持的格式是有限的贱勃。
-
視頻<video>
當前video元素支持三種視頻格式：盡量使用mp4格式
語法
<video src="文件地址" controls="controls"></video>
常見屬性
- autoplay :(autoplay)視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放問題）
- controls:(controls)向用戶顯示播放控件井赌。
- width:(pixels像素）設置播放器寬度
- height:（px）設置播放器高度
- loop:(loop)播放完是否繼續(xù)播放該視頻，循環(huán)播放贵扰。
- preload:(auto/none)是否預加載視頻仇穗，如果有了auto，就會忽略該屬性
- src:(url)視頻url地址
- poster:(imgurl)加載等待的畫面圖片
- muted:(muted)靜音播放
如果遇上不支持MP4格式的瀏覽器戚绕，可以用以下方法（僅做了解）：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持video標簽纹坐。
</video>
一般情況下mp4足夠使用。
3. 音頻<audio>
當前<audio>元素支持三種音頻格式：
語法：
照顧兼容性也有以下寫法：
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的瀏覽器暫不支持<audio>標簽列肢。
</audio>
- autoplay:(autoplay)如果出現(xiàn)該屬性恰画，則音頻在就緒后馬上播放宾茂。
- controls:(controls）如果出現(xiàn)該屬性，則向用戶顯示控件拴还，比如播放按鈕跨晴。
- loop:(loop)如果出現(xiàn)該屬性，則循環(huán)播放音頻片林。
- src:(url)要播放的音頻的
注意：谷歌瀏覽器把音頻和視頻自動播放禁止了
3. 多媒體標簽總結(jié)
- 音頻標簽和視頻標簽使用方式基本一致
- 瀏覽器支持情況不同
- 谷歌瀏覽器把音頻和視頻自動播放禁止了
- 我們可以給視頻添加muted屬性來靜音播放視頻端盆，音頻不可以（可以通過JavaScript解決）
- 視頻標簽是重點，我們經(jīng)常設置自動播放费封，不使用controls控件焕妙，設置循環(huán)和設置大小屬性。
1.3 HTML5新增的input類型
- type="emall" :限制用戶輸入必須為Emall類型
- type="url" : 限制用戶輸入必須為url類型
- type="date" : 限制用戶輸入必須為日期類型
- type="time" : 限制用戶必須為時間類型
- type="mooth" :限制用戶輸入必須為月份類型
- type="week" : 限制用戶輸入必須為周類型
- type="number" ：限制用戶輸入必須為數(shù)字類型
- type="tel" ：手機號碼
- type="search" : 搜索框
- type="color" : 生成一個顏色選擇表單
在移動端設備上非常常用弓摘。
重點記追偃怠：numer 、 tel 韧献、search這三個末患。
1.4 HTML5新增的表單屬性
- required (required) 表單擁有該屬性表示其內(nèi)容不能為空，必填锤窑。
- placeholder (提示文本）表單的提示信息璧针，存在默認值將不顯示。 - autofocus(autofocus) 自動聚焦屬性渊啰，頁面加載完成自動聚焦到指定表單探橱。
- autocomplete(off/on)：當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值绘证，應該顯示出在字段中填寫的選項隧膏。默認打開。（需要放在表單內(nèi)嚷那，同時加上name屬性私植，同時成功提交過）
- multple（multiple）可以多選文件提交。
可以通過設置方式修改placeholder里面的字體顏色：
input::placeholder{
color:pink;
}
2. CSS3的現(xiàn)狀
- 新增的CSS3特性有兼容性問題车酣，ie9+才支持
- 移動端支持優(yōu)于pc端
- 應用相對廣泛
- 不斷改進中
- 現(xiàn)階段主要學習：新增選擇器和盒子模型以及2d、3d特性
CSS3給我們新增了選擇器索绪，可以更加便捷湖员，更加自由的選擇目標元素。
- 屬性選擇器
- 結(jié)構(gòu)偽類選擇器
- 偽元素選擇器
2.2 屬性選擇器
屬性選擇器可以根據(jù)元素特定的屬性來選擇元素瑞驱。這樣就可以不用借助類或者id選擇器娘摔。
- E[att]: 選擇具有att屬性的E元素
- E[att="val"]：選擇具有att屬性且屬性值等于val的E元素 - E[att^="val"]:匹配具有att屬性且值以val開頭的E元素
- E[att$="val"]:匹配具有att屬性且值以val結(jié)尾的E元素
- E[att*="val"]：匹配具有att屬性且值中含有val的E元素
注意：類選擇器、屬性選擇器唤反、偽類選擇器凳寺，權(quán)重為10鸭津。
2.3 結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來選擇元素，常用于根據(jù)父級選擇器里面的子元素肠缨。
- E:fist-child 匹配父元素E中的第一個子元素
- E:last-child 匹配父元素E中最后一個元素
- E:nth-child(n）匹配父元素E中第n個子元素E
- E:last-of-type 指定類型E的最后一個
- E:nth-of-type(n) 指定類型E的第n個
例
/*1.選擇ul中的第一個孩子 小li*/
/*ul li:first-child{*/
/* background-color: pink;*/
/*}*/
/*ul li:last-child{*/
/* background-color: pink;*/
/*}*/
/*ul li:nth-child(5){*/
/* background-color: skyblue;*/
/*}*/
/*1.把所有的偶數(shù)even的孩子選出來*/
ul li:nth-child(even){
background-color: #cccccc;
}
/*2.把所有的奇數(shù)odd的孩子選出來*/
ul li:nth-child(odd){
background-color: gray;
}
/*3.ntn-child(n)從0開始 每次加1 往后面計算 這里面必須是n 不能是其他的字母*/
ol li:nth-child(n){
background-color: pink;
}
.tast dd:first-child{
display: inline-block;
background-color: pink;
}
nth-child(n) 選擇某個父元素的一個或者多個特定的子元素逆趋。
- n可以是數(shù)字，關鍵字和公式
- n如果是數(shù)字晒奕，就是選擇第n個子元素闻书，里面數(shù)字從1開始..
- n可以是關鍵字：even偶數(shù)，odd奇數(shù)
-
n可以是公式：常見的公式如下（如果n是公式脑慧，則從0開始計算魄眉，但是第0個元素或者超出了元素的個數(shù)會被忽略）
nth-child(n)和nth-of-type(n)的區(qū)別：
- nth-child對父元素里面所有孩子排序選擇（序號是固定的）先找到第n個孩子，然后看看是否和E匹配闷袒。
- nth-of-type對父元素里面指定子元素進行排序選擇坑律。先去匹配E，然后再根據(jù)E找第n個孩子囊骤。
小結(jié)
- 結(jié)構(gòu)偽類選擇器一般用于選擇父級里面的第幾個孩子晃择。
- nth-child對父元素里面所有孩子排序選擇（序號是固定的）先找到第n個孩子，然后看看是否和E匹配淘捡。
- nth-of-type 對父元素里面指定子元素進行排列選擇藕各。先去匹配E，然后再根據(jù)E找第n個孩子焦除。
- 關于nth-child(n)我們要知道n是從0開始計算的激况，要記住常用的公式。
- 如果是無序列表膘魄，我們肯定用nth-child更多
- 類選擇器乌逐、屬性選擇器、偽類選擇器创葡，權(quán)重為10浙踢。
2.4偽元素選擇器（重點）
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標簽元素，而不需要HTML標簽灿渴，從而簡化HTML結(jié)構(gòu)洛波。
- ::before :在元素內(nèi)部的前面插入內(nèi)容
- ::after：在元素內(nèi)部的后面插入內(nèi)容
注意：
- beofore和after創(chuàng)建一個元素，但是屬于行內(nèi)元素骚露。
- 新創(chuàng)建的這個元素在文檔樹中是找不到的蹬挤，所以我們稱為偽元素
- 語法：element::before{}
- before和after必須有content屬性
- before在父元素內(nèi)容前面創(chuàng)建元素，after在父元素內(nèi)容后面插入元素
- 偽元素選擇器和標簽選擇器一樣棘幸，權(quán)重為1
偽元素清除浮動
兩種偽元素清除浮動算是第一張額外標簽法的一個升級和優(yōu)化焰扳。
2.5 CSS3盒子模型
CSS3中可以通過box-sizing來指定盒模型，有2個值：即可指定為content-box、border-box,這樣我們計算盒子大小的方式就發(fā)生了改變吨悍。
可以分成兩種情況：
- box-sizing:content-box 盒子大小為width + padding + border(以前默認的）
- box-sizing:border-box 盒子大小為width
如果盒子模型我們改為了box-sizing:border-box,那padding和border就不會撐大盒子了（前提是padding和border不會超過width寬度）
2.6CSS3其他特性（了解）
- 圖片變模糊
- 計算盒子寬度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);
括號里面可以使用+ - * / 來計算育瓜，且計算符號左右空格不能省略葫隙。
CSS3還增加了一些 動畫 2D 3D等新特性， 之后會有學習爆雹。
2.6 CSS3過渡（重點）
過渡（transition) 是CSS3中具有顛覆性的特征之一停蕉，我們可以在不使用Flash動畫或JavaScript的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果钙态。
過渡動畫：是從一個狀態(tài)漸漸的過渡到另外一個狀態(tài)
可以讓我們頁面更好看慧起，更動感十足，雖然低版本瀏覽器不支持（ie9以下不支持）但是不會影響頁面布局册倒。
現(xiàn)在經(jīng)常和:hover一起搭配使用蚓挤。
語法：
transition:要過渡的屬性 花費時間 運動曲線 何時開始；
- 屬性：想要變化的CSS屬性驻子，寬度高度背景顏色內(nèi)外邊距都可以灿意。如果想要所有的屬性都變化過渡，寫一個all就可以崇呵。
- 花費時間：單位是秒 （必須寫單位） 比如0.5s
- 運動曲線：默認是ease(可以省略）
- 何時開始：單位是秒（必須寫單位）可以設置延遲觸發(fā)時間 默認是0s（可以省略）
2.7 推薦模塊制作
- 大盒子recom 推薦模塊 recommend
- 里面包含2個盒子缤剧，浮動即可
- 1號盒子recom-hd
- 2號盒子recom-bd，注意里面的小豎線
