1、新增的属性
place holder：
input标签上，输入框的提示信息
input的新增type：
date可以将输入款变成可选择日期，很少使用，兼容性不好
time可以填写时辰
week填写第几年第几个星期
datetime- local把年月日和时间结合在一起
number输入只能填number，兼容性不好
email输入只能填邮箱格式
color输入的是颜色，是一个颜色选择器
range是一个可调节的条，可以设置最小值和最大值
search输入框，可以提示相关的输入记录
url填写的是url
上述基本只支持chrome
Calendar，date，time，email，url，search
Content Editable：
默认值是false，可以使标签的内容变为可编辑，子级可以继承父级的，如果子级填写false则取消继承，不要用这样的嵌套方式来修改内容
Draggable：
可拖拽的，给标签加上draggable=“true”，只有chrome和Safari可以正常使用，默认值也是false，a标签和img标签默认就是true，拖拽的声明周期，拖拽开始拖拽的过程拖拽结束就是声明周期，拖拽的组成：被拖拽的物体和目标区域，按下物体的瞬间不会触发事件，移动和结束才会，可以在js界面使用标签的ondrag start和ondrag，ondragend事件来监听事件发生过程。
ondragenter，图形进入时，触发事件，要鼠标拖拽物体进入才算
ondragover在目标区域内移动就会触发
ondragleave离开目标区域时触发
ondrop在目标区域放下时触发，在ondragover里输入e.preventDefault（）；阻止默认事件，即可实现ondrop事件，事件是由行为触发的，触发不止一个事件。
Hidden：
Context-menu
Data- Val（自定义属性）
2、新增的标签
语义化标签（一群类似div的东西）
header，footer，nav（导航），section（内容区），article（可以被引用），aside（侧边栏）
canvas（画线）
用js获得 canvas的内容区， canvas.getContext（“2d”），moveTo（）填写两个值，起点，lineTo（）填写两个值，终点，用stroke可以显示线条，canvas的宽高要在标签内部填写，closePath可以将最后的线条闭合，fill可以填充黑色，lineWidth可以调节线条宽度，beginPath表示从新开始画一条线，如果有多笔，closePath就失效了，closePath是针对一笔的。
画矩形：rect（）填写四个值，填写起始位置，后面两个值为长宽，strokeRect如上，fillRect也是如上，clearRect（）清除矩形。
画圆：
圆心（x，y）半径r，弧度（起始弧度，终止弧度）方向
arc（x，y，r，Math.PI，Math.PI，1/0）顺时针0，逆时针1。
圆角矩形：
moveTo（100，110）为了最后闭合时完美闭合
arcTo（100，200，200，200，10）
arcTo（200，200，200，100，10）
arcTo（200，100，100，100，10）
arcTo（100，100，100，200，10）
贝塞尔曲线
先beginPath开始一条线；
再moveTo开始第一个点坐标
quadraticCurveTo（）填两个坐标值，是二次贝塞尔曲线
bezierCurveTo（）填写三个坐标值，是三次贝塞尔曲线
旋转：rotate（）填写角度，用Math.PI
图形是根据画板的原点进行旋转的
translate（）填写坐标可以改变坐标的原点
缩放：
scale（）填写两个值，同样对坐标轴进行伸缩变换
坐标系的平移和旋转是作用于全局的
可以用save来存储对坐标系的变换，再用restore来恢复状态，缩放平移旋转属性都能保存
fillStyle可以改变填充的颜色或者图片，图片是根据坐标原点进行填充的，先引入图片，又由于图片加载是异步加载，所以要用img.onload函数来填充图片，用img.createPattern（img，“no-repeat”）来获取图片，再用fillStyle来填充
渐变填充：
先创建线性界面，createLinearGradient（）输入两个坐标值，再对填充物添加颜色，用addColorStop（）填写位置（0~1）百分比和颜色，线性渐变的起始点是坐标原点
辐射渐变：
createRadialGradient（）填写六个值，第一个点的坐标和半径，第二个点的坐标和半径，同样需要addCorlorStop()
阴影：
shadowColor，shadowBlur(阴影大小），shadowOffsetX和shadowOffsetY可以改变偏移量，阴影原始位置是覆盖在边框上的
渲染文字
strokeText（）填写文字的字符串和位置坐标；fillText同上，不同的是fillText可以被fillStyle改变，前者叫文字描边，后者叫文字填充，可以用font属性改变文字大小和字体，只能改变strokeText，大小对二者都起作用
线端样式:
lineCap可以改变线的两端样式可以填写round，butt，square，lineJoin可以改变线条相交的部分，可以填写round（圆滑），bevel（剪短),miter(尖锐）
svg：
矢量图，放大不会失真，适合大面积贴图，通常动画较少或者较简单，用标签和css画Canvas适合小面积绘图，适合动画
画线时要用到line标签，在行间样式中填写坐标，再用css调用line标签，使用stroke：color； strokeWidth可以把线条变粗
画矩形：
用rect标签，在行间样式直接输入宽高和坐标，所有闭合图形默认用填充，直接画出来，还有rx和ry属性是改变圆角，一个是x方向上，一个是y方向上
画圆：
用circle标签;
在行间样式填写半径r和cx，cy坐标
椭圆用ellipse标签在行间样式填写rx和ry横向半径和纵向半径，还有ex和ey坐标
polyline标签：
折线：在行间样式中有points里面填写点的坐标，xy之间用空格隔开，坐标间用逗号隔开
可以在css填写fill：transparent；再用stroke显示颜色，stroke-width可以改变线条长度，折线默认填充
polygon会填充且闭合
text标签：在行间样式填写坐标位置x，y
stroke-linecap可以改变线两端的状态，round和square会在原有的基础上再添加样式 和stroke-linejoin
stroke-opacity线条透明度
path标签：在行间样式中有d的属性里面填写M（moveto）坐标L（lineto）坐标之间用空格隔开默认带填充，也可以填写H（横着移动到多少距离）V（垂着移动到多少距离）z闭合图形，小写的h和v表示移动多少距离。A（arcto）画椭圆A填写x半径和y半径 还有旋转角度和大弧或小弧，0为小弧1为大弧，还有顺时针或逆时针，最后是另一点的坐标
画界面要定义都写再defs标签当中：
<svgwidth="500px"height="300px"style="border:1px solid">
<defs>
<linearGradientid="bg1"x1="0"y1="0"x2="0"y2="100%">
<stopoffset="0%"style="stop-color: rgb(255,255,0)"></stop>
<stopoffset="100%"style="stop-color: rgb(255,0,0);"></stop>
</linearGradient>
</defs>
<rectx="100"y="100"height="100"width="200"style="fill:url(#bg1)"></rect>
</svg>
高斯模糊：
<svgwidth="500px"height="300px"style="border:1px solid">
<defs>
<linearGradientid="bg1"x1="0"y1="0"x2="0"y2="100%">
<stopoffset="0%"style="stop-color: rgb(255,255,0)"></stop>
<stopoffset="100%"style="stop-color: rgb(255,0,0);"></stop>
</linearGradient>
<filterid="gaussian">
<feGaussianBlurin="SourceGraphic"stdDeviation="20"></feGaussianBlur>
</filter>
</defs>
<rectx="100"y="100"height="100"width="200"style="fill:url(#bg1); filter: url(#gaussian)"></rect>
</svg>
stdDeviation是改变他的模糊度
画虚线：
stroke-dasharray：像素；可以填无数个值，按顺序从左到右每一个片段的长度。
stroke-dashoffset可以将片段整体偏移
view-box：
svg的行间样式中的属性，相当于比例尺，前两个值是原点坐标，后两个值是宽高会替换原有宽高，类似于地图的比例尺
Audio（声音播放）
audio标签，在行间样式中填写src和controls即可，兼容性不好，基本上要自己去设计一个audio
Video（视频播放）
video标签同上，可以用js调用video.pause来暂停，video.play表示播放，video.duration表示总的时间，video.currentTime表示当前时间，video.playbackRate表示视频播放倍速，video.volumn是音量大小，默认是0-1
