1 HTML 5

html5包含htm5 + css3 + javascript

1.1 新增語義標簽

頭部

導航欄

塊級

內容

側邊欄

腳部

注意：可以多次使用；ie9中需要轉換為塊級元素；針對搜索引擎；針對于移動端；

1.2 新增多媒體標簽

1.2.1 音頻標簽 audio

格式：ogg.mp3.

瀏覽器版本太低，不支持本音頻，請升級瀏覽器！

屬性：

controls:顯示播放按鈕

loop:loop 循環

autoplay:autoplay:自動播放 谷歌禁用了該功能

src:音頻url

不同瀏覽器支持的格式不同，采取方案是為音頻準備多個格式

1.2.2 視頻模式 video

格式：ogg,mp4,webm

你的瀏覽器版本太低，請升級瀏覽器

屬性：

src:視頻的url

controls:顯示播放控件

autoplay:自動播放

muted:靜音播放 解決谷歌自動播放問題

loop:循環

poster:加載等待時顯示的內容

1.3 新增的表單標簽 表單屬性

1.郵箱

2.網址

3.日期

4.time month week

5. 數字

6.手機號碼

7.搜索框

8.顏色選擇表單

屬性：

1. required 內容不能為空

2. placeholder="請輸入內容" 提示文字 占位符

3. autofocus 自動定位光標

4.multiple:多文件提交

5.autocomplete:on off 默認打開 默認提示輸入過的內容 必須有name屬性 成功提交過

2 CSS3

2.1 新增css3選擇器

2.1.1 css3屬性選擇器

button[disabled]{

cursor:pointer;

}

/*標簽[屬性名]{

} 屬性選擇器 類選擇器 偽類選擇器權重 0010

標簽[屬性名="屬性值"]{

}

標簽[屬性名^="val"]{

以val開頭的

}

標簽[屬性名$="val"]{

以val結尾的

}

標簽名[屬性名*="val"]{

包含val的

}*/

2.1.2 css3結構偽類選擇器

E:first-child 匹配第一個子元E

E:last-child 匹配最后一個子元素E

E:nth-child(n) 匹配父元素中的第n個子元素 不管子元素的類型

n可以是數字 公式 關鍵字 even 偶數 odd 奇數 如果公式，n從0開始計算

2n:偶數

2n+1:奇數

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 偽元素選擇器 權重為0001

div{

width：20px;

height:20px;

border:1px solid red;

}

div::before{

content:'我'；/*內容的前面 是inline 改 inline-block*/

}

div::after{

content:"你"; /*內容的后面*/

}

2.2 轉換

2.2.1 2D轉換

轉換transform:轉換就是變形。

2.2.1.1 平移 translate

1.移動 translate

div{

width:100px;

height；100px;

transform:translate(100px,100px); /*水平移動100px 垂直移動100px*/

}

/*注意：不會影響其他盒子的位置

translate對于行內元素是無效的*/

/*實現垂直居中*/

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%); /* 跟%是相對于盒子自身來說的*/

}

2.2.1.2 旋轉 rotate

div{

transform:rotate(40deg); /*負值就是逆時針旋轉*/

transform-origin:left bottom;/* 默認50% 50% = center center 也可以是像素 */

}

2.2.1.3 縮放 scale

div{

transform:scale(2,1); x,y

/*等比例縮放：*/

transform:scale(2);

/*進行縮小 小于1*/

transform:scale(0.4);

}

優勢：

不會影響其他盒子，而且可以設置縮放中心點

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; /*重復次數*/

animation-direction:normal; /*alternate; 是否反方向播放*/

animation-fill-mode:backwards;/* forwards; 結束時的狀態*/

animation-play-sate:paused;/* running 控制動畫停止或者播放*/

/*animation:名稱 時間 曲線 開始時間 播放次數 是否反向 動畫起始或者結束狀態*/

}

@keyframs move{

0% from{

transform:translateX(0px);

}

100% to{

transform:translateX(1000px);

}

}

4. 3D轉換

3d:近大遠小

1、3d位移

body{

perspective: 500px; /*透視；讓網頁中產生透視效果; 透視寫在被觀察的父盒子上*/

}

div{

transform:translateX() translateY() translateZ();

transform:translate3d(); /*x,y,z 不能省略，沒有直接寫0 */

}

2、3d旋轉 rotate3d();

div{

transform:rotateX();

transform:rotateY();

transform:rotateZ();

transform:rotate3d(x,y,z,deg);

transform:rotate3d(1,0,0,45deg); /* 沿x軸旋轉 */

}

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); /*從左上角到右下 角進行漸變 */

}