HTML5

发表于 | 分类于
字数统计 1,247 | 阅读时长 5

ＨTML５

Ｈ５新元素

  • HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。

  • 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合 。

  • 优点：http://www.intertid.com/school/2014/595568.shtml

    语法规则

  • 去除了许多冗余的内容，书写规则更加简洁、清晰。

语义标签

  • HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
    • 统的做法我们或许通过增加类名如class=”header”、class=”footer”，使HTML页面具有语义性，但是不具有通用性。
    • HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

新增只能表单元素

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。

  • email url search(搜索框，更具语义化) range（自由拖动滑块） date（日期）
  • 表单属性
    • placeholder 占位符
    • autofocus 自动获得焦点
    • required 必须填入内容
    • pattern 自定义验证
  • 部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中应选择性的使用

多媒体

  • HTML5通过<audio>标签来解决音频播放的问题。

    • autoplay 自动播放
    • controls 是否显不默认播放控件
    • loop 循环播放
    • preload 预加载 同时设置autoplay时此属性失效

  • 多浏览器支持的方案：通过soutce标签指定多格式音频文件

  • HTML5通过<video>标签来解决音频播放的问题。

    • autoplay 自动播放
    • controls 是否显示默认播放控件
    • loop 循环播放
    • preload 预加载，同时设置了
    • autoplay，此属性将失效
    • width 设置播放窗口宽度
    • height 设置播放窗口的高度

  • 多浏览器支持的方案：通过soutce标签指定多格式音频文件

dom扩展

  • 获取元素
    • document.querySelector(‘div’)
    • document.querySelectorAll(‘selector’)
  • 类名操作
    • 1、Node.classList.add(‘class’) 添加class
    • 2、Node.classList.remove(‘class’) 移除class
    • 3、Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
    • 4、Node.classList.contains(‘class’) 检测是否存在class
    • Node指一个有效的DOM节点，是一个统称。
  • 自定义属性
    • 在HTML5中我们可以自定义属性，其格式如下data-*=””，例如
      data-info=”我是自定义属性”，通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。
    • Node.dataset是以类对象形式存在的

网络状态

  • 网络状态：navigator.online;返回一个boolean类型

    • 用来检测用户是否联网，不仅仅指的是链接外网，连接了局域网也算，甚至本机和虚拟机的网卡链接起来，也算是一个网络连接状态
    • 注意：返回true不一定就是说一定能访问互联网，因为有可能连接的是局域网。但是返回false则表示一定连不上网。

  • 监听网络状态

    • 为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。

      //网络连接时会被调用

      1
      2
      3
      4
      5
      6
      7
       window.addEventListener("online", function () { 
      alert("online"); 
      }); 
      //网络断开时会被调用
      window.addEventListener("offline", function () {
       alert("offline");
       });

地理位置

  • 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service)

    • HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。

      javascript 

      1
      2
      3
      4
      //successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息 
      //获取失败了会调用，并返回error对象，里面包含了错误信息。 
      //获取当前的地理位置信息 navigator.geolocation.getCurrentPosition(successCallback, errorCallback) 
      //重复的获取当前的地理位置信息 navigator.geolocation.watchPosition(successCallback, errorCallback)

    • 实例


-------------本文结束感谢您的阅读-------------