html5新增的标签或者属性

Love The Way You Lie 2023-07-18 05:49 40阅读 0赞

### 会有一点多，耐心看看把 ###

# 一、语义化标签 #

**这里的标签是并不代表只能有一个，可以有多个（比如一个页面可以有多个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里面的**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**播放完成时触发  
本文只用于个人学习和记录