HTML5

  • H5并不是新的语言，而是html语言的第五次重大修改版本

  • 支持：

    1. 所有主流浏览器都支持H5，（chrome，Firefox，safari ……）。
    2. IE9以上支持H5，有选择地支持并不会全部支持（IE9会把H5新增标签的块级元素解析位行级元素）
    3. IE8以下不支持H5，无法解析H5标签，也就意味着所写样式无效，这时可以用js创建这些元素，但是创建出来的元素都是行级元素。也可以引入第三方js来支持H5（html5shiv）。

  • 改变了用户与文档的交互方式，多媒体：video audio canvas

  • 相对于H4

    1. 进步，抛弃了一些不合理不常用的标记和属性
    2. 新增了一些标记和属性，比如表单
    3. 从代码角度而言，H5的网页结构代码更简洁

  • 表单中新增属性

    1. autofocus 自动获取光标
    2. autocomplete="on" 自动完成 on：打开， off：关闭，前提是提交过而且有name属性才会生效
    3. type="tel" 并不会对内容进行手机号让验证，只是可以在移动端调起数字键盘
    4. required 必须输入，如果没有输入则会阻止当前数据提交
    5. pattern="" 正则表达式的验证
    6. multiple 可以选择多个文件；可以输入多个邮箱地址，用,分隔

  • 表单新增事件

    1
    2
    3
    4
    5
    6
    7
    8
    //oninput 监听当前指定元素的改变，只要内容改变就会触发事件
    document.getElementById('').oninput = function(){}

    //oninvalid 当验证不通过时触发事件
    document.getElementById('').oninvalid = function(){
        //设置默认提示内容
        this.setCustomValidity();
    }

  • <progress> 进度条

    1
    2
    3
    <!-- max: 最大值, value: 当前进度值 -->
    <progress></progress>
    <progress max="100" value="60"></progress>

  • <meter> 度量器：衡量当前进度之

    1
    2
    3
    <!-- high: 规定较高值, low: 规定较低值， max：最大值，min：最小值 -->
    <meter></meter>
    <meter max="100" min="0" high="80" low="50" value="40"></progress>

  • <audio> 音频

    1
    2
    3
    4
    5
    6
    <!-- 
        controls: 控制面板
        autoplay：自动播放(新版本浏览器已禁止自动播放); 
        loop：循环
    -->
    <audio src="" controls autoplay></audio>

  • <video> 视频

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!--
        controls: 控制面板
        autoplay：自动播放(新版本浏览器已禁止自动播放); 
        loop：循环；
        width：宽度；
        height：高度；
        poster：视频未播放前默认显示的封面
                默认显示视频第一帧
        注意：设置宽高时，一般情况下只设置宽度或高度，使其可以等比例缩放
    -->
    <video src="" controls autoplay></video>

    <!-- source 不同浏览器支持的视频格式不同，考虑到浏览器是否支可以准备多个格式的视频文件，让浏览器选择 -->
    <video controls>
        <source>
        <source>
        <source>
        ···
    </video>

  • 获取dom元素

    1
    2
    //querySelector 获取到的是数组，返回满足条件的第一个
    document.querySelector('选择器名称');

  • 操作元素类样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //add 为元素添加指定名称的样式，一次只能添加一个样式
    document.querySelector('').classList.add('');

    //remove 为元素删除指定名称的样式，一次只能添加一个样式
    document.querySelector('').classList.remove('');

    //toggle 切换元素样式，没有就添加有则删除
    document.querySelector('').classList.toggle('');

    //contains 判断元素是否包含指定样式名称，返回true或dfalse
    document.querySelector('').classList.contains('');

    //获取样式
    document.querySelector().classList.item(0)

  • 自定义属性及取值

    1
    2
    3
    //<p data-name="名字"></p>
    var p = document.querySelector('p');
    var value = p.dataset["name"];

  • 网络监听接口

    1
    2
    3
    4
    5
    //ononline：网络连通时触发事件
    window.addEventListener('online', function(){});

    //onoffline：网络断开时触发事件
    window.addEventListener('offline', function(){});

  • 全屏接口

    1. requestFullScreen() 开启全屏显示
      不同浏览器需要添加不同的前缀(早期版本浏览器需要加前缀)
      chrome:webkit firefox:moz ie:ms opera:o

    2. cancelFullScreen() 退出全屏显示，只能使用 document 来实现
      不同浏览器需要添加不同的前缀
      chrome:webkit firefox:moz ie:ms opera:o

    3. exitFullscreen 也是退出全屏，且不用添加前缀

    4. fullScreenElement() 判断是否全屏

  • fileReader 读取文件内容

    1. readAsText() 读取文本文件（可以使用text打开的文件），返回文本字符串，默认编码时utf-8
    2. readAsBinaryString() 读取任意类型文件。返回二进制字符串.这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，在将数据存储
    3. readAsDataURL() 读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL。
      DataURL是一种将文件（这个文件一般就是指图像或者能够嵌入待文档的文件格式）嵌入到文档的方案。
      DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储再url中。优化网站的加载速度和执行效率。
    4. abort() 中断读取
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      function getFileContent(){
          //1.创建文件读取对象
          var reader = new FileReader();
          //2.读取文件，获取DataURL
          //2.1.readAsDataURL没有任何返回值：coid，但是读取完文件以后，他会将读取的结果存储在文件读取对象的result中
          //2.2.需要传递一个参数 binary large object：文件（图片或者其他可以嵌入到文档的类型）
          //2.3.文件存储在file表单元素的files属性中，他是一个数组
          var file = document.querySelector('').files[0];
          reader.readAsDataURL(file);
          //获取数据
          /* fileReader提供一个完整的事件模型，用来捕获读取文件时的状态
           * onabort：读取文件中断时触发
           * onerror：读取错误时触发
           * onload：文件读取成功完成时触发 
           * onloadend：读取完成时触发，无论成功还是失败
           * onloadstart：开始读取时触发
           * onprogress：读取文件过程中持续触发 */
          reader.onload = function(){
              //console.log(reder.result)
              document.querySelector('').src = reader.result;
          }
      }

  • 拖拽接口
    h5中，如果想拖拽元素，就必须为元素添加属性 draggable="true"，图片和超链接默认就可以拖拽

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="div1">
        <p id="pe" draggable="true">拖拽的div</p>
    </div>
    <div class="div2"></div>
    <script>
        /* 应用于被拖拽元素的事件 
        * ondrag       整个拖拽过程都会调用
        * ondragstart  当拖拽开始时调用
        * ondragleave  当鼠标离开拖拽元素时调用
        * ondragend    当拖拽结束时调用 */

        /* 应用于目标元素的事件
        * ondragenter  当拖拽元素进入时调用
        * ondragover   当停留在目标元素上时调用
        * ondrop       当在目标元素上松开鼠标时调用，浏览器会默认阻止此事件，
                       如果想触发此事件，及必须在ondragover事件中阻止浏览器的默认行为 evevt.preventDefault()
        * ondragleave  当鼠标离开目标元素时调用 */
    </script>

  • 地理定位接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    function getLocation(){
        if(navigator.geolocation){ //判断是否支持
            /* 参数
             * success：获取地理位置成功之后的回调
             * error：  获取地理位置失败之后的回调
             * option： 调整获取当前位置信息的方式
                        enableHighAccuracy: true/false; 是否使用高精度
                        timeout:     设置超时时间，单位毫秒
                        maximumAge:  可以设置浏览器重新获取地理位置的时间间隔，单位毫秒
            */
            navigator.geolocation.getCurrentPosition(success, error, {});
        }else{
            console.log('浏览器不能定位')
        }
    }

    //成功之后的回调，如果获取地理位置成功，会将获取到的地理信息传给成功之后的回调
    //position.coords.latitude  纬度
    //position.coords.longitude 经度
    //position.coords.accuracy  精度
    //position.coords.altitude  海拔
    function success(position){}

    //获取位置失败
    function error(error){
        switch(error.code){
            case error.PERMISSION_DENIED:    //没有授权
                break;
            case error.PODITION_UNAVAILABLE: //位置不可用
                break;
            case error.TIMEOUT:              //超时
                break;
            case error.UNKNOWN_ERROR:        //未知错误
                break;
        }
    }

  • web存储

    1. sessionStorage：存储数据到本地。存储的容量5mb左右
      *这个数据本质是存在当前页面的内存中，而不是浏览器中
      *他的生命周期为关闭当前页面，关闭页面，数据会自动清除
      setItem(key, value)：存储数据，以键值对的方式存储（window.sessionStorage.setItem(key, value)）
      getItem(key)：湖区数据，通过指定名称的key获取对应的value
      removeItem(key)：删除数据，通过指定名称key删除对应的值
      clear()：清空所有出处的内容

    2. localStorage：存储容量大概20mb
      *在同意浏览器的不同窗口中可以共享数据
      *存储的数据永久生效，他是存储在硬盘上的，不会随着页面或者浏览器的关闭而清除，如果想清除，必须手动清除
      用法与sessionStorage的用法一样（window.localStorage.setItem(key, value)）

  • 应用缓存

    1. 概念：使用HTML5，通过创建 cache manifest 文件，可以轻松的创建web应用的离线版本
    2. 优势：
      · 可配置需要缓存的资源
      · 网络无连接应用仍可用
      · 本地读取缓存资源，提升访问速度，增强用户体验
      · 减少请求，缓解服务器负担
    3. Cache Manifest 基础：
      · 如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性： 
      1
      2
      <!DOCTYPE html>
      <html lang="en" manifest="demo.appchche"></html>
      · 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
      · manifest 文件的扩展名建议是“.appcache”。
      · 注意 manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在web服务器上配置
    4. Manifest文件：
      · 概念：manifest文件是简单的文本文件，他告知浏览器被缓存的内容（以及不被缓存的内容）
      · manifest文件可分为三个部分：
      1.CACHE MANIFEST - 开始
      2.CACHE 在此标题下列出的文件将在首次下载后进行缓存
      3.NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
      4.FALLBACK- 在此标题下列出的文件规定当前页面无法访问时的回退页面（比如404页面） 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      CACHE MANIFEST
      # 上面一句代码必须是当前文档的第一句

      # 需要缓存的文件清单列表
      CACHE:
      # 下面就是需要缓存的清单列表
      ../img/**.jpg
      # *:代表所有文件

      # 配置每一次都需要重新从服务器获取的文件清单列表
      NETWORK:
      ../img/**.jpg

      # 配置如果文件无法获取则使用指定的文件进行代替
      FALLBACK:
      ../img/**.jpg ../img/**.jpg
      # /:代表所有文件
      · CACHE MANIFEST说明：