H5新特性

1、input的新特性

可直接对button按钮的value进行修改。

// 用于显示数条的值
<form oninput="show.value=bar.value">

// required  是必填项
请输入数字：<input type="text"required><br><br>

// placeHolder 灰色的提示语  
请输入邮箱：<input type="email" placeholder="请输入注册邮箱"><br><br>

// range是控制条  设置最大值、最小值、每次调节的单位
<input type="range" id="bar" min="10" max="100" step="2">
<output id="show"></output><br>

//数字滑动条
<input type="number" min="10" max="100" step="2"><br><br>

//  date自动显示一个日历
请输入日期：<input type="date" placeholder="请输入date"><br><br>
请选择颜色：<input type="color" placeholder="请输入color" id="color"><br><br>

//  下拉列表  list必须与datalist的id值相同
请输入招式<input type="text" list="data">
<datalist id="data">
    <option value="亢龙有悔"></option>
    <option value="飞龙在天"></option>
    <option value="见龙在田"></option>
    <option value="神龙摆尾"></option>
    <option value="龙战于野"></option>
</datalist><br><br>
<input type="submit" value="submit">

// meter设置密码强度。
密码:<input type="password" id="pass" required onblur="check()">
<meter id="weak" min="0" max="4" value="2"></meter>

</form>

2、文件操作新特性

1、调用File接口。

<script>
   function test() {
// 可以接收多个文件，一个文件列表
       var fs=document.getElementById("f").files[0];
         if(/image\/\w+/.test(fs.type)){
             alert("文件格式正确");
           }else {
              alert("文件格式错误");
              alert(fs.type);  打印文件的后缀名
          }
        }
</script>

// type定义file 获得文件操作接口
<input type="file" id="f">
<input type="button" onclick="test()" value="测试">

※：也可以在input设置accpet属性限制接收文件类型。

2、Filereader  接口

<script>
    function test() {
        var fs=document.getElementById("f1").files[0];
        if(!/image\/\w+/.test(fs.type)){
            alert("文件格式错误");
        }else {
//          实例一个文件接收器
            var reader=new FileReader();
//          以url的方式读入 --->  图片用readAsDataURL()来读取,读的是url
            reader.readAsDataURL(fs);
//          txt 用 readAsText()
//          reader.readAsText(fs)
//          当reader加载成功时调用
            reader.onload=function () {
                div1.innerHTML='<img src="'+reader.result+'" alt="">';
            }
        }
    }
</script>


<input type="file" id="f1">
<input type="button" onclick="test()" value="测试">

拖拽特效：

总体分为三步：1、开始拖拽，将要拖拽的部分放入容器内。2、当覆盖时阻止默认动作。3、放下时阻止默认动作，将数据从容器读出。

当容器内放入文字时直接存文字。 

//    事件e默认存在
    div1.ondragstart=function(e){
        // 放数据,把显示的文字放入中间件dataTransfer,dataTransfer.setData()方法设置数据类型和拖动的数据
        e.dataTransfer.setData("Text","汇华学院欢迎你");  // text也是取值时的key
    }

    var div2=document.getElementById("div2");
    // 阻止默认的禁止操作
    div2.ondragover=function(e) {
        e.preventDefault();
    }


    div2.ondrop=function (e) {
        e.preventDefault();
        // 从e里面读出数据
        var str=e.dataTransfer.getData("Text");
        //

※：<a>和<img>默认允许拖动。先设置属性：draggable：是否可以拖拽，然后写拖拽过程。

整个页面加载完成后才能，获取到属性，最好放在下面。

当存照片之类的，应将元素的id存放到容器内。通过appendChild()方法添加元素。

// 将图片的id放进容器
    pic.ondragstart=function(e){
        e.dataTransfer.setData("img",this.id);
    }

    div1.ondragover=function(e){
        e.preventDefault();
    }

    div1.ondrop=function(e){
        e.preventDefault();
//        添加id进去
        div1.appendChild(document.getElementById(e.dataTransfer.getData("img")));
    }

Video标签：

preload 预加载。如果设置了 autoplay 属性，则忽略该属性。

• auto - 当页面加载后载入整个视频
• meta - 当页面加载后只载入元数据
• none - 当页面加载后不载入视频

添加control以后可以看见视频 、当能看见video标签中的文本文字时表示当前浏览器不支持该标签。

<video src="animation.mp4" id="video" preload="metadata" width="300px" controls loop>您的浏览器不支持video</video><br><br>

一些video新方法可直接进行操作：

video.play();    // 播放视频 

video.pause();   // 视频暂停

video.currentTime+=5   //  对当前视频进行快进5秒或者倒退5秒

video.playbackRate += 0.5;  //  对当前视频的播放速率增加0.5倍   

video.muted=true;   //  值为true时静音，false时不静音。

video.volume =1.5;   //  对当前音量大小进行直接赋值

为了解决一些兼容性也是可以换种写法：这种写法的好处是当不支持video标签的时候是可以展示出video标签中的文字，当有多个source标签的时候是会默认访问第一个，如果不能用则向下找到能用的为止。

<video controls autoplay loop>
    您的浏览器不支持video标签
    <source src="">
    <source src="">
</video>

 一些新标签：

<header>元素定义文档的页面组合，通常是一些引导和导航信息。用来表示头部信息。

<footer>元素定义文档或章节的末尾部分，一个 HTML 页面上可以允许有一个或多个 header 和 footer。

<nav>元素定义为用来构建导航，显示导航链接。<section> 元素定义为文档中的节。

<aside>元素定义一个页面的区域，用来表示包含和页面相关的主要内容，其作用主要是装载非正文类的内容。

<article> 元素表示文档、页面，用来显示一块独立的文章内容。artile 标签是可以相互嵌套的.

<hgroup> 标签定义为对网页或区段的标题元素进行组合但适当的使用 hgroup 元素对于 SEO 有一 定的好处，因此 hgroup 标签内建议使用 h1-h6 标签。<canvas> 标签定义图形，比如图表和其他图像。此标签只是图形容器，您必须使用脚本来 绘制图形。
<audio> 标签定义声音。当标签内的文字显示出来时，表示该浏览器不支持该标签。<datalist> 标签定义选项列表。请与 input 元素配合使用该元素。

<Details> 定义一个元素的详细内容。<summary>元素配合<Details> 使用，里面显示隐藏的信息。

<Mark> 标签定义带有记号的文本。<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源

一些新属性：

<input>相关属性：

readonly:只读属性。    disable:不可用，值不会传给后台。 spellcheck ： 检查文本段拼写。 

文本段相关属性：

contenteditable：是否可编辑元素的内容。