HTML5新增常用属性

一、 代码名称语义化的好处

1、能让搜索引擎更好的收录

2、对于特殊设备如盲人设备好解析

二、article和section的区别

article（文章）：独立且能被外部引用

section（章节、段落):不独立，不能被外部引用

三、 css3常用的新增属性

1. 可以下拉的输入框 datalist

　　2、图片加载figure

　　3.音频audio

不支持播放

autoplay：准备就绪后播放 controls：音频控件

　　4、css2布局分为盒模型、可视化模型

其中盒模型包括：块级、BFC（块级元素格式化上下文）、IFC（行内元素格式化上下文）、 常规流、浮动、定位

四、拖拽

ondragstart 拖拽开始

ondrag 拖拽中

ondragend 拖拽结束

ondragenter 进入投放区

ondragover 投放区移动

ondragleave离开投放区

ondrop 投放区投放

ondragover(投放区移动)会阻止ondrop（投放区投放）， 解决阻止方法：e.preventDefault()

要ondrop起作用，也要ondragover运行起来。 为了不在2个区域重叠发生事件，要设置阻止事件冒泡（e.stopPropagation）

js思路： 1、获取元素块最初的位置；获取鼠标在页面上的位置；获取元素位置； 2、获取鼠标移动后的位置； 3、将新的鼠标位置减旧的鼠标位置，得到它们的距离 4、将鼠标移动后的距离加上元素的原位置得到新的位置 5、获取元素块在鼠标弹起时的位置；获取投块区的位置

五、画布

1.获取画布：

var cs = document.getElementById("cs");

2、获取画笔：

var context = cs.getContext("2d");

画布种类

1.矩形

context.fillRect(上,下，宽,高);

2.有阴影的图形

模糊值为5个像素

context.shadowBlur="5"

阴影颜色为黑色

context.shadowColor="black"

3.有渐变的图形

创建一个渐变图形

context.createLinearGradient(上,下，宽,高)

设置颜色

linearGradient.addColorStop(0,"red") 
linearGradient.addColorStop(1,"white")

填充颜色

context.fillstyle=LinearGradient

4.圆形

context.arc(150,1130,27,0,2*Math.PI);

度数:

360°=π 
π/180乘以度数

5.贝塞尔曲线（分二次和三次）

function drawBezier(){

            设置线条颜色
            context.strokestyle="black"；
            移动鼠标位置
            context.Moveto=(200,100)；
            二次
            context.quadratic(urveTo(250,250【控制点】，200,550【结束点】))
            context.quadratic(urveTo(450，250,250【控制点】,300，200,550【结束点】))

}

6.作用

设置线宽：lineWidth

线条：stroke（）

填充颜色：context.fillstyle="red"

填充线条颜色：context.strokestyle="red"

放大：context.scale（）

在开头加context.save();最尾加context.restore();不会影响其它元素

重置，开始新路径：context.beginPath();

获得图片中心原点：context.translate（x，y）