html5新增的标签或者属性

会有一点多，耐心看看把

一、语义化标签

<header></header>
<nav></nav>
<main>
    <article></article>
    <aside></aside>
</main>
<footer></footer>

这里的标签是并不代表只能有一个，可以有多个（比如一个页面可以有多个header标签），本质上与div相同都是block元素

二、form表单属性

            <input type = "email">		//输入内容必须是邮箱，有自动检测功能
            <input type = "tel">		//电话号码，但不具备自动检测，因为每个国家的电话号码不一定是同一个格式，其功能是在移动端点击可以弹出一个数字输入面板（不能输入字母）
            <input type = "url">		//输入内容必须是合法的网址，有自动检测功能，必须包含http或者https
            <input type = "number" max="10" min="0">		//只能输入数字，可以是小数，且最大为10，最小为0
            <input type = "search">			//提供人性化的搜索体验
            <input type = "range" max="10" min="0" value="5">	//类似于一个进度条，最大为10，最小为0，可调节
            <input type = "color">			//颜色拾取
            <input type = "time">			//获取输入时间24小时制，时分
            <input type = "date">			//获取输入日期年月日
            <input type = "datetime">		//获取输入时间，不过只有safari可以，其他浏览器不兼容
            <input type = "datetime-local">		//获取输入时间，年月日  时分	
            <input type = "month">			//获取输入时间，年月
            <input type = "week">			//获取输入时间，年周
            <input type = "text" placeholder="hello" autofocus>				//placeholder显示提示内容，autofocus自动获取焦点，它只有一个值
            <input type = "text" autocomplete="on">		//autocomplete有两个值（on|off），为表单添加历史记录，不过有三个条件：值为on，文本框里的值必须被成功提交过，该input必须有name属性
            <input type = "text" required>		//要求表单必须输入内容
            <input type = "text" pattern="^(\+86)?1\d{10}$">	//正则表达式验证
            <input type = "file" multiple>		//文件上传，没有mutiple（只有一个值）就默认只能选择一个文件，而这里可以上传多个文件
            <input type = "email" multiple>		//发送邮件和上面一样，mutiple可以输入多个文件（必须要使用逗号分隔）
            <input type = "text" form="需要提交form表单的id">		//当这个input因为某些原因没有包含在form表单里面，则需要给这个input的form属性指定id值，就是是这个input隶属于这form

三、datalist

一个可以自主输入的下拉表

<input type = "url" list="urls">
        <datalist id="urls">
            <option value = "https://www.baidu.com" label="百度"></option>
            <option value = "https://www.bilibili.com" label="哔哩哔哩"></option>
            <option value = "https://www.huawei.com" label="华为"></option>
        </datalist>

这里要注意input里面的list属性值为对应datalist的id，url的值必须是完整的地址（http|https），lable属性是提示内容，但是各大浏览器的厂商渲染的效果不尽相同

四、新增的事件

document.querySelector('input').addEventListener('input',function () {
                console.log(this.value);
            });

表单的input事件：只要表单内的内容改变（不需要失去光标）即触发
与change事件做一下区别
表单的change事件：只要表单内的内容改变且失去光标即触发

五、进度条

        <progress max="10" value="5"></progress>		//最大值10，当前值5，不可修改
        <meter value="9" max="10" min="0" low="3" high="8"></meter>	//最大值10，最小值0，低区域0~3（不包含3），高区域8~10(不包括8)，当前值value，不可修改

六、多媒体标签

		<audio src = "音频url" controls autoplay loop></audio>	//音频，controls播放控件（必须要有，如果没有就无法播放），autoplay自动播放，loop自动循环
        <video src = "视频url" controls autoplay loop width="100px" height="120px" poster="显示第几帧的url"></video>		//视频，controls，autoplay，loop与上面相同。width与height为宽高（注意只需要设定一个值，来等比例缩放，倘若两个都设定就很难达到效果），poster是视频未播放的时候显示的图片

但是不同的浏览器支持的video类型也不近相同，这是有一个source标签来解决这问题

		<video controls>			//播放控件
            <source  src="...资源url" type="video/mp4">		//资源一，mp4类型
            <source  src="...资源url" type="video/flv">		//资源二，flv类型
        </video>

七、类操作方法

document.querySelector('ul').className='pp';				//以前的添加样式，会覆盖
document.querySelector('ul').classList.add('pp');			//h5的添加样式
document.querySelector('ul').classList.item(0);				//h5的获得目标索引的类名
document.querySelector('ul').classList.remove('pp');		//h5的移除样式
document.querySelector('ul').classList.toggle('pp');		//h5的切换样式
document.querySelector('ul').classList.contains('pp');		//h5的是否包含样式样式

八、自定义属性

以data开头，-来连接，都小写

document.querySelector('ul').setAttribute('data-index-max',1);	//定义自定义属性
console.log(document.querySelector('ul').getAttribute('data-index-max'));	//获取方法一，直接原名即可，不用驼峰命名
console.log(document.querySelector('ul').dataset.indexMax);		//获取方法二，不能原名，必须驼峰命名
console.log(document.querySelector('ul').dataset['indexMax']);		//获取方法三，不能原名，必须驼峰命名

九、新增事件、方法、属性（主要针对移动端，PC端可能会有兼容性问题）

a）、网络事件

window.addEventListener('online',function () {			//在网络连接的时候触发事件，如果已经是连接状态，则不会触发
console.log('网络连通了');
});
window.addEventListener('offline',function () {			//在网络断开的时候触发事件，如果已经是断开状态，则不会触发
    console.log('网络断开了');
})

b）、全屏方法和属性

以下的方法和元素都有兼容性问题，需要对其进行对应处理

$('button').eq(0).on('click',function () {
	$('body').get(0).requestFullscreen();		//设置全屏，注意这里的requestFullScreen（）是针对dom元素，是对目标元素进行全屏
});
$('button').eq(1).on('click',function () {
	document.webkitCancelFullScreen();			//是对整个document取消全屏（不能是针对某个元素）
});
$('button').eq(2).on('click',function () {
	console.log(document.fullscreenElement); //是对整个document进行处理（不能是针对某个元素），返回全屏的元素
});

c）、异步读取文件（FileReader）

new FileReader（）；
readAsText（）：读取文本文件，返回一个字符串，默认编码是UTF-8
readAsBinaryString（）：读取任意文件，返回二进制字符串，
readAsDataURL（）：读取由一段以data开头的字符串的文件，这个文件本质就是DataURL格式的
abort（）：中断读取

那什么是DataURL呢？
DataURL：是一种将文件嵌入到文档的方案，且有一定的格式，它把资源转化为base64编码的字符串形式，并将这些内容直接存储到url里面（这个可以优化网站的效率）

<form action = "" method="" enctype="multipart/form-data">
	<input type = "file" multiple>
</form>
<script>
   $(function () {
       $('input[type=file]').on('input',function () {		//绑定事件
           console.log(this.files instanceof Object);		//true，代表this.files是个伪数组
           $(this.files).each(function (index,value) {		//循环，处理多个文件
               var fr=new FileReader();				//实例化一个异步读取文件对象（注意这里是异步）
               fr.readAsDataURL(value);				//进行读取文件，异步的
           /*以下是FileReader异步对象提供的一些事件模型，用来捕获文件读取状态
            * abort:读取文件中断时触发
            * error:读取错误时触发
            * load:读取成功触发（下面用的就是这个）
            * loadend:读取完成触发（无论是成功还是失败）
            * loadstart:读取开始时触发
            * progress:读取过程中持续触发（50ms）
            * */
               fr.addEventListener('load',function () {		//完成时触发
                   $('input').after("<img src='"+fr.result+"' alt=''/>");				//动态创建标签并添加，这里的url为一个带数据的url
               });
           })
       })
   })
</script>

d）、元素拖拽

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "UTF-8">
        <title>Document</title>
    </head>
    <style>
        .s{
            width: 80%;
            background-color: #ccc;
            display: block;
            margin: 3px;
        }
        div{
            width: 10em;
            height: 10em;
            border:2px black solid;
            box-shadow: 0 0 3px black;
            float: left;
            margin: 1rem;
        }
        #container{
            width: 80%;
            height: 50%;
            margin: 10px auto;
            border:2px black solid;
            box-shadow: 0 0 3px black;
        }
    </style>
    <script type="text/javascript" src="../jQueryLib/jQuery.min.js"></script>
    <body>
        <div id="container">
            <div>
                <span class="s" id="s1" draggable="true">Hello World！</span>
                <span class="s" id="s2" draggable="true">Hello JavaScript！</span>
                <span class="s" id="s3" draggable="true">Hello HTML！</span>
            </div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <script>
            $(function () {
                /*拖拽的两个方面：被拖拽对象和拖拽目标
                * 分成两个部分，先说第一个方面的
                * 应用于被拖拽对象的事件：
                * drag：对于被拖拽对象，整个拖拽过程都会触发
                * dragstart：对于被拖拽对象，当拖拽开始时触发
                * dragleave：对于被拖拽对象，当鼠标托着元素且鼠标离开目标元素的大小范围时触发
                * dragend：对于被拖拽对象，整个拖拽过程都会触发
                * */
                $('#container').on({                        //利用事件委托，来提高效率
                    dragstart:function (e) {                //开始拖拽触发
                        console.log('dragstart事件');
                        e.originalEvent.dataTransfer.setData("text/html",e.target.id);
                        /*
                        * 1、这里注意jQuery的事件对象与原生js的事件对象不相同，需要originevent
                        * 2、这里的setData（format，data）：
                        *       2.1、format=>数据的类型（text/html | text/uri-list）
                        *       2.2、data=>一般来说就是字符串
                        * 3、这里的目的就是取出拖拽的元素的id，以便下面操作
                        * 4、这里的e.target是拖拽对象
                        * */
                    },drag:function (e) {                       //正在拖拽触发
                        console.log('drag事件');
                    },dragleave:function (e) {                  //与下面的事件重复，所以两个都会触发
                        console.log('dragleave事件111');
                    },dragend:function (e) {                    //取消拖拽触发
                        console.log('dragend事件');
                    }
                });
                /* 第二个方面的
                * 应用于拖拽目标（也就是拖拽到哪里的目标元素）的事件：
                * dragenter：对于拖拽目标，拖拽元素进入目标触发
                * dragover：对于拖拽目标，当拖拽元素停留在目标里面都会触发
                * drop：对于拖拽目标，当在目标上松开鼠标时调用(不过有一点小问题，将在下面说到)
                * dragleave：对于拖拽目标，托拽元素离开目标会触发
                * */
                $('#container').on({                            //事件委托
                    dragenter:function (e) {
                        console.log('dragenter事件');
                    },drop:function (e) {
                        //浏览器会默认阻止drag事件，所以需要必须在dragover（其他的都不行）中阻止浏览器的默认行为
                        console.log('drop事件');                          //这里的e.target是拖拽目标
                        $(e.target).append(document.querySelector('#'+e.originalEvent.dataTransfer.getData('text/html')));
                        //得到id并添加元素
                    },dragover:function (e) {
                        e.preventDefault();                             //阻止浏览器的默认行为
                        console.log('dragover事件');
                    },dragleave:function (e) {
                        console.log('dragleave事件222');
                    }
                });
            })
        </script>
    </body>
</html>

e）、地域定位

这里PC端很难获取地址，但可在移动端获取（可以试一试），而在PC我们大多数都是用第三方提供的API（百度、高度、腾讯等等）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "UTF-8">
        <title>Document</title>
    </head>
    <style>
        #container{
            width: 80%;
            height: 5em;
            margin: 10px auto;
            border:2px black solid;
            box-shadow: 0 0 3px black;
        }
    </style>
    <script type="text/javascript" src="../jQueryLib/jQuery.min.js"></script>
    <body>
        <div id="container">
        </div>
        <script>
            $(function () {
                (function getLocaton() {                        //立即执行函数
                    if(navigator.geolocation){
                        //navigator.geolocation.getCurrentPosition(success,error,option)
                        //success:获取地址成功时的回调函数
                        //error:获取地址失败时的回调函数
                        //option:调整获取地址数据的一些参数
                        //      =>enableHighAccuracy  :  是否使用高精度
                        //      =>timeout  :  设置超时时间，单位ms
                        //      =>maximumAge  :  设置浏览器重新获取地理位置消息的时间间隔，单位ms
                        //      =>{}代表按照默认
                        navigator.geolocation.getCurrentPosition(
                            //成功时调用
                            function (position) {
                                $('#container').html(
                                    "Latitude: "+position.coords.latitude+"<br/>"+
                                        "Longitude: "+position.coords.longitude
                                );
                                /*
                                * position.coords.latitude =>纬度
                                * position.coords.longitude =>经度
                                * position.coords.accuracy =>精度
                                * position.coords.altitude =>海拔高度
                                * */
                            },
                            //失败时调用
                            function (error) {
                                switch(error.code){
                                    case error.POSITION_UNAVAILABLE:
                                        $('#container').html('POSITION_UNAVAILABLE');
                                        break;
                                    case error.PERMISSION_DENIED:
                                        $('#container').html('PERMISSION_DENIED');
                                        break;
                                    case error.TIMEOUT:
                                        $('#container').html('TIMEOUT');
                                        break;
                                    case error.UNKNOWN_ERROR:
                                        $('#container').html('UNKNOWN_ERROR');
                                        break;
                                }
                            },
                            {}
                        )
                    }
                    else{
                        $('#container').html('Geoloaction is not allow.');
                    }
                }())
            })
        </script>
    </body>
</html>

d）、web存储

sessionStorage：存储在单个页面的内存里（生命周期为当前页面）。容量5mb左右，下面介绍一些他的方法
setItem（key，value）：存储数据，以键值对的方式存储
getItem（key）：获取数据，通过指定名称的key获取value值，没有就返回null
removeItem（key）：移除数据，如果在删除的时候key值错误，则不会报错但是也不会删除数据
clear（）清空所有数据（较暴力，不建议）

$('input[type=button]').on('click',function () {
    window.sessionStorage.setItem('name',$(this).siblings('input[type=text]').val());
    console.log(window.sessionStorage.getItem('name'));
})

localStorage：存储浏览器内（不同浏览器不能共享数据，只有同一浏览器的相同页面的不同窗口可以共享数据，存储在硬盘上，同生命周期为永久，如果要删除需要手动）。容量20mb左右，下面介绍一些他的方法
setItem（key，value）：存储数据，以键值对的方式存储
getItem（key）：获取数据，通过指定名称的key获取value值，没有返回null
removeItem（key）：移除数据，如果在删除的时候key值错误，则不会报错但是也不会删除数据
clear（）清空所有数据（较暴力，不建议）

$('input[type=button]').on('click',function () {
    window.localStorage.setItem('name',$(this).siblings('input[type=text]').val());
    console.log(window.localStorage.getItem('name'));
})

e）、应用缓存

概念：使用H5，通过创建cache manifest 文件来轻松的创建web应用的离线模式（当然浏览器也可以缓存，但是浏览器的缓存机制是要么不缓存要么全部缓存，无法配置自己想要缓存的资源），manifest是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）
优点：可配置需要缓存的资源，网络断开的时候也可访问，本地读取缓存资源，提高访问速度，提高用户体验，减少请求，缓解服务器负担
Cache Manifest 使用：

1、如果需要启动应用程序缓存，需要在文档的<html>标签中包含manifest属性

<html lang="en" manifest="demo.appcache">
//manifest="应用程序缓存清单文件的路径 建议文件的扩展名是appcache，这个文件的本质是一个文本文件"

2、每个指定了manifest的页面在用户对其访问都会被缓存，如果没有指定manifest属性，则页面不会被缓存（除非manifest文件中指定了该页面）

3、注意，manifest文件需要配置正确的MIME-type，即“text/cache-manifest”。必须在web服务器上配置（这里是针对IIS，如果是APACHE就没有必要配置了）

4、manifest文件分为2个部分

manifest文件

CACHE MANIFEST
#第一部分
#井号是注释，CACHE MANIFEST是用来标注这个是一个缓存文件
#且CACHE MANIFEST必须是第一句



#第二部分
#需要缓存的文件清单列表
# 在这里的*（星号）代表使有文件
#格式如下
CACHE:
../images/image03.jpg
../images/image04.jpg

#配置每一次都需要重新从服务器获取的文件列表
#格式如下
NETWORK:
../images/image05.jpg
../images/image06.jpg

#配置如果文件无法获取则使用指定的文件代替
# 在这里的/（斜杠）代表所有文件
#格式如下（在需要替换的文件与替换文件之间空格相连）
FALLBACK:
../images/image06.jpg ../images/image05.jpg

f）、多媒体播放器

常用方法： load（） 加载、play（） 播放、pause（） 暂停 jQuery没有对视频播放控件的方式，也就是说如果要操作视频，就必须使用原生的js方法（dom原生）
常用属性：currentTime视频播放的当前进度、duration视频的总事件，单位为秒，是小数、paused视频播放的状态
常用事件：canplay当浏览器能够开始播放指定的音频/视频时触发、timeupdata通过事件来回报当前的播放进度、ended播放完成时触发
本文只用于个人学习和记录