html5课堂笔记，HTML5学习笔记

1.应用程序标签

• DataList(数据列表)

• Progress(进度条)

• Meter(数值显示器) 示例:

A

可以利用数据列表（data-list）做一个那种带下拉框的输入框，可以根据用户输入的内容匹配下拉框的内容（select2也可以实现这种需求，而且最低可以兼容到IE8，推荐用select2）,后面的progress和meter样式不好控制，用的不太多。

2.自定义属性（data-*）

在html5中可以自定义数据，以data开头，利用这个自定义标签我们可以把属性暂时存储到页面中，在js中可以使用，例子如下：

下面这篇文章总结的很好，可以参考：http://blog.csdn.net/qq_31851435/article/details/53100691

3.新的表单提交方式

传统的一共有9中表单提交方式，html5新增了几种，目前只用在移动端，pc端兼容性有问题，而且在输入的时候并没有进行验证，比如类型是email的，并没有校验邮箱格式，还是需要我们自己手动写正则表达式验证的，只是在手机端当唤起输入法的时候会自动切换到英文输入法。

传统的表单提交方式（9种）

用户名：
密码：
性别：
课程:
隐藏：文件：
按钮：
表单:
重置：

---

新的表单提交方式（目前只用在移动端）

颜色：
网址：
搜索：
邮箱：
日期：
图片：
范围：
数字：

4.新的选择器

html5提供新的选择器，querySelector选择单个的元素，返回满足条件的第一个元素，是一个dom元素，querySelectorAll选择全部的元素，返回满足条件的全部元素，是一个dom数组，里面可以是id，标签或class类。

新选择器

• item1
• item2
• item3
• item4
• item5
• item6
• item7
• item8
• item9
• item10

5.元素类列表（Element.classList）

新H5中DOM对象多了一个classList属性，是一个数组:

• add 添加一个新的类名

• remove 删除一个类名

• contains 判断是否包含一个指定的类名

• toggle 切换一个类名。 element.toggle('class-name',[addorremove])，第一个参数是类名，第二个参数是布尔值，如果是true，则添加类名，如果是false,则去掉类名。示例：

6.访问历史Api

在HTML5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史状态

• window.history.forward(); // 前进

• window.history.back(); // 后退

• window.history.go(); // 刷新

• history.pushState(放入历史中的状态数据, 设置title(现在浏览器不支持)， 改变历史状态)，通过JS可以加入一个访问状态

7.全屏Api

H5中可以用requestFullScreen()方法实现指定元素的全屏显示（类似于浏览器中按F11）。首先需要获取需要全屏显示的元素，然后判断浏览器是属于谷歌内核还是火狐内核或者其它浏览器，然后调用响应方法即可。(注意：目前这个特性浏览器兼容性还比较差，谷歌和火狐可以)

var elem = 需要全屏的元素;if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen();} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();} else if (elem.requestFullScreen){ elem.requestFullScreen();}

点我全屏显示

测试全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示 测试全屏显示测试全屏显示测试
全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示

8.Application Cache离线访问技术

在H5中可以利用Application Cache实现离线访问技术，测试时可以通过谷歌浏览器——NetWork——No throttling(Disable cache后面的那个下拉框)——下拉选择Offline(模拟未联网的情形)。示例如下：

html代码：

这是html页面中的内容

style.css文件代码body::before{ content: "这是Css中引入的内容"; font-size: 40px;}script.js文件代码：document.write("这是js中引入的内容")cache.manifest文件代码：CACHE MANIFEST# version 1.0.1CACHE: 08离线访问.html script.js style.cssNETWORK: *

解释：在html代码中通过css的伪类和js的document.write函数分别输出两句话，模拟请求其它文件，然后在manifest（缓存清单）中定义了一个cache.manifest的缓存清单文件，文件里首先定义了当前软件的版本，下面的CACHE，代表断网情况下，从下面定义的文件中读取文件，NETWORK代表联网时候要读取的文件，星号代表全部。即断网时从我定义的文件中读取文件，联网时，读取全部文件，这样便可实现离线访问。

9.web网页存储

h5中提供sessionStorage和localStorage两种数据存储方式，前者存储的内容只在本次会话中存储，浏览器关闭数据消失，后者是可以永久存储在浏览器中，除非手动或通过程序删除。这两种存储方式比cookie存储的数据量大，而且可以存储对象数据（cookie只能存储字符串数据）。

10.操作文件Api

通过file表单选择文件，之后利用h5提供的文件api可以获取文件名，大小，类型，最后修改时间等文件信息。

这里是用到了bootstrap的样式，因为file表单比较丑，而且无法改变样式，所以我们可以把文件表单隐藏（用hidden隐藏样式），提供一个按钮，当点击这个按钮时去雕砌选文件的弹框，multiple属性支持一次选择多个文件。

11.拖拽文件

拖拽文件时需要依次注册以下事件：

• dragenter 注册拖拽进入事件

• dragleave 注册拖拽离开事件

• dragover 注册滑动事件（在这里面阻止默认事件）

• drop 注册松手落地事件。 在拖动松手落地事件中判断拖进来的是文件还是图片地址还是文字，分别进行处理。e.dataTransfer获取拖动进来的信息。

12.访问设备信息

h5提供了许多可以访问设备的Api，但是目前基本都应用在手机端，pc端使用非常有限。

• 获取网络状态。

// × 所有PC浏览器现在都不支持 只有手机端的Firefoxvar connectionInfo = navigator.connection;或者下面这个方法：if (navigator.onLine){ console.log('online');}else{ console.log('offline');}

• 获取重力感应方向

window.addEventListener('deviceorientation', function(event) { var a = event.alpha; // Y轴 上下方向 var b = event.beta; // Z轴 东西方向 var g = event.gamma; // X轴 南北方向});

• 加速度计

window.addEventListener('devicemotion', function(e) { // 获取加速计数据 {x,y,z} var acceleration = e.accelerationIncludingGravity;});

• 地理坐标

navigator.geolocation.getCurrentPosition(function(e) { // e.coords.longitude : 经度, e.coords.latitude : 纬度 document.querySelector('#result').innerHTML = JSON.stringify(e.coords);}, function(e) { document.querySelector('#result').innerHTML = JSON.stringify(e);});navigator.geolocation.watchPosition(success, error);

H5还有其它的一些特性，包括语义化标签，ARIA无障碍互联网应用，多媒体（包括音频，视频）等等，真正使用的时候再详细研究。