1.应用程序标签
- DataList(数据列表)
- Progress(进度条)
- Meter(数值显示器)
示例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<html lang="en">
<head>
<meta charset="UTF-8">
<title>应用程序标签</title>
<style>
.my-progress{
-webkit-appearance: none;
}
</style>
</head>
<body>
<!--数据列表,呈现需要载体-->
<input type="text" list="data-list">
<datalist id="data-list">
<option value="张三"></option>
<option value="李四"></option>
</datalist>
<!--进度条-->
<progress></progress>
<!--progress默认最大值是1,可以设定自己想要的值-->
<progress class="my-progress" value="30" max="100"></progress>
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
</body>
可以利用数据列表(data-list)做一个那种带下拉框的输入框,可以根据用户输入的内容匹配下拉框的内容(select2也可以实现这种需求,而且最低可以兼容到IE8,推荐用select2),后面的progress和meter样式不好控制,用的不太多。
2.自定义属性(data-*)
在html5中可以自定义数据,以data开头,利用这个自定义标签我们可以把属性暂时存储到页面中,在js中可以使用,例子如下:
1 | <html lang="en"> |
下面这篇文章总结的很好,可以参考:http://blog.csdn.net/qq_31851435/article/details/53100691
3.新的表单提交方式
传统的一共有9中表单提交方式,html5新增了几种,目前只用在移动端,pc端兼容性有问题,而且在输入的时候并没有进行验证,比如类型是email的,并没有校验邮箱格式,还是需要我们自己手动写正则表达式验证的,只是在手机端当唤起输入法的时候会自动切换到英文输入法。
1 | <head> |
4.新的选择器
html5提供新的选择器,querySelector选择单个的元素,返回满足条件的第一个元素,是一个dom元素,querySelectorAll选择全部的元素,返回满足条件的全部元素,是一个dom数组,里面可以是id,标签或class类。
1 | <html lang="en"> |
5.元素类列表(Element.classList)
新H5中DOM对象多了一个classList属性,是一个数组:
- add 添加一个新的类名
- remove 删除一个类名
- contains 判断是否包含一个指定的类名
- toggle 切换一个类名。 element.toggle(‘class-name’,[add_or_remove]),第一个参数是类名,第二个参数是布尔值,如果是true,则添加类名,如果是false,则去掉类名。示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47<head>
<meta charset="UTF-8">
<title>元素类列表</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="collapse navbar-collapse">
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
<script>
//匿名函数
(function(){
/** 点击时添加和删除类名**/
var lis = document.querySelectorAll(".nav li");
for(var i=0;i<lis.length;i++){
lis[i].addEventListener("click",function(e){
//去掉原先所有的样式
for(var j=0;j<lis.length;j++){
lis[j].classList.remove("active");
}
//添加点击样式
this.classList.add("active");
e.preventDefault(); //取消事件的默认操作
})
}
/** 点击时存在类名则删除,不存在类名则添加**/
var elem = document.querySelector(".navbar-brand");
//点击时如果存在active这个属性则去掉,如果不存在这个属性则加上
elem.addEventListener("click",function(e){
//判断是否包含active这个类名
var isExist = elem.classList.contains("active");
this.classList.toggle("active",!isExist);
e.preventDefault();
})
})()
</script>
</body>
6.访问历史Api
在HTML5中可以通过window.history操作访问历史状态,让一个页面可以有多个历史状态
- window.history.forward(); // 前进
- window.history.back(); // 后退
- window.history.go(); // 刷新
- history.pushState(放入历史中的状态数据, 设置title(现在浏览器不支持), 改变历史状态),通过JS可以加入一个访问状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<head>
<meta charset="UTF-8">
<title>历史记录</title>
</head>
<body>
<input type="button" value="测试历史记录" onclick="addHistory()">
</body>
<script>
//添加历史记录
function addHistory(){
//判断浏览器是否支持历史记录,毕竟是h5的新特性,低版本浏览器不支持
if(window.history && history.pushState){
//支持
history.pushState(new Date().toLocaleDateString(),"设置历史记录的标签,但是目前浏览器还不支持","?demo="+new Date().toLocaleTimeString());
}else{
console.log("抱歉,浏览器不支持历史记录")
}
}
//下面这个事件是点击浏览器中的前进或后退时触发
window.addEventListener("popstate",function(e){
console.log("点击了历史按钮"+e.state);
})
</script>
7.全屏Api
H5中可以用requestFullScreen()方法实现指定元素的全屏显示(类似于浏览器中按F11)。
首先需要获取需要全屏显示的元素,然后判断浏览器是属于谷歌内核还是火狐内核或者其它浏览器,然后调用响应方法即可。(注意:目前这个特性浏览器兼容性还比较差,谷歌和火狐可以)
1 | var elem = 需要全屏的元素; |
1 | <head> |
8.Application Cache离线访问技术
在H5中可以利用Application Cache实现离线访问技术,测试时可以通过谷歌浏览器——NetWork——No throttling(Disable cache后面的那个下拉框)——下拉选择Offline(模拟未联网的情形)。
示例如下:
1 | html代码: |
解释:在html代码中通过css的伪类和js的document.write函数分别输出两句话,模拟请求其它文件,然后在manifest(缓存清单)中定义了一个cache.manifest的缓存清单文件,文件里首先定义了当前软件的版本,下面的CACHE,代表断网情况下,从下面定义的文件中读取文件,NETWORK代表联网时候要读取的文件,星号代表全部。即断网时从我定义的文件中读取文件,联网时,读取全部文件,这样便可实现离线访问。
9.web网页存储
h5中提供sessionStorage和localStorage两种数据存储方式,前者存储的内容只在本次会话中存储,浏览器关闭数据消失,后者是可以永久存储在浏览器中,除非手动或通过程序删除。这两种存储方式比cookie存储的数据量大,而且可以存储对象数据(cookie只能存储字符串数据)。
1 | <head> |
10.操作文件Api
通过file表单选择文件,之后利用h5提供的文件api可以获取文件名,大小,类型,最后修改时间等文件信息。
1 | <html lang="en"> |
这里是用到了bootstrap的样式,因为file表单比较丑,而且无法改变样式,所以我们可以把文件表单隐藏(用hidden隐藏样式),提供一个按钮,当点击这个按钮时去雕砌选文件的弹框,multiple属性支持一次选择多个文件。
11.拖拽文件
拖拽文件时需要依次注册以下事件:
- dragenter 注册拖拽进入事件
- dragleave 注册拖拽离开事件
- dragover 注册滑动事件(在这里面阻止默认事件)
- drop 注册松手落地事件。
在拖动松手落地事件中判断拖进来的是文件还是图片地址还是文字,分别进行处理。e.dataTransfer获取拖动进来的信息。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83<head>
<meta charset="UTF-8">
<title>拖拽文件</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
#target{
height: 200px;
border: 5px dashed #c0c0c0;
color: #505050;
padding: 20px;
font-size: 40px;
cursor: pointer;
text-align: center;
-webkit-user-select: none;
}
#target.actived{
border-color: #888;
color: #080808;
box-shadow: 0 0 80px #e0e0e0 inset;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h3>拖拽文件</h3>
</div>
<div class="jumbotron">
<p>我们这里测试拖拽文件</p>
<img src="test.png">
</div>
<div id="target">
拖拽文件进来
<ul id="result" class="list-group"></ul>
</div>
</div>
</body>
<script>
(function(){
var target = document.querySelector("#target");
var fileList = document.querySelector('#result');
//注册拖拽进入事件
target.addEventListener("dragenter",function(){
this.classList.add("actived"); //添加样式
})
//注册拖拽文件离开事件
target.addEventListener("dragleave",function(){
this.classList.remove("actived"); //添加样式
})
//注册落地事件之前必须要先阻止默认事件,这里在滑动里面阻止默认事件
target.addEventListener("dragover",function(e){
e.preventDefault(); //阻止默认事件
e.stopPropagation();
})
//注册松手落地事件
target.addEventListener("drop",function(e){
//判断拖入进来的是文件,图片还是文字,分别处理
if(e.dataTransfer.files.length){
//拖入的是文件
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var li = document.createElement('li');
li.setAttribute('class', 'list-group-item');
// 创建信息的子节点
li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>';
fileList.appendChild(li);
}
}else{
//不是文件
var data = e.dataTransfer.getData('text/plain'); //判断拖入的是文本还是图片
if(data){
//拖入的是文本,直接置换
target.innerHTML = data;
}else{
//拖入的是图片
var imgElem = document.createElement("img");
imgElem.src = data;
target.appendChild(imgElem);
}
}
})
})()
</script>
12.访问设备信息
h5提供了许多可以访问设备的Api,但是目前基本都应用在手机端,pc端使用非常有限。
获取网络状态。
1
2
3
4
5
6
7
8// × 所有PC浏览器现在都不支持 只有手机端的Firefox
var connectionInfo = navigator.connection;
或者下面这个方法:
if (navigator.onLine){
console.log('online');
}else{
console.log('offline');
}获取重力感应方向
1
2
3
4
5window.addEventListener('deviceorientation', function(event) {
var a = event.alpha; // Y轴 上下方向
var b = event.beta; // Z轴 东西方向
var g = event.gamma; // X轴 南北方向
});加速度计
1
2
3
4window.addEventListener('devicemotion', function(e) {
// 获取加速计数据 {x,y,z}
var acceleration = e.accelerationIncludingGravity;
});地理坐标
1
2
3
4
5
6
7navigator.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无障碍互联网应用,多媒体(包括音频,视频)等等,真正使用的时候再详细研究。
热评话题