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:画布

2)得到画布

var obj = document.getelementbyid('canvas');

3)设置画布大小(默认宽：300高：150)

obj.width = "600px";

obj.height = "600px";

4)确定绘制对象的方式：2d

var context = obj.getcontext('2d');

5)重新绘制

context.beginpath();

6)闭合绘制路径

context.closepath();

----------直线/矩形/圆/文字------------

7)直线(起点/终点)

context.moveto(x,y);//起点x坐标,y坐标

context.lineto(x, y)//终点x坐标,y坐标

context.linewidth = 5;//边框的粗细

context.strokestyle = "red";//描边的颜色

context.stroke();//进行绘制

/*画折线：多几个lineto()*/

8)矩形(起始坐标,宽 高)

context.rect(x, y, w, h);//x坐标y坐标 宽 高

context.stroke();//空心矩形 只有黑色描边

context.fill();//实心矩形 黑色填充

//直接绘制空心矩形

context.strokerect(x, y, w, h);//绘制空心矩形

//直接绘制实心矩形

context.fillrect(x, y, w, h);//绘制实心矩形

9)圆形(起始坐标,半径,圆周(0-math.pi*2))

context.arc(x, y, radius, startangle, endangle, anticlockwise);

//x坐标,y坐标,半径,起点,终点,方向(顺：false逆：true)默认false

context.stroke();

context.fill();

10)绘制文字

//绘制文字

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 ---字母基线对齐

/* 验证码图片 干扰:线 点  文字(字母+数字)颜色随机性*/