html5学习笔记

发表于 | 分类于 |
字数统计: 3,972 字 | 阅读时长 ≈ 18 分钟

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
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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data属性</title>
</head>
<body>
    <ul id="list">

    </ul>
</body>
<script>
    // 键是ID 值是信息
    var data = {
        01: {
            name: "张三1",
            age: 18
        },
        02: {
            name: "张三2",
            age: 19
        },
        03: {
            name: "张三3",
            age: 20
        }
    };
    var list = document.getElementById("list");
    for(var id in data){
        var item = data[id];
        var liem = document.createElement("li");
        liem.innerHTML = item.name;
        //自定义data-*属性
        liem.setAttribute("data-name",item.name);
        liem.setAttribute("data-age",item.age);
        list.appendChild(liem);
        //点击获取dataset属性
        liem.addEventListener("click",function(){
            //下面这两种方式均可以，都不带data-
            alert(this.dataset['name']);
            alert(this.dataset.name);
        })
    }
</script>

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

3.新的表单提交方式

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

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
<head>
    <meta charset="UTF-8">
    <title>新的表单提交方式</title>
</head>
<body>
<h3>传统的表单提交方式（9种）</h3>
用户名：<input type="text"> <br>
密码：<input type="password"><br>
性别：<input type="radio"><br>
课程:<input type="checkbox"><br>
隐藏：<input type="hidden">
文件：<input type="file"><br>
按钮：<input type="button" value="按钮"><br>
表单:<input type="submit"><br>
重置：<input type="reset"><br><hr>
<h3>新的表单提交方式（目前只用在移动端）</h3>
颜色：<input type="color"><br>
网址：<input type="url"><br>
搜索：<input type="search" results="10" placeholder="Search..."><br>
邮箱：<input type="email" pattern="^\*.com"><br>
日期：<input type="date" min="2015-09-01" max="2018-09-01"><br>
图片：<input type="image"><br>
范围：<input type="range" min="0" max="50" value="10"><br>
数字：<input type="number">
</body>

4.新的选择器

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

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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新选择器</title>
</head>
<body>
<h3>新选择器</h3>
<ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
    <li class="item">item9</li>
    <li class="item">item10</li>
</ul>
</body>
<script>
    //匿名函数，可以将作用域分隔开
    (function(){
        var liem = document.querySelector(".item");  //只选择第一个
        console.log(liem.innerHTML);
        var lis = document.querySelectorAll("ul>li");  //选择全部
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
            lis[i].addEventListener("click",function(){
                debugger;  //可以调试代码。类似于浏览器打断点
                console.log(this.innerHTML);
            })
        }
    })()
</script>

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
2
3
4
5
6
7
8
var elem = 需要全屏的元素;
if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.requestFullScreen){
  elem.requestFullScreen();
}

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
<head>
    <meta charset="UTF-8">
    <title>全屏显示</title>
</head>
<body>
<h3 style="cursor: pointer">点我全屏显示</h3>
<p>测试全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示
    测试全屏显示测试全屏显示测试<br>
    全屏显示测试全屏显示测试全屏显示测试全屏显示测试全屏显示</p>
<script>
    //匿名函数
    (function () {
        //获取事件源和要全屏显示的元素
        var elem = document.querySelector("p");
        document.querySelector("h3").addEventListener("click",function(e){
           //判断浏览器是否支持全屏显示
            if (elem.webkitRequestFullScreen) {
                elem.webkitRequestFullScreen();
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (elem.requestFullScreen){
                elem.requestFullScreen();
            }else{
                console.log("浏览器不支持全屏显示")
            }
        });
    })()
</script>
</body>

8.Application Cache离线访问技术

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

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
html代码：
<html lang="en" manifest="cache.manifest">
<head>
    <meta charset="UTF-8">
    <title>离线访问</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是html页面中的内容</p>
<script src="script.js"></script>
</body>

style.css文件代码
body::before{
    content: "这是Css中引入的内容";
    font-size: 40px;
}

script.js文件代码：
document.write("这是js中引入的内容")

cache.manifest文件代码：
CACHE MANIFEST
# version 1.0.1

CACHE:
  08离线访问.html
  script.js
  style.css

NETWORK:
  *

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

9.web网页存储

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

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
<head>
    <meta charset="UTF-8">
    <title>网页存储</title>
</head>
<body>
<textarea rows="5" cols="30" id="txt-data"></textarea>
<input type="button" value="设置数据" id="set-data">
<input type="button" value="获取数据" id="get-data">
<script>
    (function(){
        var txtValue = document.querySelector("#txt-data");
        console.log(txtValue.value);
        //设置数据
        document.querySelector("#set-data").addEventListener("click",function (e) {
            //判断是否支持存储
            if(window.sessionStorage){
                sessionStorage.setItem("key",txtValue.value);
            }else{
                console.log("还在用渣渣IE吗？升级吧。。。")
            }
        })

        //获取数据
        document.querySelector("#get-data").addEventListener("click",function (e) {
            //判断是否支持存储
            if(window.sessionStorage){
                txtValue.value = sessionStorage.getItem("key");
            }else{
                console.log("还在用渣渣IE吗？升级吧。。。")
            }
        })
    })()
</script>
</body>

10.操作文件Api

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

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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文件</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <form>
            <input type="file" class="form-control hidden" id="btn_file" multiple>
            <input type="button" value="选择文件" class="btn btn-success" id="btn_select">
            <div class="list-group" id="ul_list">
                <!--待追加数据位置-->
            </div>
        </form>
    </div>
</body>
<script>
    (function(){
        var btn_file = document.querySelector("#btn_file");
        var btn_select = document.querySelector("#btn_select");
        var ul_list = document.querySelector("#ul_list");
        //利用“hidden”类将文件输入框隐藏，当点击“选择文件按钮时”，调用选择文件按钮，选择文件，
        // 因为input type="file"这个无法修改样式，把它隐藏，点击其它按钮时，在其它按钮中调用点击上传文件
        btn_select.addEventListener("click",function(){
           btn_file.click();
        })

        //选择文件完成后（即文件内容发生改变后）
        btn_file.addEventListener("change",function(e){
            var files = btn_file.files;  //获取所有文件，并遍历
            for(var i=0;i<files.length;i++){
                console.log(files[i]);
                var liem = document.createElement("li");
                liem.setAttribute("class","list-group-item");
                liem.innerHTML = ' <h4 class="list-group-item-heading">'+files[i].name+'</h4>'+
                    '<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'kb</p>'
                ul_list.appendChild(liem);
            }
        })
    })()
</script>

这里是用到了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
    5
    window.addEventListener('deviceorientation', function(event) {
      var a = event.alpha; // Y轴 上下方向
      var b = event.beta; // Z轴 东西方向
      var g = event.gamma; // X轴 南北方向
    });

  • 加速度计

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

  • 地理坐标

    1
    2
    3
    4
    5
    6
    7
    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无障碍互联网应用，多媒体（包括音频，视频）等等，真正使用的时候再详细研究。

刘俊重 wechat
欢迎关注我的微信公众号
坚持原创技术分享
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多