不允许写结束标记的元素
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);