1 HTML 5
html5包含htm5 + css3 + javascript
1.1 新增語義標簽
<header></header> 頭部
<nav></nav> 導(dǎo)航欄
<section></section> 塊級
<article></article> 內(nèi)容
<aside></aside> 側(cè)邊欄
<footer></footer> 腳部
注意：可以多次使用；ie9中需要轉(zhuǎn)換為塊級元素；針對搜索引擎；針對于移動端；
1.2 新增多媒體標簽
1.2.1 音頻標簽 audio
格式：ogg.mp3.
<audio>瀏覽器版本太低，不支持本音頻，請升級瀏覽器！</audio>
屬性：
controls:顯示播放按鈕
loop:loop 循環(huán)
autoplay:autoplay:自動播放 谷歌禁用了該功能
src:音頻url
不同瀏覽器支持的格式不同，采取方案是為音頻準備多個格式
1.2.2 視頻模式 video
格式：ogg,mp4,webm
<video>你的瀏覽器版本太低，請升級瀏覽器</video>
屬性：
src:視頻的url
controls:顯示播放控件
autoplay:自動播放
muted:靜音播放 解決谷歌自動播放問題
loop:循環(huán)
poster:加載等待時顯示的內(nèi)容
1.3 新增的表單標簽 表單屬性
1.郵箱
<input type="email" />
2.網(wǎng)址
<input type="url" />
3.日期
<input type="date" />
4.time month week
<input type="tinme" />
5. 數(shù)字
<input type="number" />
6.手機號碼
<input type="tel" />
7.搜索框
<input type="search" />
8.顏色選擇表單
<input type="color" />
屬性：
1. required 內(nèi)容不能為空
2. placeholder="請輸入內(nèi)容" 提示文字 占位符
3. autofocus 自動定位光標
4.multiple:多文件提交
5.autocomplete:on off 默認打開 默認提示輸入過的內(nèi)容 必須有name屬性 成功提交過
2 CSS3
2.1 新增css3選擇器
2.1.1 css3屬性選擇器
<style>
button[disabled]{
cursor:pointer;
}
/*標簽[屬性名]{
} 屬性選擇器 類選擇器 偽類選擇器權(quán)重 0010
標簽[屬性名="屬性值"]{
}
標簽[屬性名^="val"]{
以val開頭的
}
標簽[屬性名$="val"]{
以val結(jié)尾的
}
標簽名[屬性名*="val"]{
包含val的
}*/
</style>
<button disabled ></button>
<button></button>
2.1.2 css3結(jié)構(gòu)偽類選擇器
E:first-child 匹配第一個子元E
E:last-child 匹配最后一個子元素E
E:nth-child(n) 匹配父元素中的第n個子元素 不管子元素的類型
n可以是數(shù)字 公式 關(guān)鍵字 even 偶數(shù) odd 奇數(shù) 如果公式，n從0開始計算
2n:偶數(shù)
2n+1:奇數(shù)
5n:5 10 15
n+5:從第5個開始
-n+5:前5個 包含第5個
注意：0和超過的不顯示
E:first-of-type 指定類型的第一個
E:last-of-type 指定類型的最后一個
E:nth-of-type(n) 指定類型的第n個
2.1.2 偽元素選擇器 權(quán)重為0001
div{
width：20px;
height:20px;
border:1px solid red;
}
div::before{
content:'我'；/*內(nèi)容的前面 是inline 改 inline-block*/
}
div::after{
content:"你"; /*內(nèi)容的后面*/
}
2.2 轉(zhuǎn)換
2.2.1 2D轉(zhuǎn)換
轉(zhuǎn)換transform:轉(zhuǎn)換就是變形。
2.2.1.1 平移 translate
1.移動 translate
<style>
div{
width:100px;
height；100px;
transform:translate(100px,100px); /*水平移動100px 垂直移動100px*/
}
/*注意：不會影響其他盒子的位置
translate對于行內(nèi)元素是無效的*/
/*實現(xiàn)垂直居中*/
div{
width:500px;
height:500px;
background:pink;
position:relative;
}
p{
width:200px;
height:200px;
background:blue;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); /* 跟%是相對于盒子自身來說的*/
}
</style>
2.2.1.2 旋轉(zhuǎn) rotate
<style>
div{
transform:rotate(40deg); /*負值就是逆時針旋轉(zhuǎn)*/
transform-origin:left bottom;/* 默認50% 50% = center center 也可以是像素 */
}
</style>
2.2.1.3 縮放 scale
<style>
div{
transform:scale(2,1); x,y
/*等比例縮放：*/
transform:scale(2);
/*進行縮小 小于1*/
transform:scale(0.4);
}
</style>
優(yōu)勢：
不會影響其他盒子，而且可以設(shè)置縮放中心點
2.2.1.4 綜合寫法
div{
transform:translate() rotate() scale()；
/*位移和其他屬性一起寫，位移必須放在最前面；*/
}
3.動畫
animation:動畫
使用：1.先定義動畫 2.再使用動畫
div{
width:200px;
height:200px;
background:yellow;
animation-name:move;
animation-duration:5s;
animation-timing-function:ease;/*ease-in; ease-out; 速度曲線*/
animation-delay:1s;/* 延長時間*/
animation-iteration-count:infinite; /*重復(fù)次數(shù)*/
animation-direction:normal; /*alternate; 是否反方向播放*/
animation-fill-mode:backwards;/* forwards; 結(jié)束時的狀態(tài)*/
animation-play-sate:paused;/* running 控制動畫停止或者播放*/
/*animation:名稱 時間 曲線 開始時間 播放次數(shù) 是否反向 動畫起始或者結(jié)束狀態(tài)*/
}
@keyframs move{
0% from{
transform:translateX(0px);
}
100% to{
transform:translateX(1000px);
}
}
4. 3D轉(zhuǎn)換
3d:近大遠小
1、3d位移
body{
perspective: 500px; /*透視；讓網(wǎng)頁中產(chǎn)生透視效果; 透視寫在被觀察的父盒子上*/
}
div{
transform:translateX() translateY() translateZ();
transform:translate3d(); /*x,y,z 不能省略，沒有直接寫0 */
}
2、3d旋轉(zhuǎn) rotate3d();
div{
transform:rotateX();
transform:rotateY();
transform:rotateZ();
transform:rotate3d(x,y,z,deg);
transform:rotate3d(1,0,0,45deg); /* 沿x軸旋轉(zhuǎn) */
}
3.transform-style 控制子元素是否開啟3d
div{
transform-style:preserve-3d; /* 給父盒子添加 */
}
5. 瀏覽器的私有前綴
div{
-moz-:火狐
-ms-:ie
-webkit-:safari,chrome
-o-:Opera
-o-border-radius:10px;
}
6 補充
1. 線性漸變
背景漸變必須添加瀏覽器私有前綴；
默認是從上往下顯示
div{
background:-webkit-linear-gradient(left,red,blue);
background:-webkit-linear-gradient(left top,red,blue); /*從左上角到右下 角進行漸變 */
}
