深入解读 HTML5

HTML5是HTML第五代语法标准，发布于2014年10月28日。虽然早已经不是什么新东西，但是平时真正用到项目中的 HTML5 特性并不是很多（可能是因为我做的产品大多数是PC端的，需要兼容IE低版本浏览器），所以今天抽空来重新熟悉一下 HTML5 到底为我们提供了哪些不一样的东西。

1、新标签

大家都知道 HTML5 摒弃旧版本的一些如：<center> <font> <frame> 等这类没有意义又容易出现问题的标签，保留却重定义一些标签，同时新增了一些如 <header> <footer> <nav> <article> 等这类语义化标签。

使用语义化标签的目的，是为了使网页结构更加清晰，方便阅读，同时也方便搜索引擎根据标签的语义确定上下文和权重。

HTML5 新增的标签大致如下：

1.1 删除了哪些标签

纯表现的元素

besefont、 big、center、 font、s、strike、tt、u

对可用性产生负面影响的元素

frame、frameset、noframes

产生混肴的元素

acronym、 applet、 isindex、dir

1.2 重定义了哪些标签

显示不变，只是表达的含义进行了重新定义的标签

1.3 新增了哪些标签

1.3.1 结构标签（块状元素）——有意义的div

1.3.2 多媒体标签

标签的意义：多媒体标签的出现意味着多媒体的发展以及支持不适用插件的情况下即可操作媒体文件，极大提升了用户体验。

关于多媒体标签的应用，笔者会另外发布相关文章，在此不过多展开。

1.3.3 Web应用标签

状态标签

列表标签

Menu

1.3.4 其他标签

注释标签

其他标签

1.5 语义化标签兼容性

对于不支持HTML5语法的浏览器（如：IE8及以下版本浏览器），要想使用这些新标签，需要那个通过JavaScript创建该标签。具体做法如下（以<header>标签为例）：

1. 在CSS中设置标签样式为块级

   1
   header { display: block; }
   

2. 通过JavaScript的DOM方式创建该标签

   1
   document.createElement('header');
   

由于HTML5新增的标签很多， 如果用上述方法创建标签也比较麻烦，所以我们可以通过简单引用html5shiv.js文件解决这个问题。

2、新功能

2.1 表单元素

自带格式验证

1
2
3
4
5
<form autocomplete="on" novalidate></form>
<!--
autocomplete: on表示开启智能提示；off表示关闭智能提示
novalidate: 关闭智能验证
-->

1
2
3
4
5
6
7
8
9
10
11
<form action="" method="get" id="fm">
  <input type="text" value="" autofocus placeholder="请输入名字" required>
  <input type="submit" value="提交">
</form>
<input type="text" name="name" form="fm">
<!--
autofocus: 自动获取焦点
placeholder: 文本框提示信息
required: 该属性出现，当前的表单元素必须有验证
form: 该属性出现在表单标签中，值设置为form标签的ID值，该标签可以提交
-->

1
2
3
4
5
6
7
<input type="text" value="" list="url_list">
<datalist id="url_list">
    <option value="https://www.baidu.com">百度</option>
    <option value="https://www.google.com">谷歌</option>
    <option value="https://www.youku.com">优酷</option>
    <option value="https://www.qq.com">腾讯</option>
</datalist>

2.2 DOM扩展

2.2.1 获取元素

原来我们获取元素的方法是：

1
2
3
4
5
6
// 通过id获取元素
document.getElementById("id");
// 通过class获取元素
document.getElementsByClassName("class");
// 通过标签名获取元素
document.getElementByTagName("target");

或者使用 jQuery 的 $("选择器")。

HTML5为我们带来了新方法：

1
2
3
4
// 获取第一个与选择器匹配的元素
document.querySelector("选择器");
// 获取所有与选择器匹配的元素，返回一个数组
document.querySelectorAll("选择器");

2.2.2 自定义属性

1
<div id="dv" data-name="名字" data-age="20" data-user-sex="男"></div>

HTML5通过 “data-属性名” 的方式创建自定义属性。

JavaScript 通过dataset对象获取自定义属性。

注：获取dataset中的属性名需要改成驼峰式命名，如 user-sex 改为 userSex

1
2
3
4
5
var dv = document.getElementById('dv')
var dt = dv.dataset;
var str = ''
str = dt.name + ',' + dt.age + ',' + dt.userSex;
dv.innerText = str;

2.2.3 类名操作

添加类

1
selector.classList.add("类名")

删除类

1
2
selector.classList.remove("类名");
// 如果不写类名的话，删除的是选中节点的所有类

切换类

selector.classList.toggle("类名");

包含类

1
2
selector.classList.contains("类名");
// 返回值是true或false

2.3 读取文件

通过 FileReader 接口读取文件内容。

1
2
<input type="file" id="f1">
<input type="submit" id="btn1" value="上传">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var f1 = document.querySelector('#f1');
var btn1 = document.querySelector('#btn1');
btn1.onclick = function(){
    // 获取上传文件
    var fl1 = f1.files[0];
    // 读取文件，创建读取文件的对象
    var fReader = new FileReader();
    // 读取文件
    fReader.readAsText(fl1);
    // 开始读取文件的加载事件
    fReader.onload = function() {
        var style= document.createElement('style');
        var result = fReader.result;
        style.innerHTML = result;
        document.querySelector('head').appendChild(style)
    }
}

新建 style.txt 文件，编辑内容：

1
2
3
4
5
6
7
8
#btn1{
    width: 70px;
    height: 30px;
    border: none;
    background-color: green;
    font-size: 14px;
    color: #fff;
}

运行程序，上传 style.txt 文件，查看样式变化。

2.4 网络状态检测

2.4.1 navigator.onLine

1
2
3
4
5
6
7
var state = window.navigator.onLine;
// 返回布尔值，网络联通为true，反之为false
if(state){
    alert('在线')
}else{
    alert('离线')
}

主流浏览器都支持。

2.4.2 document.ononline

1
2
3
4
5
6
window.ononline=function(){
    alert('连接上了')
}
window.onoffline=function(){
    alert('断网了')
}

浏览器支持情况：

2.5 获取地理定位(不推荐)

1
2
3
4
5
window.navigator.geolocation.getCurrentPosition(function(position){
    console.log(position)
},function(msg){
    console.log(msg) //获取失败返回相应信息
})

如果成功，则获取当前地理位置的经纬度。

1
2
position.coords.latitude  // 经度
position.coords.longitude // 纬度

注：若浏览器提示“获取您的位置”，请点击允许； 如果仍然报错”Network location provider at ‘https://www.googleapis.com/’ : No response received.”，请 科学上网。

2.6 存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，回经常性在本地存储大量的数据，传统方式我们以 document.cookie 来进行存储，但是由于其存储大小只有4K左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5 规范则提出解决方案，使用 sessionStorage 和 localStorage 存储数据。

HTML5存储的特性：

1、设置，读取方法
2、容量较大
3、能存储字符串

sessionStorage:

1、关闭浏览器窗口生命周期结束
2、在同一个窗口下数据可以共享
3、容量约5M

localStorage:

1、永久有效，除非手动删除
2、可以多窗口共享
3、容量约20M

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 设置session：属性名字，值
window.sessionStorage.setItem("name", "张三"); 
// 获取session的值
window.sessionStorage.getItem("name"); 
// 删除session
window.sessionStorage.removeItem("name");
// 清空session
window.sessionStorage.clear();

// 设置localStorage：属性名字，值
window.localStorage.setItem("name", "张三"); 
// 获取localStorage的值
window.localStorage.getItem("name"); 
// 删除localStorage
window.localStorage.removeItem("name");
// 清空localStorage
window.localStorage.clear();

2.7 其他

关于多媒体和canvas的应用，会在新文章中单独讲解，敬请期待……

• Next
  [译] URI和URL有什么区别？