HTML5新特性总结

最新推荐文章于 2024-04-09 15:36:07 发布

LinearLaw

最新推荐文章于 2024-04-09 15:36:07 发布

阅读量453

点赞数

文章标签： JavaScript HTML5 dom CSS3

本文链接：https://blog.csdn.net/LinearLaw/article/details/63250365

版权

HTML5

1、文档声明
    <!DOCTYPE html>

2、字符编码设置
    <meta charset="UTF-8">

3、验证    (http://validator.w3.org/)

HTML5新增的语义化标签

1、语义化标签：说明页面内容，便于搜索引擎寻找该内容；

优点：根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码，
同时让浏览器的搜索引擎更好的解析和收录。

    <article></article>     定义文章
    <header></header>       头部
    <nav></nav>             导航
    <main></main>           主要区域
    <section></section>     文档中的段落，某一区块
    <aside></aside>         和section类似
    <footer></footer>       底部，页脚

        tips:section和aside可以归属为main的子标签

    <mark></mark>           标记（很少用）

    <progress></progress>   进度条（很少用）
            该标签具有属性：max,min,value；

    <figure>                        表示单元（没见过，很少用）
        <figcaption></figcaption>   表示单元的标题
    </figure>

2、ie8以下的浏览器不识别H5标签

解决方法：引入一个js插件，放在head标签中；
    <!--[if It IE 8]-->
        <script src="html5shiv.js"></script>
    <!--[endif]-->

    tips:该段代码这样设置只有在IE8内才会识别，其余版本会解析成注释；

表单输入类型

1、效果如下图所示
<fieldset>
    <legend>标题</legend>
    //下面写表单元素input等 
</fieldset>

2、input系列新属性

<input type="email">    邮箱输入框，会对输入的内容进行自动验证；
    type="url"      网址输入框，需要加http或https协议名；
    type="search"   输入框，带有清空内容的按钮；
    type="tel"      电话号码，在移动端将会自动弹出数字键盘；

    type="number"   很少用，表示数字，有加减按钮，有max，min，value，step属性；
    type="range"    很少用，表示滑块，有min，max，step；

    type="time"     时间，显示时与分，有上下按钮，如下图；

    type="datetime-local"   本地时间，可以调整年月日时分；
    type="date"     带有年月日，带有日历选择框，value：xxxx-xx-xx；
    type="color"    value="#666666"，必须是六位十六进制；

    type="file"     上传文件，加入了multiple属性则可以多文件上传；

3、datalist数据列表

    <input type="text" list="course">
    <datalist id="course">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </datalist>

tips:input中用list，datalist用id，二者名称相同即进行关联；
    option中存放了关联字，当在input中输入数据时，将会显示关联字；

4、input属性

    placeholder=""，作为初始显示值；
    autofocus       自动获取焦点，没有值；
    autocomplete="on"   自动完成，值为on或off，默认为on；
    pattern="[a-z]{3}"  指定了输入框的验证方式，其值为正则表达式；

    required    拥有该属性的input内容不能为空，否则无法提交；

5、新事件

    oninput     用户输入内容时触发
    oninvalid   验证不通过时触发

6、新方法

    this.setCustomValidity  修改验证提示；

多媒体

    <audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="xxx.mp3">
        <source src="xxx.ogg">
        <source src="xxx.wmv">
    </audio>

tips:在source中提供多种格式的资源，多种资源便于兼容不同浏览器。
<video></video>标签与之类似。

DOM新增属性

获取元素：
    document.querySelector();
    document.querySelectorAll();

类名操作：
    node.classList.add();
    node.classList.remove();
    node.classList.contains();
    node.classList.toggle()

自定义属性

data-*；
data-*-*;

node.dataset.*;
    eg:document.querySelector("a").dataset.cont="world";

tips:data-*的属性形式在一些插件使用较多，例如bootstrap；

Review_正则表达式

1、元字符

    .       除以\n之外的所有单个字符；
    \       转义字符；

    |       左右表达式出现一次即true，为了避免歧义需要加()；
        eg：1a||b32，写成1(a||b)32;

    ()      优先级，分组

2、量词

    ？       某个字符出现0-1次；
    +       一次或多次；
    *       0-n次；
    {n}     n为正整数，出现n次；
    {n, }   
    {n,m}   

3、范围

    [0-9]   
    [a-z]
    [A-Z]   (支持连写)

    \d      数字，digital;
    \D      非数字;
    \s      空白字符，space;
    \S      非空白字符;
    \w      单词，word;
    \W      非单词；

    ^       开头;
    $       结尾;

    汉字编码    [\u4e00-\u9fa5];

HTML5_JS新方法

网络状态监测

window.online       用户连接时触发该事件；
window.offline      用户断开连接时触发该事件；

文件读取

FileReader对象
    <body>
            //页面结构很简单，一个img用于显示图片，一个file用于上传图片，一个button用来点击；
        <input type="file">
        <button>显示图片</button>
        <img src="" alt="">

        <script>

            //获取元素
            var file=document.querySelector('input');
            var button=document.querySelector('button');
            var img=document.querySelector('img');

            //点击按钮后触发事件
            button.onclick=function(){
                var reader=new FileReader();            //创建一个fileReader对象；

                reader.readAsDataURL(file.files[0]);    //获取元素中上传的文件，
                                        //file.files是一个数组，包含了上传的文件的全部信息；

                reader.onload=function(){           //文件读取完成之后触发事件；
                     console.log(reader.result);    
                     img.src=reader.result;         //读取的内容保存在了reader.result属性里，赋值给img.src；
                }
            }
        </script>
    </body>

参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

视频API

方法： load() 加载；
        play() 播放；
        pause() 暂停；

属性： currentTime 视频播放的当前进度；
        duration:视频的总时间；

事件：
    oncanplay:      事件在用户可以开始播放视频/音频（audio/video）时触发；
    ontimeupdate:   通过该事件来报告当前的播放进度，视频播放时不断的触发；
    onended:        播放完时触发；

全屏： video.webkitRequestFullScreen();

拖拽事件

分为两种，
第一种是拖拽元素，在元素中添加属性draggable="true"，即可成为拖拽元素；
第二种是目标元素；

1、对于拖拽元素
    ondrag      应用于拖拽元素，整个拖拽过程都会调用；
    ondragstart 应用于拖拽元素，当拖拽开始时调用；
    ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用；
    ondragend   应用于拖拽元素，当拖拽结束时调用；

2、对于目标元素
    ondragenter 应用于目标元素，当拖拽元素进入时调用；
    ondragover  应用于目标元素，当停留在目标元素上时调用；
    ondrop      应用于目标元素，当在目标元素上松开鼠标时调用；
    ondragleave 应用于目标元素，当鼠标离开目标元素时调用；

Web存储

大致分为三种：cookie、sessionStorage、localStorage;
    1、cookie存储；
        缺点：存储量较小，仅4K，存储数据时进行了加密，解析复杂；

    2、sessionStorage，会话存储，打开一个URL——→关闭页面    ——→即为一个会话；
        生命周期：从打开浏览器开始到关闭浏览器结束；
        主要存放一些小容量的临时数据，同一窗口下数据共享；
        容量：5M；

    3、localStorage，本地存储；
        永久存在，除非手动删除；
        可以多个窗口共享数据；
        容量：20M；

方法：
    setItem(key, value) 设置存储内容
    getItem(key) 读取存储内容
    removeItem(key) 删除键值为key的存储内容
    clear() 清空所有存储内容
    key(n) 以索引值来获取存储内容

        eg: window.sessionStorage.setItem('name','张飞');
            window.sessionStorage.clear();

缓存清单CACHE

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

manifest格式：新建文件，名称为demo.appcache，以下为格式；

    CACHE MANIFEST
    CACHE: 
    img1.jpg
        #指定我们需要缓存的静态资源，如.css、image、js等

    NETWORK: 
    *
        #指定需要在线访问的资源，可使用通配符

    FALLBACK: 
    one.css     two.css
        #当前页面无法访问时退回的页面(回退;后退)，
        #在这里，找不到one.css将会使用two.css取代；

优势：
    1、可配置需要缓存的资源；
    2、网络无连接时应用仍然可用；
    3、本地读取缓存资源，提升访问速度，增强用户体验；
    4、减少请求，缓解服务器负担；

tips:chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

地理定位

window.navigator.geolocation

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息；
                            获取成功时调用的函数，失败时的函数，用options可调整位置信息数据收集方式；

navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息；

position.coords.latitude纬度；
position.coords.longitude经度；

speedNaN    速度；
accuracy    精度，98；

关于视频音频的属性和方法
    http://blog.poetries.top/2016/12/30/video-audio/