html5特性及知识点

1、新标签

1)div语义不强，针对结构部署，提供了以下新标签

nav/main/header/footer/article/aside

ie9将把以上元素全部解析为行内元素，

引入第三方js插件：html5shiv.min.js

2)<progress></progress>

有两个属性。max:最大值 value:当前进度值

<meter></meter>

度量器

3)设置默认浮雕效果

<fieldset>

<legend>your content</legend>

</fieldset>

2、表单属性更新

1)新增type属性

color/data/datetime/number/url/email/range

2)新增其他特性

输入提示占位：placeholder="文本"

自动获取焦点：autofocus

输入记忆：autocomplete on打开 off关闭

必须输入：required

正则验证：pattern="正则表达式"

multiple:选择上传 多个文件或者允许键入多个文本，如邮箱，默认以逗号分隔

form属性：form="id"; id是给某一form标签设定的Id属性值，这样在表外设置该form标签时，该Input标签内容将一并被提交

3)input list属性/datalist标签

既可以通过箭头选择，又可以自己输入

<form action="demo_form.asp">

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3schools.com" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

<input type="submit" />

</form>

3、新增表单事件

1)oninput:监听当前指定元素内容的改变，一旦改变，将触发该事件

与onkeyup较为相似，但onkeyup不会对鼠标粘贴操作进行响应

，以及对快捷键的响应也不尽相同

2)oninvalid：当验证不通过时触发，如pattern属性的正则匹配

4、多媒体标签

audio/video

1)标签属性：

width：宽度

height:高度

src:资源url

autoplay:自动播放

loop:循环播放

currentTime：播放进度

duration：总时间

paused:视频播放状态

2)包裹标签

<source></source>被包裹在以上两个标签内用于设定资源属性

属性：

src:资源url

type:"video/mp4" <!--设置资源属性-->

3)方法：

.load()加载

.play()播放

.pause() 暂停

5、选取元素新方式

document.querySelector([selector]) 获取满足条件的第一个元素

document.querySelectorAll([selector]) 获取满足条件的所有元素伪数组

6、操作类新方式

1)el.classList 返回当前元素所有的样式列表

2)el.classList.add('className','value') 向元素添加指定类，一次只能添加一类

3)el.classList.remove('className') 从该元素的classList中移除指定类

4)el.classList.toggle('className') 类切换

7、全屏接口(兼容问题)

1)进入全屏

function full(ele) {

if (ele.requestFullscreen) {

ele.requestFullscreen();

} else if (ele.mozRequestFullScreen) {

ele.mozRequestFullScreen();

} else if (ele.webkitRequestFullscreen) {

ele.webkitRequestFullscreen();

} else if (ele.msRequestFullscreen) {

ele.msRequestFullscreen();

}

}

2)退出全屏

function exitFullscreen() {

if(document.exitFullScreen) {

document.exitFullScreen();

} else if(document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if(document.webkitExitFullscreen) {

document.webkitExitFullscreen();

} else if(document.msExitFullscreen) {

document.msExitFullscreen();

}

}

3)判断当前是否全屏

function isFullScreen() {

return !! (

document.fullscreen ||

document.mozFullScreen ||

document.webkitIsFullScreen ||

document.webkitFullScreen ||

document.msFullScreen

);

}

8、FileReader接口

1)创建读取对象：var reader=new FileReader()

说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中

2)对象相关方法

readAsText(file):读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8

readAsBinaryString(file):读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。

例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储

readAsDataURL(file):读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件

(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，

并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。

abort():中断读取

3)文件存储在input表单元素的files属性中，它是一个数组

files[index]即为2)中的实参

4)

FileReader提供一个完整的事件模型，用来捕获读取文件时的状态

* .onabort:读取文件中断片时触发

* .onerror:读取错误时触发

* .onload:文件读取成功完成时触发

* .onloadend:读取完成时触发，无论成功还是失败

* .onloadstart:开始读取时触发

* .onprogress:读取文件过程中持续触发*/

9、拖拽接口

1)为标签添加属性draggable=“true”后该元素即可被鼠标拖拽

图片和超链接默认可以拖拽

2)拖拽事件

应用于被拖拽的元素的有

ondrag 拖拽整个过程都会触发

ondragstart 拖拽开始时

ondragleave 鼠标离开拖拽元素时触发

ondragend 拖拽结束时触发

应用于目标元素的有

ondragenter 进入目标元素后

ondragover 在目标元素上方

ondrop 释放鼠标后

ondragleave 鼠标离开目标元素后

2)事件源对象

全局拖拽时，用document触发以上事件

e.target 的值即为当前被拖拽的元素

通过事件捕获来捕捉拖拽元素

在e内存在e.dataTransfer

可通过事件源对象的dataTransfer来实现数据的存储与获取

e.dataTransfer.setData(format,data);

format:数据类型，text/html text/url-list

data：数据,一般是字符串值

通过e.dataTransfer.setData存储的数据只能在ondrop事件内获取

通过e.dataTransfer.getData(format)获取

浏览器默认阻止ondrop事件

在html5中,遇到ondrop()事件无效，可能原因是浏览器的默认操作，需执行事件阻止系统的默认操作。

obj.ondragover = function(e){

   e.preventDefault();

}

obj.ondrop = function(e){

 e.preventDefault();

}

10、地理定位接口

1)navigator.geolocation

2)/*1.获取地理信息成功之后的回调

* 2.获取地理信息失败之后的回调

* 3.调整获取当前地进信息的方式*/

//navigator.geolocation.getCurrentPosition(success,error,option);

/*option:可以设置获取数据的方式

* enableHighAccuracy:true/false:是否使用高精度

* timeout:设置超时时间，单位ms

* maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms*/

获取的是经纬度

11、web存储

1)sessionstorage

特点：仅在当前会话下有效，关闭页面后被清除

一般为5MB大小，仅在客户端（即浏览器）中保存，不参与和服务器的通信，

提供相应的操作方法，本质上是存储到当前页面的内存中

方法：以window来调用

setItem(key,value) 以键值对的方式存储数据

getItem(key) 获相应存储数据

removeItem(key) 移除相应数据

clear() 清空存储

2)localstorage

除非被清除，否则永久保存。不同浏览器间不共享数据

一般为20MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信

方法完全一致

3)应用程序缓存

创建自己希望缓存的资源，在断开网络时也能显示相应内容

要创建cache manifest 文件

优点：可配置需要缓存的资源，提高浏览速度，减少请求次数

使用步骤：html标签中包含manifest属性

<html manifest="fileName">

fileName是应用缓存清单文件的路径，扩展名为appcache

该文件的写法：

CACHE MANIFEST

#注释

#需要缓存的文件列表

CACHE：

../img.jpg

../img.gif

# *:缓存所有文件

#不再缓存范围内的文件列表

NETWORK:

../img.png

#文件获取失败时的替代文件列表

FALLBACK

../img.png ../img.bmp

# /:所有文件

classList属性：这个属性是新集合类型DOMTokenList的实例。其包含以下属性和方法：

->length

->item（）（也可以用方括号语法）：取得每个元素

->add（）：将给定的字符串值添加到列表中。如果值已经存在，就不添加。

->contains（）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

->remove（）：从列表中删除给定的字符串。

->toggle（）：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。