HTML5新增

表單新增

datalist 元素

datalist 元素規定輸入域的選項列表。

列表是通過 datalist 內的 option 元素建立的。

如需把 datalist 繫結到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

<input type="text" list="search" />
<datalist id="search">
<option  value="111" />
<option  value="222" />
<option  value="111222" />
</datalist>

新增控制元件

color、date、datetime、month、week、url、email、tel、number、range（應該包含一定範圍內數字值的輸入域）、search

媒體元素

音訊

視訊

cavans

 <canvas width="200" height="200" id="one"></canvas>
var one=document.getElementById("one");
var ctx=one.getContext("2d"); //建立2d 畫布
ctx.moveTo(20,0);//開始點
ctx.lineTo(200,200); //結束點
ctx.strokeStyle="red"//線條顏色
ctx.stroke();//畫線

ctx.moveTo(0,100);//開始點
ctx.lineTo(200,100); //結束點
ctx.stroke();//畫線


// 矩形
ctx.strokeRect(20,20,100,50); //空心 x ,y ,寬,高

ctx.fillStyle="red";//填充顏色
ctx.fillRect(100,100,100,50);//實心 -- 預設顏色黑色


// 畫圓
ctx.beginPath();//開始 --畫筆放下
ctx.arc(70,18,60,0,Math.PI,false); 
//ctx.arc(x,y,半徑,開始角度,結束角度,順時針逆時針)
// Math.PI  180deg
// ctx.stroke();
ctx.fill();

ctx.closePath(); //結束 --畫筆抬起

拖放

   drag    拖
            drop    放
        dragable=true
            拖動元素（圖片）
                開始拖動    ： dragstart
                拖動過程中  ：  drag
                結束拖動    ：  dragend
            目標元素 （div）
                進入目標    ：dragenter
                在目標元素上 ：dragover
                釋放        ：drop
                離開目標    ：dragleave

本地儲存

localStorage\ sessionStorage

CSS3新增特性

• 選擇器
• 盒模型
• 背景和邊框
• 文字特效
• 2D/3D轉換
• 動畫
• 多列布局
• 使用者介面

選擇器

屬性選擇器

​ [ 屬性名/自定義屬性 = “值” ]{

​ }

​ =等於 ^開頭 $結尾 ~詞列表包含 *包含

結構偽類

​ :nth-child()

​ :nth-of-type()

​ :first-child

​ :first-of-type

​ :last-child

​ :last-of-type

偽類

​ :disabled

​ :enabled

​ :checked

​ ::selection

​ :not()

​ :read-only

​ :required

盒模型

邊框

​ border-radius

​ box-shadow

​ border-image

背景

​ background-image

​ background-size
​ background-origin
​ background-clip

漸變（Gradients）

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
• 徑向漸變（Radial Gradients）- 由它們的中心定義

文字

​ text-shadow

​ box-shadow
​ text-overflow
​ word-wrap
​ word-break

文字特效

@font-face{

	font-family: "字型名字";

​ src: url(“字型地址”)

}

2D

transform: translate(100px,100px);  位移
transform: scale(0); 縮放
transform: skewX(30deg);
transform: skewY(30deg); 傾斜
transform: rotate(30deg); 旋轉

3D

transform: rotateX(30deg); 旋轉
transform: rotateY(30deg); 旋轉

動畫

建立動畫
 @keyframes 動畫名稱{
 		from{}
 		to{}
 }
  @keyframes 動畫名稱{
 		0%{}
 		1%{}
 		....
 }
呼叫動畫
animation:動畫名稱	動畫時間 動畫方式（勻速、先快後慢。。） 延遲時間  動畫次數（infinite）反向（alternate）

多列

column-count: 4；

使用者介面

resize:both  /horizontal 水平/vertical垂直