09-HTML5新特性

2017-09-05 本文已影响30人 magic_pill

前言

认识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-*=""`