H5

不允许写结束标记的元素

area、base、br、col、commond、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

可以省略结束标记的元素

li、dt、dd、p、rt、rp、optgroup、option、 colgroup、thead、tbody、tfoot、tr、td、th

可以省略全部标记的元素

html、head、body、colgroup、tbody

具有BOOL值属性

disabled、readonly、checked、autofocus

新增的结构元素

section、article、aside、header、hgroup、footer、nav、figure

新增的其他元素

video、audio、embed、mark、progress、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu、

新增的input元素的类型

emial、url、number、range、data pickers

新增的表单相关的属性

autofocus、placeholder、form、required、autocomplete、min、max、multiple、pattern、step、formaction、formenctype、formmethod、formnovalidate、formtarget、disabled、novalidate

连接相关的属性

a:area=media；area=hreflang、rel； link=sizes;  base=target;   

其他元素

ol=reversed;  meta=charset;  menu=type、label;  style=scoped;  script=async;  html=mainifest;  iframe=sandbox、seamless、srcdoc

全局属性

contentEditable：添加标签，标签内容可进行编写；
designMode:指定页面是否可编辑，可编辑contentEditable可编辑（document.designMode='on'）
hidden:任何元素可用，元素可见和不可见
spellcheck:input(type=text、textarea) 对输入内容进行拼写和语法检查
tabindex:tab获取焦点  div等元素

新增主体结构元素

article:元素代表 文档、页面或应用程序中独立的完整的可以独自被外部引用的内容。
section:用于对网站或应用程序中页面上的内容进行分块。
section禁忌：
1.不要将section元素用作设置样式的页面容器，那是dIv元素的工作
2.如果article、aside元素或nav元素更符合的使用条件、不要使用section元素
3.不要为没有标题的内容使用section元素  
nav:是一个可以用作业面导航的连接组，其中的导航元素连接到其他页面或当前页面的其他部分
aside:用来表示当前页面或文章的附属部分，他可以包含与当前页面或主要内容相关的引用cebianlan侧边栏广告导航条有别于主要内容。
aside的使用方法：
1.被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是当前文章有关的参考资料、名词解释等等。
2.在article元素之外使用，作为页面或站点全局的附属信息。
time:他是利用HTML的class属性对网页添加附加信息的方法，例如新闻事件发生的日期，时间。（pubdata属性是一个可选的boolean的属性，通知发布属性）

新增的非主体结构元素

header:是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容块的标题，但也可以包含其他内容例如数据表格，搜索表单或相关的logo图片。
hgroup:是将标题和子标题进行分组的元素。
footer:作为其上层父级内容区块或是一个根区块的脚注。通常包括其相关区块的脚注信息。如作者相关阅读连接及版权信息。
address:元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字，他们的网站连接、电子邮箱、真实地址、电话号码等。

新增元素和属性

form:可以给form外部元素添加form=‘name’  绑定form   id='name';欧朋10支持
placeholder:文本框内获取光标时内容显示
autofocus:自动获取光标
required:如果内容为空则不能提交
pattern:正则验证
min:规定输入的最少范围
max:规定输入的最长范围
step:值增加的步幅   
对象：
1.checkValidity   input（email）.checkValidity  查看有效性是否正确 
2.ValidityState  input（emial）.validity   查看有效性
3.novalidate  form属性   true(关闭验证） false(开启验证）
4.formnovalidate  input属性  true(关闭 input验证） false(开启input验证）
5.setCustomValidity dom属性  自己设置弹出的错误验证信息

新增的页面元素

figure：标签规定独立的流内容（图像、图表、照片、代码等等);  (浏览器均支持）
figcaption:元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。（浏览器均支持）
details：标签用于描述文档或文档某个部分的细节。（谷歌 safair 支持）
mark:文本高亮显示  （浏览器均支持）
progress:标签标示任务的进度（进程）。(Ie10  以及其他浏览器支持此）
meter:标签定义已知范围或分数值内的标量测量(IE 不支持）
cite:标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。(浏览器均支持）

文件Api
···
multiple:input type(file) 属性规定输入字段可选择多个值。如果使用该属性，则字段可接受多个值
dom:dom.files[0]; 获取上传多个文件的对象。
size:dom.size; 获取文档的大小
type:dom.type; 文档的类型（控制文本的类型）
accept：input(file) 属性 控制上传的类型（尽量在服务器进行控制）
···
拖放API

draggable：要拖动的元素属性  （true）可拖动 （false）不可拖动 （IE9 和其他浏览器支持）
拖动的元素事件
ondragstart：开始拖动元素时触发
ondrage:被拖放的元素 拖放过程中
ondragend:用户结束拖动元素后触发
释放目标时触发的事件
ondragenter:当被鼠标拖动的对象进入容器范围内时触发此事件
ondragover:当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave:当被鼠标拖动的对象离开某容器范围内时触发此事件
ondrop:在一个拖动过程中，释放鼠标键时触发此事件

video 和 audio 元素的基础知识

src:该属性指定媒体数据的url地址
autoplay:是否在加载页面后自动播放
preload:是否先预加载 （none/metadata/auto）
poster:video独有属性  展示一个替代用的图片
loop:是否循环播放
controls:自带的播放控制条
error：dom 属性错误的播放提示
networkState:读取当前网络状态
currentTime:获取媒体的当前播放位置
startTime:媒体播放的开始时间
duration:获取总的播放时长
played:返回一个对象获取已播放的时间段
paused:是否处于暂停中
end:是否已经播放完毕
defaultPlaybackRate:读取和设置播放速率
playbackRate:修改播放速率
volume:播放音量（0-1）  属性
muted:修改静音 true(静音）false(不静音）  属性
方法
play:播放媒体
pause:暂停媒体
load:重新载入媒体

video事件

loadstart:浏览器开始在网上寻找媒体数据
propress:浏览器正在获取媒体数据
suspend:浏览器暂停获取
error:获取过程中出错
timeupdate:当前播放位置被改变，可能是播放过程中的自然改变。

跨域通信

window.addEventListEener('message',function(ev){
  console.log(ev.data);
},false)

跨域发送
var iframe = window.fames[0];
iframe.postMessage('您好','http://www.blue-butterfly.net/test/');

创建后台线程

var worker = new Worker('worker.js')   //运行的文件的地址（禁用window  document对象）
woker.onmessage = function(event){
  接收从线程中收到的信息
event.data;
}
将数值传到线程中
worder.postmessage(info);

线程信息
onmessage = function(event){
  postmessage(value);
}

谷歌地图API

window.navigator 对象新增了一个geolocation属性 对象下面三个方法
navigator.geolocation.getCurrentPosition(function(position){
  成功回调的信息
},function(error){
    error.code        (1,2,3)
    error.message  (错误信息）
},function(){})

navigator.geolocation.wathcCurrentPosition(onsuccess,onError,options)
获取实时的地理位置
navigator.geolocation.clearWatch(watchId);
停止对当前用户的地理位置信息的监视

页面中使用谷歌地图

1.在页面中导入google Map  api 的脚本文件，导入方法
<script type='text/javascript' src=http://maps.google.com/maps/api/js?sensor=false/>
2.设定地图参数 设定方法
指定一个google地图上的坐标点，同时指定该坐标点的横坐标和纵坐标
var letlng = new google.maps.LatLng(coords.latitude,coords.longgitude);
var myOptions = {
zoom:14,   //设定放大倍数
center:latlng,  //将地图中心点设定为指定的坐标点，
mapTypeId:google.maps.MapTupeId,ROADMAP  //指定地图类型
}
3.创建地图 在页面中显示
var map1 = new google.maps.Map(document.getElementById('map'),myOptons);
4.在地图上创建标记，方法如下所示
var marker = new google.maps.Marker({
  position:latlng,    //将前面指定的坐标点标注出来
map:mapp1   //设置在map1变量代表的地图中标注
})
5设置标注窗口并指定标注窗口中注释文字，如下所示。
var infowindow = new google.maps.InfoWindow({
  content:'当前位置‘’
})
6.打开标注窗口，如下所示。
infowindow.open(map1,marker);