1》OL標簽的改良 start type reversed:翻轉排序 2》datalist標簽自動補全的使用 3》progress標簽的使用:進度條 4》meter標簽的應用 5》details展開收縮標簽的使用-子標簽summary(自動帶有展開收縮的效果) 6》mark標簽的應用：高亮顯示文本 ...
1》OL標簽的改良 start type reversed:翻轉排序
2》datalist標簽自動補全的使用
3》progress標簽的使用:進度條
4》meter標簽的應用
5》details展開收縮標簽的使用-子標簽summary(自動帶有展開收縮的效果)
6》mark標簽的應用：高亮顯示文本
7》音頻標簽 audio
8》視頻標簽 video
補充樣式：
outline：輪廓
同border,但是border占位置
outline不占位置
outline-offset:10px/-10px;//設置偏移量 可實現(內外邊框)
..canvas繪圖:
1）canvas:畫布
<canvas id="canvas"></canvas>
2)得到畫布
<script type="text/javascript">
var obj = document.getElementById('canvas');
</script>
3)設置畫布大小（預設寬：300 高：150）
obj.width = "600px";
obj.height = "600px";
4)確定繪製對象的方式：2d
var context = obj.getContext('2d');
5)重新繪製
context.beginPath();
6)閉合繪製路徑
context.closePath();
----------直線/矩形/圓/文字------------
7)直線(起點/終點)
<script type="text/javascript">
context.moveTo(x,y);//起點 X坐標,Y坐標
context.lineTo(x, y)//終點 X坐標,Y坐標
context.lineWidth = 5;//邊框的粗細
context.strokeStyle = "red";//描邊的顏色
context.stroke();//進行繪製
/*畫折線：多幾個lineTo()*/
</script>
8)矩形(起始坐標,寬 高)
<script type="text/javascript">
context.rect(x, y, w, h);//X坐標 Y坐標 寬 高
context.stroke();//空心矩形 只有黑色描邊
context.fill();//實心矩形 黑色填充
//直接繪製空心矩形
context.strokeRect(x, y, w, h);//繪製空心矩形
//直接繪製實心矩形
context.fillRect(x, y, w, h);//繪製實心矩形
</script>
9)圓形(起始坐標,半徑,圓周(0-Math.PI*2))
<script type="text/javascript">
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
//X坐標,Y坐標,半徑,起點,終點,方向(順：false 逆：true)預設false
context.stroke();
context.fill();
</script>
10)繪製文字
<script type="text/javascript">
//繪製文字
context.text('some text');
//繪製描邊文字
context.strokeText(text, x, y[, maxWidth])
//繪製填充文字
context.fillText(text, x, y[, maxWidth])
//屬性
//font - 類似於css的font屬性
context.font = "15px 宋體 bold";
//對齊方式 left center right
context.textAlign = "left|center|right";
//垂直對齊方式 textBaseline
//top
//middle
//bottom
//alphabetic ---字母基線對齊
/* 驗證碼圖片 干擾:線 點 文字（字母+數字) 顏色隨機性*/
</script>
