HTML5新特性
語義化標(biāo)簽
<header>頭部標(biāo)簽
<nav>導(dǎo)航欄標(biāo)簽
<article>內(nèi)容標(biāo)簽
<section>區(qū)域標(biāo)簽
<aside>側(cè)邊欄標(biāo)簽
<footer>尾部標(biāo)簽
多媒體標(biāo)簽
<audio>僅支持mp3, wav, ogg
<video>僅支持mp4, webM, ogg博其,盡量使用mp4
input類型
A.type新增email, date, number, search等
B.屬性新增required, placeholder, autocomplete(on/off), multiple(file)
注:修改placeholder
input::placeholder {
color: red
}
CSS3新特性
1.新增選擇器:
A.屬性選擇器
E[attr] /* 選擇具有attr屬性的元素 */
E[attr="val"] /* 選擇具有attr屬性且等于val的元素 */
E[attr^="val"] /* 選擇具有attr屬性且以val開頭的元素 */
E[attr$="val"] /* 選擇具有attr屬性且以val結(jié)尾的元素 */
E[attr*="val"] /* 選擇具有attr屬性且含有val的元素 */
/* 示例 */
/* 必須是input 但是同時(shí)具有 value這個(gè)屬性 選擇這個(gè)元素 [] */
input[value] {
color: pink;
}
/* 只選擇 type =text 文本框的input 選取出來 */
input[type=text] {
color: pink;
}
/* 選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */
div[class^=icon] {
color: red;
}
/* !注:類選擇器和屬性選擇器 偽類選擇器 權(quán)重都是 10 */
B.結(jié)構(gòu)偽類選擇器
C.偽元素選擇器