09-HTML5新特性

作者: magic_pill | 来源:发表于2017-09-05 08:01 被阅读30次

前言

认识HTML5

之前学的是HTML4或者HTML4.1；
网页开发：
html：结构 4.0
Css：样式 2.0
Js：行为用户交互
HTML5 是html4.0 升级版
结构：Html5 、样式：css3 、行为: API，有所增强，如地理定位、web存储、拖拽等。
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可以开发网页版游戏。
H5范称：HTML + CSS3 + JS API
优点：http://www.intertid.com/school/2014/595568.shtml

语法规范

HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。
特点：
更简洁;
更宽松
- 单标签不用写关闭符号；
- 双标签可省略结束标签；
- html、head、body、colgroup、tbody可以完全省略；
- 实际开发中应规范书写，不建议太随意。
W3C验证地址：https://validator.w3.org/

语义标签

此章节学习目的为了理解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。
传统网页布局：

<!-- 头部 -->
<div class="header">
     <ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
    <!-- 文章 -->
    <div class="article"></div>
    <!-- 侧边栏 -->
    <div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>

H5 经典网页布局:

<!-- 头部 -->
<header>
    <ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
    <!-- 文章 -->
    <article></article>
    <!-- 侧边栏 -->
    <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>

常用新语义标签

语义	说明
`header`	表示页眉
`nav`	表示导航
`section`	表示区块
`aside`	表示侧边栏如文章的侧栏
`article`	表示文章如文章、评论、帖子、博客
`footer`	表示页脚
figure	表示媒介内容分组与 ul > li 做个比较
mark	表示标记 (带用“UI”，不怎么用)
progress	表示进度 (带用“UI”，不怎么用)
time	表示日期

本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav">相当于<nav>。不要好奇，它只是一个标签！
尽量避免全局使用header、footer、aside等语义标签。

兼容处理

在测试IE的兼容的时候，有一个叫做ietest 的软件，这个软件可以模拟IE6~IE11。
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素inline对待，所以我们只需要将其转换成块元素(block)即可使用。但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。
IE678不支持H5，需要引入html5shiv.js文件：

<!--条件注释，只有IE才能够识别-->
<!--[if lte ie 8]>
    <script src="html5shiv.min.js"></script>
<![endif]-->

表单

HTML5在Web表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。

输入类型 (表单类型，表单元素，表单属性,表单事件。)

输入类型	说明
email	输入email格式
tel	手机号码
url	只能输入url格式
number	只能输入数字
search	搜索框
range	范围、滑动条
color	拾色器
time	时间
date	日期（不是绝对的）
datetime	时间日期
month	月份
week	星期

注：部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

表单元素（标签）

<datalist> 数据列表与input配合使用

<input type=”text” list=”data”>
<datalist id=”data”>
    <option>男</option>
    <option>女</option>
    <option>不详</option>
</datalist>

<keygen>：生成加密字符串(了解)
keygen元素的作用是提供一种验证用户的可靠方法；
keygen元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<output>：不可当做数据提交，样式、作用和label差不多；
<meter>：表示度量器，不建议用作进度条；如果不在正常范围内，可以显示黄色警告色；

<meter value="81" min="0" max="100" low="60" high="80"/>

样式和<progress></progress>差不多，但是拥有警告等颜色；
Max-width；
Min-width。

表单属性

placeholder：占位符；
autofocus：自动获取焦点；
name：给表单添加name属性之后，可以显示历史输入的内容；
multiple：文件上传多选或多个邮箱地址；
autocomplete：自动完成填充，用于表单元素，也可用于表单自身(on/off)；
form：指定表单项属于哪个form，处理复杂表单时会需要；
novalidate：关闭验证，可用于<form>标签；
required：必填项，表示此表单不能为空；
pattern：正则表达式，验证表单、手机号，如

<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">

表单重写没有提及，自行验证，共包含应用于提交按钮上，如：<input type="submit" formaction="xxx.php">。

表单事件

oninput：用户输入内容时触发，可用于移动端输入字数统计；
oninvalid 验证不通过时触发。

input.oninvalid = function(){
    this.setCustomValidity("你邮箱输错掉了，现在重新输入");
};

案例练习

注册表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form{
            width: 200px;
            margin: 40px auto;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>注册信息</legend>
            <label>手机号：<input type="tel" name="b" id="userName" pattern="/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/"></label><br>
            <label>密&nbsp&nbsp&nbsp码：<input type="password" name="c" id="pwd"></label><br>
            <input type="submit" style="width: 200px;">
        </fieldset>
    </form>
    <script>
        var userName = document.getElementById("userName");
        var pwd = document.getElementById("pwd");
        userName.onblur = function () {
            this.oninvalid = function () {
                this.setCustomValidity("您输入的手机号有误");
            }
        }
    </script>
</body>
</html>

多媒体

并非所有用户的浏览器都安装了Flash插件，并且移动设备的浏览器并不支持Flash插件。通过HTML5播放音频/视频，以及针对不同浏览器所支持的格式，做多浏览器兼容处理。

音频

HTML5通过<audio>标签来解决音频播放的问题。使用非常简单：

<audio scr="xxx.mp3"></audio>

并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay：自动播放；
controls：是否显不默认播放控件；
loop：循环播放；
preload：预加载，同时设置autoplay时有些属性会失效。
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：（目前，audio元素支持的三种音频格式如下）

格式	IE9	Firefox3.5	Opera3.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

兼容性写法

<audio>
    <source src="music.mp3">
    <source src="music.ogg">
    <source src="music.wav">
    抱歉，您的浏览器不支持音频播放
</audio>

浏览器兼容哪一种格式，会自动获取对应的格式进行播放，不会显示最下面的文字；如果浏览器都不兼容这三种音频格式(IE678)，就会显示最下面的文字。

视频

HTML5通过<video>标签来解决视频播放的问题。同音频标签用法完全一样，<video>使用也相当简单，如下所示：

<video scr="xxx.mp4" controls="controls"></video>

同样，通过附加属性可以更友好的控制视频的播放:
autoplay：自动播放；
controls：是否显示默认播放控件；
loop：循环播放；
preload：预加载，同时设置了autoplay，此属性将失效；
width：设置播放窗口宽度；
height：设置播放窗口的高度。
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，当前video元素支持的三种视频格式如下：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

DOM扩展

获取元素

老版本：document.getElementsByClassName ('class');：通过类名获取元素，以类数组形式存在；
H5：
document.querySelector('div');：通过CSS选择器获取符合匹配条件的第一个元素；
document.querySelector(".box");：第一个元素；
document.querySelector("#box");：第一个元素；
document.querySelectorAll('selector'); 通过CSS选择器获取元素，以类数组形式存在。
在H5中，DOM新增的获取元素功能类似jQuery中的方法：（jQuery方法获取到的是数组）
$(".box");；
$("#box");；
$("div.box");。

类名操作

老版：只能直接指定，如box1.className="content hide";；
jQuery中：addClass()/removeClass()/hasClass()/toggleClass()；
H5中，新增功能和jQuery中方法一样好用：
Node.classList.add('class');：添加class；
Node.classList.remove('class');：移除class；
Node.classList.toggle('class');：切换class，有则移除，无则添加；
Node.classList.contains('class');：检测是否存在class；
Node指一个有效的DOM节点，是一个通称。

自定义属性`data-*=""`

在HTML5中我们可以自定义属性必须要以data-开头，例如data-info="我是自定义属性";，通过Node.dataset['info'];我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的；
当我们如下格式设置时，则需要以驼峰格式才能正确获取：

data-my-name="yijiang";
//获取
Node.dataset['myName']

案例练习 (tab 切换)

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏练习</title>

    <style>
        body{
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .tab{
            margin: 30px auto;
            width: 400px;
            background-color: #fafafa;
        }

        nav{
            height: 40px;
            background-color: #009999;
            display:flex;
            text-align: center;
            line-height:40px;
            overflow: hidden;
        }
        nav a{
            text-decoration: none;
            width: 100px;
            border-right: 1px solid #fff;
        }
        nav a:last-child{
            border-right: none;
        }
        nav a.active{
            background-color: #00dddd;
        }

        .tab ol{
            line-height: 30px;
        }
        .tab .cont{
            overflow: hidden;
            display: none;
        }

    </style>
</head>
<body>
   <div class="tab">
       <nav>
           <a href="javascript:;" data-content="local" class="active">本地新闻</a>
           <a href="javascript:;" data-content="global">国际新闻</a>
           <a href="javascript:;" data-content="sport">体育新闻</a>
           <a href="javascript:;" data-content="funny">娱乐新闻</a>
       </nav>

       <section class="cont" id="local" style="display: block">
           <ol>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
       <section class="cont" id="global">
           <ol>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
       <section class="cont" id="sport">
           <ol>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
       <section class="cont" id="funny">
           <ol>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
   </div>

    <script>
        var aArr = document.querySelectorAll("nav a");

        for(var i=0; i<aArr.length; i++){
            aArr[i].onclick = function () {
                //获取到当前选中的标签
                var current = document.querySelector(".active");
                //获取当前标签的对应section的id
                console.log(current);
                var currentID = current.dataset["content"];
                //取消当前选中状态
                current.classList.remove("active");
                //隐藏对应的内容部分
                document.querySelector("#"+currentID).style.display = "none";

                //改变当前选中标签状态
                this.classList.add("active");
                //获取当前选中状态对应的section的id
                var thisID = this.dataset["content"];
                //显示对应的内容
                document.querySelector("#"+thisID).style.display = "block";
            }
        }
    </script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏练习</title>

    <style>
        body{
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .tab{
            margin: 30px auto;
            width: 400px;
            background-color: #fafafa;
        }

        nav{
            height: 40px;
            background-color: #009999;
            display:flex;
            text-align: center;
            line-height:40px;
            overflow: hidden;
        }
        nav a{
            text-decoration: none;
            width: 100px;
            border-right: 1px solid #fff;
        }
        nav a:last-child{
            border-right: none;
        }
        nav a.active{
            background-color: #00dddd;
        }

        .tab ol{
            line-height: 30px;
        }
        .tab .cont{
            overflow: hidden;
            display: none;
        }

    </style>
</head>
<body>
   <div class="tab">
       <nav>
           <a href="javascript:;" data-content="local">本地新闻</a>
           <a href="javascript:;" data-content="global">国际新闻</a>
           <a href="javascript:;" data-content="sport">体育新闻</a>
           <a href="javascript:;" data-content="funny">娱乐新闻</a>
       </nav>

       <section class="cont" id="local">
           <ol>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
               <li>111南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
       <section class="cont" id="global">
           <ol>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
               <li>222南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
       <section class="cont" id="sport">
           <ol>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
               <li>333南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
       <section class="cont" id="funny">
           <ol>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
               <li>444南方大旱，农作物减产绝收面积上亩</li>
           </ol>
       </section>
   </div>

    <script>
        var aArr = document.querySelectorAll("nav a");

        (function (index) {

            for(var i=0; i<aArr.length; i++){
                //选中一个进行初始化
                if (i == index){
                    //给对应的标签绑定选中状态
                    aArr[i].classList.add("active");
                    //获取对应的section的id
                    var myID = aArr[i].dataset["content"];
                    document.querySelector("#"+myID).style.display = "block";
                }
                console.log(aArr[index]);

                //绑定点击事件
                aArr[i].onclick = function () {
                    //获取到当前选中的标签
                    var current = document.querySelector(".active");
                    //获取当前标签的对应section的id
                    console.log(current);
                    var currentID = current.dataset["content"];
                    //取消当前选中状态
                    current.classList.remove("active");
                    //隐藏对应的内容部分
                    document.querySelector("#"+currentID).style.display = "none";

                    //改变当前选中标签状态
                    this.classList.add("active");
                    //获取当前选中状态对应的section的id
                    var thisID = this.dataset["content"];
                    //显示对应的内容
                    document.querySelector("#"+thisID).style.display = "block";
                }
            }
        })(0);

    </script>
</body>
</html>

H5新增API

多媒体

方法：load() 加载、play() 播放、pause() 暂停；
属性：
currentTime 视频播放的当前进度；
duration:视频的总时间；
paused:视频播放的状态。
事件：
oncanplay：事件在用户可以开始播放视频/音频（audio/video）时触发；
ontimeupdate：通过该事件来报告当前的播放进度；
onended：播放完时触发。
全屏切换：video.webkitRequestFullScreen();。
案例：视频播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放器</title>

    <link rel="stylesheet" href="../fontawesome/css/font-awesome.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        figure{
            width: 720px;
            height: 410px;
            border: 1px solid #000;
            margin: 40px auto;
        }
        figcaption{
            text-align: center;
            line-height: 40px;
            font-family: "Microsoft Yahei";
            font-size: 24px;
        }

        .player{
            width: 720px;
            height: 360px;
            border: 1px solid #000;
            margin: 10px auto;
            background: #000 url(h5-source/loading.gif) center no-repeat;
            background-size: auto 100%;
            position: relative;
            border-radius: 20px;
        }
        .player video{
            display: block;
            height: 100%;
            margin: 0 auto;
        }

        .controls{
            width: 700px;
            height: 40px;
            position: absolute;
            left: 10px;
            bottom: 10px;
            background: rgba(200,120,140,0.8);
        }
        .switch{
            width: 20px;
            height: 20px;
            position: absolute;
            left: 10px;
            top: 10px;
            background-color: #bbb;
            text-align: center;
            line-height: 20px;
            color: white;
        }

        progress{
            width: 450px;
            height: 10px;
            background-color: white;
            /*color: red;*/
            position: absolute;
            left: 40px;
            top: 15px;
        }
        .time{
            position: absolute;
            left: 500px;
            line-height: 40px;
        }
        .extend{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            text-align: center;
            line-height: 20px;
        }

    </style>
</head>
<body>
    <figure>
        <figcaption>视频播放器</figcaption>

        <div class="player">
            <video src="h5-source/fun.mp4"></video>
            <div class="controls">
                <a href="#" class="switch icon-play"></a>
                <progress value="20" max="100"></progress>
                <div class="time">
                    <span class="currentTime">--:--:--</span>
                    /
                    <span class="totalTime">--:--:--</span>
                </div>
                <a href="#" class="extend icon-resize-full"></a>
            </div>
        </div>
    </figure>

    <script>
        //获取视频
        var video = document.querySelector("video");
        //播放暂停按钮
        var switchBtn = document.querySelector(".switch");
        //进度条
        var progressBar = document.querySelector("progress");
        //当前时间
        var currentTime = document.querySelector(".currentTime");
        //总时间
        var totalTime = document.querySelector(".totalTime");
        //全半屏
        var extendBtn = document.querySelector(".extend");

        //2.播放暂停按钮点击
        switchBtn.onclick = function () {
            //判断按钮状态，如果当前暂停，点击之后开始播放，并更改按钮状态，反之同理
            if (video.paused){
                this.classList.remove("icon-play");
                this.classList.add("icon-pause");
                video.play();
            }else {
                this.classList.remove("icon-pause");
                this.classList.add("icon-play");
                video.pause();
            }
        };

        var totalT = 0;
        //1.视频加载完成之后，进入可播放状态
        video.oncanplay = function () {
            alert(111);
            //获取总时间
            console.log(video.duration);
            totalT = video.duration;
            //时
            var h = Math.floor(totalT/3600);
            //分
            var m = Math.floor(totalT%3600/60);
            //秒
            var s = Math.floor(totalT%60);

            //把格式化成 00:00:00
            h = h>=10 ? h:"0"+h;
            m = m>=10 ? m:"0"+m;
            s = s>=10 ? s:"0"+m;
            totalTime.innerHTML = h + ":" + m + ":" + s;
            //设置当前播放时间为 00:00:00
            currentTime.innerHTML = "00:00:00";

        };


        var currentT = 0;
        //3.视频播放过程中，要不断更新当前时间和当前进度条
        video.ontimeupdate = function () {
            currentT = video.currentTime;
            //更新视频播放进度
            progressBar.value = currentT / totalT * 100;

            //时
            var h = Math.floor(currentT/3600);
            //分
            var m = Math.floor(currentT%3600/60);
            //秒
            var s = Math.floor(currentT%60);
            //化成格式 00:00:00
            h = h>=10 ? h:"0"+h;
            m = m>=10 ? h:"0"+m;
            s = s>=10 ? s:"0"+s;
            currentTime.innerHTML = h + ":" + m + ":" + s;
        };

        //4.全半屏播放
        extendBtn.onclick = function () {
            video.webkitRequestFullScreen();
        }
    </script>
</body>
</html>

拖拽

在HTML5的规范中，我们可以通过为元素增加属性draggable="true";来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

拖拽元素

页面中设置了draggable="true"属性的元素。

目标元素

页面中任何一个元素都可以成为目标元素。

事件监听

拖拽元素	说明
ondrag	应用于拖拽元素，整个拖拽过程都会调用
ondragstart	应用于拖拽元素，当拖拽开始时调用
ondragleave	应用于拖拽元素，当鼠标离开拖拽元素原位置时调用
ondragend	应用于拖拽元素，当拖拽结束时调用

目标元素	说明
ondragenter	应用于目标元素，当拖拽元素进入时调用
ondragover	应用于目标元素，当拖拽元素在目标元素上时连续触发
ondrop	应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave	应用于目标元素，当鼠标离开目标元素时调用

说明：
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式；
这要通过调用ondragover事件的event.preventDefault()方法。
将一个盒子中的元素拖拽到另外一个盒子中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>

    <style>
        .box1,.box2{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            float: left;
            margin: 40px;
        }
        .sBox{
            width: 75px;
            height: 75px;
            background-color: #f00;
            float: left;
            border-radius: 50%;
            text-align: center;
            line-height: 75px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="sBox" draggable="true">1</div>
    <div class="sBox" draggable="true">2</div>
    <div class="sBox" draggable="true">3</div>
    <div class="sBox" draggable="true">4</div>
    <div class="sBox" draggable="true">5</div>
    <div class="sBox" draggable="true">6</div>
    <div class="sBox" draggable="true">7</div>
    <div class="sBox" draggable="true">8</div>
</div>
    <div class="box2"></div>

    <script>
        //获取事件源
        var sBoxs = document.querySelectorAll(".sBox");
        var box1 = document.querySelector(".box1");
        var box2 = document.querySelector(".box2");

        var temp = null;
        //给各个小盒子绑定事件
        for(var i=0; i<sBoxs.length; i++){
            sBoxs[i].ondragstart = function () {
                temp = this;
            };
        }

        //给目标元素绑定事件
        box2.ondragover = function (event) {
            event.preventDefault();
        };
        box2.ondrop = function () {
            this.appendChild(temp);
        };

        box1.ondragover = function (event) {
            event.preventDefault();
        };
        box1.ondrop = function () {
            this.appendChild(temp);
        }
    </script>
</body>
</html>

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示；
requestFullscreen() 开启全屏显示；
cancleFullscreen() 关闭全屏显示；
不同浏览器需要添加前缀如：
webkitRequestFullScreen、
mozRequestFullScreen
webkitCancleFullScreen、
mozCancleFullScreen
兼容性写法：

var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
       docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
       docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
       docElm.webkitRequestFullScreen();
    }

通过document.fullScreen检测当前是否处于全屏。
不同浏览器需要添加前缀
document.webkitIsFullScreen、
document.mozFullScreen
全屏伪类：(了解)
:full-screen .box {}、
:-webkit-full-screen {}、
:moz-full-screen {}

Web存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储
window.sessionStorage：会话存储；
window.localStorage(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面)。

一、特性

设置、读取方便；
容量较大，sessionStorage约5M、localStorage约20M；
只能存储字符串，可以将对象JSON.stringify() 编码后存储。

二、window.sessionStorage

生命周期为关闭浏览器窗口;
在同一个窗口下数据可以共享。

三、window.localStorage

永久生效，除非手动删除；
可以多窗口共享。

四、方法详解

setItem(key, value)：设置存储内容；
getItem(key)：读取存储内容；
removeItem(key)：删除键值为key的存储内容；
clear()：清空所有存储内容；
key(n)：以索引值来获取存储内容（了解）。
案例：记住用户名

五、其它（了解）

WebSQL、IndexDB，浏览器中的本地数据库；
已经被w3c 放弃了..
生命周期差异，存储空间差异。

网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值;
window.online用户网络连接时被调用；
window.offline用户网络断开时被调用。

<script>
    window.online = function () {
        alert("联网");
    };
    window.addEventListener("offline",function () {
        alert("已断网");
    });
</script>

应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

一、优势

可配置需要缓存的资源；

网络无连接应用仍可用；
本地读取缓存资源，提升访问速度，增强用户体验；
减少请求，缓解服务器负担。

二、缓存清单

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型：
AddType text/cache-manifest .appcache
在.appcache文件中的内容格式如下：

CACHE MANIFEST
#下面是要缓存的文件
CACHE:
        http://xxx.jpg

例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

三、manifest文件格式

顶行写CACHE MANIFEST；
注释使用#开头；
CACHE:换行，指定我们需要缓存的静态资源，如.css、image、js等；

NETWORK:换行，指定需要在线访问（联网才能访问）的资源，可使用通配符；
FALLBACK:当前页面无法访问时退回的页面(回退;后退)，写法如下：
换行，当被缓存的文件找不到时的备用资源：

FALLBACK:
        4O4.html

四、其它

CACHE：可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST；
可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制；

CACHE：需要缓存那些资源;
NETWORK：不需要缓存那些资源，指定必须在联网状态下才能访问的资源；
FALLBACK：当访问不到某个资源时，自动由另外一个资源替换。

CACHE MANIFEST
CACHE:(以下部分是需要缓存的资源)
    1.jpg
    js/jquery.min.js
NETWORK:
    js/demo.js
    # 可以使用 * 号替代
FALLBACK:
    one.css two.css
    //会缓存two.css 当找不到one.css 会去找two.css 文件.

#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存。

地理定位

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)。

一、获取地理信息方式

IP地址；

三维坐标：
GPS（Global Positioning System，全球定位系统）：
目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：1.美国 Global Positioning System （全球定位系统）简称GPS；.2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统）简称GALILEO（伽利略）；4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；5.日本 Quasi-Zenith Satellite System （准天顶卫星系统）简称QZSS ；6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS；以上6个系统中国都能使用。
Wi-Fi；
手机信号。
用户自定义数据：
如下对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
位置信息获取方式对比：

数据源	优点	缺点
IP地址	任何地方都可用；在服务器端处理	不精确（经常出错，一般精确到市级）；运算代价大
GPS	很精确	定位时间长，耗电量大；室内效果差；需要额外硬件设备支持
WiFi	精确；可在室内使用；简单、快捷	在乡村这些WiFi接入点少的地区无法使用
手机信号	相当精确；可在室内使用；简单、快捷	需要能够访问手机或其modem设备
用户自定义	可获得比程序定位服务更准确的位置数据；用户自行输入可能比自动检测更快	可能很不准确，特别是当用户位置变更后

二、隐私

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

三、API详解

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息；
navigator.geolocation.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息；
当成功获取地理信息后，会调用succssCallback(position)，并返回一个包含位置信息的对象position。
获取坐标Coords(坐标)：position.coords.latitude纬度、
position.coords.longitude经度；
当获取地理信息失败后，会调用errorCallback(error)，并返回错误信息error；
可选参数options对象可以调整位置信息数据收集方式。
根据兴趣可以玩玩全景地图和VR（vr用Pano2VR工具可以制作，可百度查看全景地图制作）。
兼容：

<script>
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack);
    }else {
        alert("对不起，您的浏览器不能获取到位置...");
    }
    //成功获取位置时回调
    function successCallBack(position) {
        console.log(position.coords.latitude);
        console.log(position.coords.longitude);
    }
    //获取位置失败时回调
    function errorCallBack(error) {
        console.log(error);
    }
</script>

案例：
百度地图案：
- 使用百度地图API，然后选择jsAPI，然后根据需要选择对应的地图样式，赋值对应的代码到项目中；
- 在API控制台生成秘钥，并将秘钥放到代码对应的位置；
- 传入对应的经纬度。

历史

提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
旧版本浏览器..
history.back() 回退；
history.forward() 前进。

09-HTML5新特性

前言

认识HTML5

语法规范

语义标签

常用新语义标签

兼容处理

表单

输入类型 (表单类型，表单元素，表单属性,表单事件。)

表单元素（标签）

表单属性

表单事件

案例练习

多媒体

音频

视频

DOM扩展

获取元素

类名操作

自定义属性data-*=""

案例练习 (tab 切换)

H5新增API

多媒体

拖拽

拖拽元素

目标元素

事件监听

全屏

Web存储

一、特性

二、window.sessionStorage

三、window.localStorage

四、方法详解

五、其它（了解）

网络状态

应用缓存

一、优势

二、缓存清单

三、manifest文件格式

四、其它

地理定位

一、获取地理信息方式

二、隐私

三、API详解

历史

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

自定义属性`data-*=""`