HTML5新特征

前端开发 HTML5 HTML

创建时间:2019-08-14 17:15

字数:790 阅读:

评论:

HTML5新特性
1. 1、解决语义问题，html5新增的标签在我们的低版本的浏览器中有的是识别不出来的，尤其是ie浏览器。以下是解决的方案
多媒体标签新属性
类的增加
自定义属性DATA-
获取网络状态
获取地理位置
本地存储

HTML5新特性

（1）取消了过时的标签如：font和center
（2）新表单元素的引入（如email，可以不用写js代码即可验证邮箱）
（3）新语义便签的引入（header，section，footer..）
（4）canvas标签
（5）本地数据库（列如：localstorage）
（6）新增API

1、解决语义问题，html5新增的标签在我们的低版本的浏览器中有的是识别不出来的，尤其是ie浏览器。以下是解决的方案

在script标签中创建列如：（document.createElement(‘nav’));
利用插件html5shiv.min.js，注意如果只用一个插件的话，我们谷歌浏览器其实是无需加载这个插件的所以我们只需要兼容ie即可（lte是小于）

<!--[if lte IE 6]>       <script src="node_modules/html5shiv.min.js/html5shiv.min.js"></script> <![endif]-->

多媒体标签新属性

video和audio

添加了状态栏（controls属性）
添加了自动播放属性、循环播放（autoplay、loop）
解决浏览器兼容问题可以用source

表单新特性：

email、url、color、number、month…..‘

类的增加

以前我们需要增加或者移除一个类，我们需要引用jquery，但是我们h5给我们提供了新特性classList

<style>
        .wrapper{
            width: 100%;
            height: 100px;
            background: palegreen;
        }
    </style>
<body>
    <div></div>
    <input type="button" class="add" value="add">
    <input type="button" class="remove" value="remove">
    <input type="button" class="toggle" value="toggle">
    <input type="button" class="contains" value="contains">
    <script>
            let obj_div = document.querySelector("div");
            let add_btn = document.querySelector(".add");
            let remove_btn = document.querySelector(".remove");
            let toggle_btn = document.querySelector(".toggle");
            let contain_btn = document.querySelector(".contains");
            add_btn.onclick = function (){
                obj_div.classList.add("wrapper");
            }
    </script>

自定义属性DATA-

h5中提供自定义属性统一规定以data-开头

<!-- 注意如果是data-test-data则使用驼峰命名法获取数据 -->
    <div data-test="134">ggg</div>
    <script>
       let list = document.querySelector("div").dataset;
        console.log(list);
        // 获取属性值
        console.log(list.test);
        // 设置属性值
        list.resource = 50;
        // 同样的注意驼峰获取属性
        console.log(list.resource)
    </script>

获取网络状态

window.ononline = function(){
            alert("当前处于联网状态");
        }
        window.onoffline = function(){
            alert("当前处于断网状态");
        }

获取地理位置

h5中获取地理位置有实时和一次性

实时

window.navigator.geolocation.watchPosition(success,error);
        function success (msg,position) {
            console.log(msg);
            console.log(position);
        }
        function error (msg) {
            console.log(msg);
        }

本地存储

localStorage（永久）和sessionStorage（临时）

<input type="button" value="添加" class="btn1">
   <input type="button" value="删除" class="btn2">
   <input type="button" value="获取" class="btn3">
   <input type="button" value="清空" class="btn4">
   <script>
       let btn1 = document.querySelector(".btn1");
       btn1.onclick = function () {
           window.localStorage.setItem("name","zs");
       }
       let btn2 = document.querySelector(".btn2");
       btn2.onclick = function () {
           window.localStorage.removeItem("name");
       }
       let btn3 = document.querySelector(".btn3");
       btn3.onclick = function () {
           window.localStorage.getItem("name");
       }
       let btn4 = document.querySelector(".btn4");
       btn4.onclick = function () {
           window.localStorage.clear();
       }
   </script>

　　就这些吧，剩下的大家自行探索！欢迎在下方评论留言！

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）