HTML5 和 CSS3 提高

HTML5 提高-新增語義化標(biāo)簽?

問題 1：HTML 5 新特性有兼容性問題嗎输拇？IE 多少版本以上的瀏覽器才能支持世杀？?

HTML5 的新特性都有兼容性問題子姜，基本是 IE9+ 以上版本的瀏覽器才支持； 如果不考慮兼容性問題陕悬，可以大量使用這些新特性灌诅。

問題 2：HTML5 新增的語義化標(biāo)簽有什么好處？

?有利于搜索引擎搜索和網(wǎng)站的 SEO （Search Engine Optimization单刁，搜索引擎優(yōu)化）灸异。?

問題 3：視頻中介紹了哪些 HTML 5 的語義標(biāo)簽？分別可以用在布局的什么位置？

HTML5 新增視頻標(biāo)簽?

問題 1：HTML5 主要新增了哪兩個(gè)多媒體標(biāo)簽肺樟？

?video 視頻標(biāo)簽 audio 音頻標(biāo)簽?

問題 2： video 標(biāo)簽支持幾種視頻格式檐春？推薦使用哪一種格式？

問題 3： video 標(biāo)簽是單標(biāo)簽還是雙標(biāo)簽么伯？ img 標(biāo)簽?zāi)兀?/p>

?video 是雙標(biāo)簽喇聊，可以針對不同瀏覽器提供不同格式的視頻；

?img 是單標(biāo)簽蹦狂，指定 src 既可以顯示圖像誓篱，不存在瀏覽器兼容問題。

<video width="320" height="240" controls>?

<source src="movie.mp4" type="video/mp4" />

?<source src="movie.ogg" type="video/ogg" />?

</video>

問題 4： video 標(biāo)簽提供了哪些控制播放的屬性凯楔？

問題 5： video 標(biāo)簽的寬高屬性可以通過 CSS 控制嗎窜骄？

可以

HTML5 新增音頻標(biāo)簽

問題 1： audio 標(biāo)簽支持幾種音頻格式？推薦使用哪一種格式摆屯？

推薦使用 mp3 格式的音頻?

問題 2： audio 標(biāo)簽是單標(biāo)簽還是雙標(biāo)簽邻遏？ img 標(biāo)簽?zāi)兀?

audio 是雙標(biāo)簽，可以針對不同瀏覽器提供不同格式的音頻虐骑；

img 是單標(biāo)簽准验，指定 src 既可以顯示圖像，不存在瀏覽器兼容問題廷没。

<audio controls>

?<source src="horse.ogg" type="audio/ogg" />

?<source src="horse.mp3" type="audio/mpeg" />

?</audio>

問題 3： audio 標(biāo)簽提供了哪些控制播放的屬性糊饱？

問題 4： audio 標(biāo)簽的使用和 video 標(biāo)簽的使用有什么共同點(diǎn)？應(yīng)該如何記憶和使用颠黎？

?1. 音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致

?2. 瀏覽器支持情況不同?

1. 視頻使用 mp4 格式 2. 音頻使用 mp3 格式?

3. 谷歌瀏覽器禁用了音頻和視頻的自動(dòng)播放?

1. 視頻標(biāo)簽添加 muted 屬性來靜音播放視頻 2. 音頻不可以（可以通過 JavaScript 解決）

?4. 視頻標(biāo)簽是重點(diǎn)另锋，我們經(jīng)常設(shè)置自動(dòng)播放，不使用 controls 控件狭归，循環(huán)和設(shè)置大小屬 性夭坪。

HTML5 新增 input 表單

問題 1：HTML5 為什么新增很多的表單 input 類型？?

方便程序員的開發(fā)过椎，與表單域聯(lián)用室梅，不同的 input 類型能夠自動(dòng)添加校驗(yàn)功能； 方便移動(dòng)端的開發(fā)疚宇，不同的 input 類型亡鼠，鍵盤的彈出方式不同。

問題 2：需要重點(diǎn)記憶那三個(gè) input 類型灰嫉？?

需要重點(diǎn)記憶： number 拆宛、 tel 、 search 三個(gè) input 類型讼撒；

常用輸入類型： text 浑厚、 password 股耽、 radio 、 checkbox 钳幅、 button 物蝙、 file 、 hidden 敢艰、 submit 诬乞、 reset 。

HTML5 新增表單屬性

CSS3 選擇器

CSS3 新增屬性選擇器

問題 1：新增的 CSS3 特性有兼容性問題嗎钠导？在開發(fā)中要使用嗎震嫉？?

CSS3 的新特性都有兼容性問題，IE9+ 以上版本的瀏覽器才支持牡属； 在開發(fā)中要使用票堵，這是因?yàn)橐苿?dòng)端支持優(yōu)于 PC 端。

問題 2：我們今天會(huì)學(xué)習(xí)哪 3 類選擇器逮栅？

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

問題 3：屬性選擇器的作用是什么悴势？一定要記住的語法是什么？

可以根據(jù)元素屬性來選擇元素措伐。

屬性選擇器語法

問題 1：屬性選擇器的權(quán)重是多少特纤？

CSS3 新增結(jié)構(gòu)偽類選擇器-選擇第 n 個(gè)元素

問題 1：結(jié)構(gòu)偽類選擇器的作用是什么？

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

問題 2： nth-child 的 n 是數(shù)字是從 0 開始還是從 1 開始？

?從 1 開始官硝，數(shù)字是幾就選擇第幾個(gè)孩子矗蕊。

問題 1： nth-child 的 n 的可以使用哪些關(guān)鍵字短蜕？分別代表什么含義氢架？

even 偶數(shù) / odd 奇數(shù)

問題 2： nth-child 中可以使用 n 嗎？表示什么含義朋魔？能用其他字母嗎岖研？?

nth-child 可以使用 n ，但是不能使用其他字母警检； 直接使用 n 會(huì)選擇所有孩子 n 表示從 0 開始孙援，每次加 1，依次向后面計(jì)算扇雕，超出范圍的元素會(huì)被忽略拓售。

CSS3 新增 nth-child 選擇器常用公式

問題 1： nth-child 和 nth-of-type 有什么區(qū)別？

E:nth-child(n)?

會(huì)先把所有的盒子都排列序號?

首先根據(jù) :nth-child(n) 找到孩子镶奉，再去看前面的 E 是否匹配础淤。?

E:nth-of-type(n)?

會(huì)把指定元素 E 的盒子排列序號

?首先看 E 指定的元素崭放，之后再去看 :nth-of-type 的第幾個(gè)孩子。?

問題 2： nth-child 和 nth-of-type 哪一個(gè)用的多鸽凶？為什么币砂？

nth-child?

開發(fā)時(shí)，結(jié)構(gòu)偽類選擇器大多用于無序列表 ul 或有序列表 ol

CSS3 新增偽元素選擇器使用場景和由來

問題 1：偽元素選擇器的作用是什么玻侥？

?偽元素選擇器可以利用 CSS 創(chuàng)建新標(biāo)簽元素决摧，而不需要 HTML 標(biāo)簽，從而簡化 HTML 結(jié)構(gòu)凑兰。

問題 2：偽元素是真正意義的元素嗎掌桩？?

偽元素不是真正意義的元素，是通過 CSS 創(chuàng)建的姑食。

問題 3：我們重點(diǎn)要學(xué)習(xí)哪兩個(gè)偽元素拘鞋？偽元素和偽類在語法上有什么區(qū)別？

?::before 和 ::after?

從語法結(jié)構(gòu)上看

偽元素使用 :: 開頭矢门，關(guān)鍵字內(nèi)容盆色；?

偽類使用 : 開頭，關(guān)鍵字狀態(tài)祟剔。?

問題 4： ::before 和 ::after 屬于行內(nèi)元素嗎隔躲？

屬于

問題 1： ::before 和 ::after 會(huì)在什么位置創(chuàng)建元素？

?::before 在父元素內(nèi)容的前面插入元素物延； ::after 在父元素內(nèi)容的后面插入元素宣旱。

問題 2： ::before 和 ::after 必須要指定什么屬性？

?content 屬性?

問題 3：偽元素選擇器的權(quán)重是多少叛薯？

?偽元素選擇器的權(quán)重是 1

偽元素選擇器使用場景 3-偽元素清除浮動(dòng)本質(zhì)

四種清除浮動(dòng)的方式

1. 額外標(biāo)簽法也稱為隔墻法浑吟，是 W3C 推薦的做法；

?2. 父級添加 overflow 屬性耗溜；

?3. 父級添加 after 偽元素组力；

?4. 父級添加雙偽元素。

CSS3 盒子模型 border-box

問題 1：CSS3 中可以哪一個(gè)屬性來指定盒子模型抖拴？

box-sizing?

問題 2： box-sizing 屬性有幾個(gè)值燎字，設(shè)置了哪一個(gè)值之后，設(shè)置 padding 阿宅、 border 不 會(huì)影響盒子的大泻蜓堋？

?content-box ：盒子大小為 width + padding + border （以前默認(rèn)的）洒放；

?border-box ：盒子大小為 width 蛉鹿，設(shè)置 padding 、 border 不會(huì)影響盒子的大小往湿。

CSS3 圖片模糊處理

問題 1：CSS3 中給圖片增加濾鏡是哪一個(gè)屬性妖异？

?filter 屬性

?問題 2：這個(gè)屬性的哪一個(gè)函數(shù)可以對圖片做模糊處理惨好？語法格式是什么？

?blur 函數(shù) 語法： filter: blur(5px); 數(shù)值越大越模糊 數(shù)值為 0 最清晰（不做模糊處理）

計(jì)算盒子寬度 calc 函數(shù)

問題 1：CSS3 可以使用哪一個(gè)函數(shù)計(jì)算盒子的寬度随闺？應(yīng)用場景是什么日川？

?calc 函數(shù)； width: calc(100% - 80px); 可以讓子盒子永遠(yuǎn)比父盒子的寬度小 80px

類似京東商城的商品列表下方的水平滾動(dòng)條的寬度矩乐，可以用這種方法處理龄句。

CSS3 新增屬性過渡

問題 1：CSS3 中可以通過哪一個(gè)屬性實(shí)現(xiàn)過渡動(dòng)畫效果？

transition?

問題 2：過渡動(dòng)畫的應(yīng)用場景是什么散罕？經(jīng)常和什么一起搭配使用分歇？

是從一個(gè)狀態(tài)漸漸的過渡到另外一個(gè)狀態(tài)，從一個(gè)屬性值欧漱，過渡到另外一個(gè)屬性值职抡；

?經(jīng)常和 :hover 一起搭配使用，讓頁面更好看误甚，且動(dòng)感十足缚甩。

問題 3：過渡動(dòng)畫的語法是什么？初期最應(yīng)該記住哪一個(gè)窑邦？

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