html5的应用

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 标签当中：

高斯模糊：

   
      
    
        
        
    
    
        
    



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

3、API

定位（需要地理位置的功能）

重力感应（陀螺仪）

request- animation- frame（动画优化）

History（控制当前页面的历史记录）

LocalStorage，Session Storage（存储信息，比如：历史最高记录）

Web Socket（在线聊天，聊天室）

FileReader（文件读取，预览）

Web Worker（文件的异步，提升性能，提升交互体验）

Fetch（传说中要替代 Ajax 的东西）