H5新特性

H5新特性

1.语义化标签

标签	描述
header	定义了文档的头部区域
section	定义文档中的节（section、区段）
footer	定义了文档的尾部区域
nav	定义文档的导航
aside	定义页面的侧边栏内容
article	定义页面独立的内容区域

2.增强型表单

input 的 type	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC时间）
email	包含e-mail地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL地址的输入域
week	选择周和年

3.新增表单元素

表单元素	描述
datalist	元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist 元素的 id 绑定
keygen	提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段
output	用于不同类型的输出，比如计算或脚本输出

4.新增表单属性

表单属性	描述
placehoder	提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失
required	是一个boolean属性。要求填写的输入域不能为空
pattern	描述了一个正则表达式用于验证input元素的值
min和max	设置元素最小值与最大值
step	为输入域规定合法的数字间隔
height和width	用于image类型的input标签的图像高度和宽度
autofocus	是一个boolean属性。规定在页面加载时，域自动地获得焦点
multiple	是一个boolean属性。规定input元素中可选择多个值

5.音频视频

元素	描述
<audio>	允许使用多个 元素. 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件 。目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg
<video>	支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）

6.canvas

1.1 什么是canvas？

canvas是可以使用Javascript来绘制图形的HTML元素，其语法结构是：

<canvas width="宽度" height="高度"></canvas>

canvas 元素的默认尺寸为300*150

1.2 canvas有什么用？

• 数据可视化工具（图表，如Echarts）
• 游戏画面
• Banner广告

1.3 HTMLcanvasElement

HTMLcanvasElement接口提供了操纵canvas元素的属性和方法，该接口继承自HTMLElement接口

width属性

width属性用来获取/设置canvas元素的宽度，其语法结构是：

//获取
variable = HTMLCanvasElement.width
//设置
HTMLCanvasElement.width=value

在进行获取操作时，width属性获取的是HTML标签中width的属性值，而并非CSS
样式中width属性值

如果canvas元素的宽度和高度属性没有在脚本中被使用的话，可以通过CSS样式
来修改；否则必须通过width和height的DOM属性进行修改

height属性

height属性用来获取/设置canvas元素的高度，其语法结构是：

//获取
variable = HTMLCanvasElement.height
//设置
HTMLCanvasElement.height = value

getContext()

getContext()用于获取canvas的上下文，其语法结构是：

object HTMLCanvasElement.getContext(string contextType)

上下文类型包括：
2d，将返回CanvasRenderingContext2D的对象，是一个二维渲染对象
webgl，将返回WebGLRenderingContext的对象，是一个三维的渲染对象

2.CanvasRenderingContext2D对象

.strokeRect()方法

strokeRect()方法用于绘制描边矩形，其语法结构是：

CanvasRenderingContext2D.strokeRect(x,y,width,height)

fill()或stroke()方法对其无效

.fillRect()方法

fillRect()方法用于绘制填充矩形，其语法结构是：

CanvasRenderingContext2D.fillRect(x,y,width,height)

fill()或stroke()方法对其无效

.clearRect()方法

clearRect()方法用于擦除画布指定区域的像素点，其语法结构是：

CanvasRenderingContext2D.clearRect(x,y,width,height)

.strokeStyle属性

strokeStyle属性用于设置描边的颜色，其语法结构是：

CanvasRenderingContext2D.strokeStyle = color

color的写法与CSS 样式中color的写法相同

.fillStyle属性

fillStyle属性用于设置描边的颜色，其语法结构是：

anvasRenderingContext2D.fillStyle = color

.strokeText()方法

strokeText()方法用于绘制描边文本，其语法结构是：

CanvasRenderingContext2D.strokeText(text,x,y)

.fillText()方法

strokeText()方法用于绘制填充文本，其语法结构是：

CanvasRenderingContext2D.fillText(text,x,y)

.font属性

font属性用于获取/设置文本样式，其语法结构是：

//获取
varaible = CanvasRenderingContext2D.font
//设置
CanvasRenderingContext2D.font = ‘字号 字体’

.textAlign属性

textAlign属性用于获取/设置文本水平对齐方式，其语法结构是：

//获取
varaible = CanvasRenderingContext2D.textAlign
//设置
CanvasRenderingContext2D.textAlign = ‘left|center|right’

3.路径

路径(path) 是将预先定设定的坐标点顺序连接所形成的图形。
路径的绘制步骤：

A.首先通过beginPath()方法开始一条新的路径

B.通过moveTo()方法将画笔移动指定位置

C.通过相关的方法开始"绘制"路径，如lineTo()方法可以指定线段的终点(起点)，rect()方法绘制矩形等

D.最后通过stroke()或fill()进行描边或填充操作

.beginPath()方法

beginPath()方法用于开始一条新的路径，其语法结构是：

CanvasRenderingContext2D.beginPath()

.moveTo()方法

moveTo()方法用于将画笔移动到指定的位置，其语法结构是：

CanvasRenderingContext2D.moveTo(x,y)

.lineTo()方法

lineTo()方法用于指定线段的另外一个端点，其语法结构是：

CanvasRenderingContext2D.lineTo(x,y)

.closePath()方法

closePath()方法用于绘制封闭的路径，其语法结构是：

CanvasRenderingContext2D.closePath()

.rect()方法

rect()方法用于绘制矩形路径，其语法结构是：

CanvasRenderingContext2D.rect(x,y,width,height)

.arc()方法

arc()方法用于绘制圆弧路径，其语法结构是：

CanvasRenderingContext2D.arc(x,y,radius,stargangle,endangle)

startangle和endangle表示圆弧的弧度
弧度 = 角度 * Math.PI / 180

.stroke()方法

stroke()方法用于使用当前的描边样式进行描边操作，其语法结构是：

CanvasRenderingContext2D.stroke()

当绘制路径时必须通过stroke()或fill()进行描边或填充

.fill()方法

fill()方法用于使用当前的填充样式进行填充操作，其语法结构是：

CanvasRenderingContext2D.fill()

当绘制路径时必须通过stroke()或fill()进行描边或填充

4.window对象

requestAnimationFrame()

requestAnimationFrame()方法用于请求动画的的画面，实现定时的操作。该方法最大的优点是：

A.与显示器的刷新频率保持一致，不再会出现丢帧或卡顿的现象

B.如果当前选项卡没有被激活的情况下，动画将自动停止，以节省CPU资源

timeId window.requestAnimationFrame(callback)
requestAnimationFrame()主要用于动画的画面的绘制，不可能取代window.setInterval()或window.setTimeout()，原因为requestAnimationFrame()无法设置执行的时间间隔，如倒计时工作只能通过window.setInterval()方法实现。

cancelAnimationFrame()

cancelAnimationFrame()方法用于清理由requestAnimationFrame()方法设置的timeId，其语法结构是：

window.cancelAnimationFrame(timeId)

7.地理定位

1.1 基础

地理定位API允许用户向WEB应用程序提供他们的位置，出于隐私的考

虑，在报告地理位置之前会请求用户进行授权。

从chrome 50开始，地位定位只能使用HTTPS协议。

地理定位API通过navigator对象geolocation属性进行获取，其语法结构是：

Geolocation window.navigator.geolocation
Geolocation navigator.geolocation

1.2 Geolocation对象

.getCurrentPosition()方法

getCurrentPosition()方法用于获取设备的当前位置，其语法结构是：

Geolocation.getCurrentPosition(success[,error[,options]])

• success表示成功获取位置信息后的回调函数，使用GeolocaionPosition对象作为唯一参数
• error表示获取位置信息失败后的回调函数，使用GeolocationPositionError对象作为唯一参数

options参数用于对获取位置时进行相关的设置，object类型， 包括：

• timeout属性，用于设置多长时间内（单位为毫秒）返回一个位置，如果在指定时间内没有获取到位置信息，则产生错误
• enableHighAccuracy属性，表示是否启用高精度结果

.GeolocationPosition对象

GeolocationPosition对象作为Geolocation对象getCurrentPosition()方法的第一个参数，该对象表示设备的相关位置，包含有timestamp 和coords属性

• timestamp属性
  timestamp属性返回的是获取位置时的时间戳
• coords属性
  coords属性将返回GeolocationCoordinates对象，表示坐标的相关信息，包括：
  ※ longitude
  longitude属性表示经度
  ※ latitude
  latitude属性表示纬度
  .GeolocationPositionError对象
• code
  code表示错误代码
• message
  message表示错误信息

.watchPosition()方法

watchPosition()方法用于注册监听器，只要设备的位置发生变化，该监听器将自动调用，其语语法结构是：

id = Geolocation.watchPosition(success[,error[,options]])

.clearWatch()方法

clearWatch()方法用于清理制指定的监听器，其语法结构是：

Geolocation.clearWatch(id)

8.拖放

拖放是将对象从一个位置拖拽到另外的一个位置，任何的HTML元素都可以进行拖放，但为保证浏览器的兼容性，建议在拖放的文本对象(如p，h1等)上添加 draggable=“true” 属性，如:

<p draggable=“true”>段落</p>

3.1 DragEvent

DragEvent指拖放事件，其继承自MouseEvent和Event接口。

3.2 事件类型

3.2.1 源对象事件

.dragstart
dragstart事件在开始拖放时触发，只触发一次，其语法结构是：

HTMLElement.ondragstart = function(){
    //...
}
HTMLElement.addEventListener('dragstart',function(){
  	//...  
})

.drag
drag事件在源对象拖放过程中触发，其触发无数次，其语法结构是：

HTMLElement.ondrag = function(){
    //...
}
HTMLElement.addEventListener('drag',function(){
	//...  
})

.dragend
dragend事件在释放鼠标左键时触发(也可能在目标区域内，也可能在目标区域外)，其语法结构是：

HTMLElement.ondragend = function(){
    //...
}
HTMLElement.addEventListener('dragend',function(){
  	//...  
})

3.2.2 目标对象事件

· dragenter
dragenter事件在源对象进入目标对象范围时触发，其触发一次，语法结构是：

HTMLElement.ondragenter = function(){
    //...
}
HTMLElement.addEventListener('dragenter',function(){
  	//...  
})

.dragover
dragover事件在源对象在目标对象范围内悬停时触发，其语法结构是：

HTMLElement.ondragover = function(event){
    event.preventDefault();
    //...
}
HTMLElement.addEventListener('dragover',function(event){
    event.preventDefault();
  	//...  
})
//在dragover事件中必须要带有
//event.preventDefault()
//否则不会触发目标对象的drop事件

.dragleave
dragleave事件在源对象拖离目标对象范围时触发，其语法结构是：

HTMLElement.ondragleave = function(){
    //...
}
HTMLElement.addEventListener('dragleave',function(){
  	//...  
})

.drop
drop事件在源对象在目标对象范围内释放时触发，其语法结构是：

HTMLElement.ondrop = function(event){
    event.preventDefault();
    event.stopPropagation();
    //...
}
HTMLElement.addEventListener('drop',function(event){
	event.preventDefault();
    event.stopPropagation();    
  	//...  
})

拖放事件正常的触发顺序：

dragstart->drag->dragenter->dragover->drop->dragend

9.本地存储：

localStorage----没有时间限制的数据存储
sessionStorage----针对一个session的数据存储，当用户关闭浏览器窗口后数据会被删除

10.新事件

事件	描述
onresize	当调整窗口大小时运行脚本
ondrag	当拖动元素时运行脚本
onscroll	当滚动元素的滚动条时运行脚本
onmousewheel	当转动鼠标滚轮时运行脚本
onerror	当错误发生时运行脚本
onplay	当媒介数据将要开始播放时运行脚本
onpause	当媒介数据暂停时运行脚本

如有错误和不足，希望路过的小伙伴可以在评论区留言哟！