HTML5新增API

canvas

• 可视化数据
• 特效 banner
• 游戏
• 模拟器(在线PS、在线编辑器)
• 地图

SVG

定义

矢量图工具， 绘图
SVG在H5标准之前就有了， IE对SVG的兼容性非常好

svg与canvas区别

• canvas位图， svg是矢量图
• canvas使用JavaScrpt绘图， svg使用XML来绘图
• canvas不支持事件（借助库） svg支持事件

svg的应用领域

* 矢量图标
* 地图

SVG的使用

• <svg>
• <rect>
• <circle>
• <line>
• <path>
• <ellipse>
• <polygon>
• .....

HTML中使用SVG

• 在html中直接写 <svg>
• <embed src="" type="image/svg+xml" width="" height="">
• <object data="" type="image/svg+xml" width="" height="">
• <iframe src="">

地理定位 geolocation

navigator.gentlocation

• getCurrentPosition(successCallback, errorCallback, options) 获取当前的地理位置
• watchPosition(successCallback, errorCallback, options) 监听地理位置变化
• clearWatch() 停止位置监听

position对象

获取位置成功会调用 successCallback回调函数， 自动接收position对象

• coords

  • longitude 维度
  • latitude 精度
  • altitude 海拔
  • handing 前进方向
  • speed 速度
  • altitudeAccuracy 海拔经度
  • accuracy 坐标经度

• timestamp 时间戳

error对象

获取位置失败，调用errorCallback回调，调用 error对象

• code 错误代码
• message 错误信息

选项 options

• timeout 超时时间
• enableHighAccuracy 是否最优
• maxmunAge 最大缓存时间

注意

• chrome浏览器只有在https方式下打开的网页才能获取地理位置
• 手上上的大部分浏览器，微信 也要求https 才能获取位置

多媒体

相关标签

• <video> 视频
• <audio> 音频
• <source>
• <track>

DOM(video/audio)

• 属性
  • volume 音量
  • muted 是否静音
  • ....
• 方法
  • play()
  • pause()
  • .....
• 事件
  • onplay
  • ....

视频插件

• ckplayer
• jplayer
• flowplayer
• video.js
• flv.js

拖拽

属性

• draggable 设置为true 元素就可以被拖拽

拖拽事件

• ondragstart 开始被拖动的时候触发 绑定给被拖动的元素

• ondrag 拖动的过程总被连续触发 绑定给被拖动的元素

• ondragend 停止拖动的时候的触发 绑定给被拖动的元素

• ondragenter 当被拖拽的元素进入到目标元素 绑定给目标元素 用于进入目标去区域时 目标区域样式改变

• ondrageover 当被拖拽的元素在目标元素内移动 绑定给目标元素 需要组织默认的动作 event.preventDefault()

• ondrageleave 当被拖拽的元素离开目标元素 绑定给目标元素

• ondrop 在目标元素内停止拖拽 绑定给目标元素

dataTransfer

• 获取 是dragEvent的属性
• getData()
• setData()

文件API

上传input

• 多文件上传 设置属性 multiple
• 限制上传文件的格式 属性 accept="image/jpeg" accept="text/html" image/*

FileList对象

• 是用户上传或者拖拽到浏览器的 文件的集合
• 可以通过 inputElement.files 来获取
• 是一个类数组对象 由File对象组成

File对象

• 属性 name
• 属性 size
• 属性 type
• 属性 lastModified
• 属性 lastModifiedDate

FileReader

属性

• result 读取结果
• error 错误内容
• readyState 读取状态

方法

• readAsText() 把文件读取为文本
• readyAsDataURL() 读取为base64图片编码
• readyAsArrayBuffer()
• readyAsBinaryString()
• abort() 终止读取操作

事件

• onerror 读取错误时触发
• onabort 读取中断时触发
• onloadstart 读取开始时触发
• onload 读取成功时触发
• onloadend 读取结束时 不论成功或失败
• onprogress 读取过程中多次触发

XHR2

关于

• XMLHttpRequest 简称 XHR
• XMLHttpRequest level2 简称XHR2
• XHR2在 XHR的基础上新增了 好多 属性 事件
• 新增FormData对象 XMLHttpRequestUpload对象

FormData

属性

• readyState 请求响应状态
• status HTTP状态 404/200/503/403/304
• responseText 响应内容
• timeout 超时时间 xhr2

方法

• abort()
• open()
• send()
• XHR2没有新增方法

事件

• readystatechagne
• load 请求成功完成时触发 XHR2
• progress 进度事件 下载重复触发大约50ms触发一次 XHR2
• error 请求失败时触发 XHR2
• loadstart 请求开始时触发 XHR2
• loadend 请求结束时触发 无论成功都会触发 XHR2
• abort 请求中断时触发 XHR2
• timeout 请求超时时触发 XHR2

附录

• 百度地图APIKey： B8cfd1501ae7f7c55dc3793ee989c354
• 视频地址：
  • http://movie.ks.js.cn/flv/other/1_0.mp4
  • http://movie.ks.js.cn/flv/other/1_0.flv

XML HTML XHTML

• HTML 超文本标记语言 最新版本5
• XHTML 可扩展超文本标记语言
• XML 可扩展标记语言 用来传输和存储数据
• JSON 数据格式 用来传输和存储数据