关于HTML5

Posted 2022-09-27 javascript9527

1. html5语义化兼容性问题

　　　　如  header footer nav <!-- 现象: IE8 以下版本不支持 html5 语义化标签 -->

<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. 地理位置