zoukankan      html  css  js  c++  java
  • HTML5

    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{
                 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>
    

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

  • 相关阅读:
    在 macOS High Sierra 10.13 搭建 PHP 开发环境
    给你的网站免费配置上 HTTPS 证书
    将 MacOS 默认的 PHP 版本升级到 7.*
    System.Data.SqlClient.SqlException: 'Incorrect syntax near 'OFFSET'.
    IIS7/8 HTTP Error 500.19 错误 0x80070021 错误代码:0x8007000d
    http error 502.5
    信用卡逾期了怎么办 ?逾期记录“修复”的两大原则
    APP多开教程
    lua调用不同lua文件中的函数
    Lua 用指定字符或字符串分割输入字符串,返回包含分割结果的数组
  • 原文地址:https://www.cnblogs.com/zhsh666/p/11345882.html
Copyright © 2011-2022 走看看