html5
- 在html上作出新的特性，加入canvas，媒介回放的video和audio元素，对离线储存更好地支持，新的特殊内容元素，和新的表单控件(calendar、date、time、email、url、search)
video
- video tag 之间插入的内容是不支持video元素浏览器的内容
- 可以提供多个source元素，浏览器将使用第一个识别的格式
- 在video tag里 src=’文件名字‘, control=’control’(提供播放，暂停和音量控件)，width=’想要的宽度’，height=’想要的高度’,autoplay=’autoplay’(自动播放),loop=’loop’(自动循环播放)
- 使用DOM可以控制video
- function: play(), pause(), load(), canPlayType
- property: currentSrc, currentTime, videoWidth, videoHeight, duration, ended, error, paused, muted, seeking, volume, height, width
audio
- 大多数音频通过插件flash来播放，html5规定一种通过audio元素
- 其属性与video相同
drag and drop
- 设置想要拖放的东西
- draggable=’true’
- ondragstart=drag(event) 规定被拖动的数据
- 设置被拖到的地方
- ondragover 规定放置被拖动的数据
- 默认是不可以讲数据放置到其他元素里
- 设置允许放置，必须阻止对元素默认处理方式 -> ondragover=’allowDrop()’ 调用allowDrop函数 去做 event.preventDefault()
- ondragover 规定放置被拖动的数据
- 进行放置
- ondrop
- 取到被拖数据 加到放置元素中
- ondrop
- dataTransfer object is used to hold the data that is being dragged during a drag and drop operation
- .setData(被拖数据的数据类型, 值) 设置被拖数据的数据类型和值
- .getData() 获得被拖得数据
canvas
- canvas元素使用js在网页上画图像
- canvas 不是没有绘图能力，绘制工作必须在js里进行
- 使用id寻找canvas元素 （document.getElementById())
- 创建context对象=内建html5对象，可以绘制路径，矩形，圆形，字符以及添加图像
- getContext(‘2d’)
- fillStyle, fillRect(), moveTo(),lineTo(),beginPath(),drawImage()
把鼠标停在矩形上可以看到坐标
定位
- navigator.geolocation.getCurrentPosition(showPosition, error) 如果运行成功向参数showPosition中规定的函数返回一个coordinates对象
- coordinates对象
- latitude 十进制纬度
- longitude 十进制经度
- accuracy 位置精度
- altitude 海拔 海平面以上以米计
- altitudeAccuracy 位置的海拔精度
- heading 方向 一正北开始以度计
- speed 速度 以m/s
- timestamp
- error type -> 1. permission denied 2. position unavailable 3. timeout
- coordinates对象
- navigator.geolocation.watchPosition() 返回用户当前位置， 并继续返回用户移动时更新位置(GPS)
点击按钮，获得坐标
web储存
- localStorage 没有时间限制的数据储存, 数据会一直存着 不管网页是否关闭
- sessionStorage 针对一个session的数据储存, 当网页关闭后 数据将不会存下来
- html是用cookie完成存储数据 但是cookie由对服务器请求来传递 使得速度慢不高效
- 数据存储于不同区域 并且一个网站只能访问其自身的数据
- localStorage/sessionStorage方法
- 创建和访问 localStorage.任意field = ’value’; document.write(localStorage.任意field)
应用程序缓存Application Cache
- 可以离线浏览，加速加载，减少服务器负载
- 使用manifest属性进行缓存， 其文件扩展名因为’.appcache’，MIME-type=’text/cache-manifest’
- manifest 文件可分为三部分：CACHE MANIFEST, NETWORK, FALLBACK
- CACHE MANIFEST: 标题下列出的文件在首次下载后进行缓存
- NETWORK: 标题下列出的文件需要与服务器的链接，不会被缓存
- FALLBACK: 标题下列出的文件规定当页面无法访问时的回退页面
- 例子
CACHE MANIFEST
#2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
- manifest 文件可分为三部分：CACHE MANIFEST, NETWORK, FALLBACK
- 当文件被缓存后，浏览器会继续展示已缓存的版本，如果更新了之前存的文件，需要更新manifest文件，才能确保浏览器更新缓存，所以’#‘是很好的indicator
webworker
- HTML5标准一部分，提供API允许一段JS运行主线程之外的另一个线程，不会影响页面的性能，和其他页面通讯通过 1. onmessage 监听事件 2. postmessage 传送事件
- 较耗费CPU资源任务
- 不会影响到DOM, window 对象
server-sent event服务器发生事件
- 网页自动获取来自服务器的更新
- EventSource 对象用于接受服务器发送事件通知
- onopen 当通往服务器的连接被打开
- onmessage 当接收到信息
- onerror 当错误发生
var source = new EventSource(‘demo.php’) //发送更新的页面URL
source.onmessage = function(event) { //每接到更新 发生onmessage事件
document.getElementById(‘result’).innerHTML+=event.data;
} //把接收到的数据推入id为result的元素中
- 服务器写法能够发送数据更新，把Content-Type报头设置为’text/event-stream’, header(‘Content-Type:text/event-stream’) or Response.Content-Type=’text/event-stream’
表格
input类型
- type=’email’ 自动验证email域的值，如‘@’，‘.’,’com’
- type=’url’ 自动验证URL域的值，如’http‘，’.com’
- datalist元素规定输入域的选项列表, input里list的属性引用datalist的id
- 列表通过datalist里的option元素创建
list=’url_list’
datalist id=’url_list’
option label=’W3School’ value=’http://www.google.com'
option label=’W3School’ value=’http://www.googledsds.com'
option label=’W3School’ value=’http://www.baidu.com'
- type=’number’ max=’’ min=’’ step=’’间隔值 value=‘’默认值，显示上下的小箭头更改值
- type=’range’ max=’’ min=’’ step=’’间隔值 value=‘’默认值, 显示滑动条
- 日期和时间
- date 选取日月年
- month 选月年
- week 选周年
- time 选时间,单位为hr+min
- datetime 选时间日月年(UTC)
- datetime-local 选时间日月年(当地时间)
autocomplete 属性 规定form 或input拥有自动完成功能，
- input-> text, search, url, telephone, email, password, datepickers, range 以及 color
- multiple 规定输入域可选择多个值，适用于email和file