关于HTML5

最新推荐文章于 2024-11-08 14:35:14 发布

aweo960421621

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/javascript9527/p/11452344.html

版权

1. html5语义化兼容性问题

如 header footer nav 

<header>我是header标签， 我应该独占一整行</header>

解决方式: 在浏览器解析标签之前, 动态创建一下 header 标签, 浏览器就认识了
　　　　 document.createElement("header");
　　　　　　　 默认行内, 需要转成块级

header {
  /* header 标签应该独占一整行 */
  display: block;
}

但是 html5 新增了很多语义化标签, 一个个创建太麻烦了, html5shiv 插件很好的解决这个问题

1.1. html5shiv解决兼容性问题

　　　　在head中引入 html5shiv 插件包即可解决 IE 8 不识别 html5 语义化标签的问题　　

　　　　<script src="html5shiv.js"></script>

但是在支持html5语义化标签的浏览器中, 这个js的执行就没有必要, 消耗了性能

所以我们可以通过 CSS IE条件注释做兼容性处理

2. html5 新增类名操作（classList）

四个操作样式类的方法, 很简单, 需要熟记
1. 添加类: dom.classList.add   
2. 移除类: dom.classList.remove 3. 判断类: dom.classList.contains 4. 切换类: dom.classList.toggle (如果有这个类就移除，如果没有这个类就追加)

3. html5 自定义属性操作

将来在工作中, 有一种很常见的做法, 就是将数据绑定在标签自定义属性中, 我们之前都需要通过 getAttribute 或者 setAttribute 一个一个获取, 当数据很多时, 就很麻烦

html5 提供了一种更简单存取数据的方式 dataset

// 用法:
1. 存的 时候, 在属性名前面加上 data-, 
   <div class="pp" data-uage="18" data-uname="鹏鹏" data-sex="男"></div> 2. 取的时候, 通过 dataset.属性名取, 例如: box.dataset.uage 或者 box.dataset["uage"] 3. 修改添加, 直接通过对象属性操作方式操作即可 例如: box.dataset.uage=12

4. 网络状态 navigator.onLine

在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网。

navigator.onLine返回用户当前的网络状况，是一个布尔值
1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false
2. 否则就是在线状态，返回true
注意：返回true不一定就是说一定能访问互联网，因为有可能连接的是局域网。但是返回false则表示一定没连上网。

4.2. 监听网络变化

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

//网络连接时会被调用
window.addEventListener("online", function () { alert("online"); }); //网络断开时会被调用 window.addEventListener("offline", function () { alert("offline"); });

5. 地理位置

通过 navigator.geolocation.getCurrentPosition 可以尝试获取用户位置

  // html5 里面新增了 地理位置的 api, 可以获取用户位置, 提供位置服务

  // 通过 navigator.geolocation.getCurrentPosition 可以尝试获取用户位置
  // navigator.geolocation.getCurrentPosition( success, error )
  // 参数1. 成功的回调函数, 成功会调用成功的回调函数, 可以得到一个 location 对象
  // 参数2. 失败的回调函数, 失败会调用失败的回调函数, 可以得到一个 error 对象


  // chrome 和 火狐为了安全, 做了限制, 必须网站是 https 安全协议才允许获取位置
  // 我们调试, 在 ie 下调试 (不影响将来工作)

  // 获取的 google 地图的坐标
  navigator.geolocation.getCurrentPosition(function( location ) {
    console.log("获取地理位置成功");
    console.log( location );

    var longitude = location.coords.longitude; // 经度
    var latitude = location.coords.latitude; // 纬度
    var accuracy = location.coords.accuracy; // 精确度   精确度越小, 准确度越高
    var altitude = location.coords.altitude; // 海拔

    console.log( longitude )
    console.log( latitude )
    console.log( accuracy )
    console.log( altitude )

  }, function( error ) {
    console.log("获取地理位置失败")
    console.log( error )
  });