HTML (Hyper Text Markup Language)，指的是超文本标记语言；通俗一点来讲就是用来制作网页的。
前言：既然有了 html 为什么又要搞出 html5 呢？
HTML 最早被我们定义为静态网页，从字面意思多少能看出它的局限性。后来随着人民生活水平的提高与网络的普及，上网需求不再局限于“静态”。渐渐地人们把 CD 光盘时代搬到了互联网上，以 YouTube 为代表的视频网站如雨后春笋一般大量涌入网络市场。但当时 W3C 联盟并没有意识到这块肥肉亦或者是当时技术不足的原因，这就让插件时代应运而生。大家应该还记得，早些年打开浏览器看视频也好、玩个最糙最简单的游戏也罢，浏览器都会通知我们安装 Flash 插件。Adobe 公司在 2005 年以 34 亿美元的价格收购了 Macromedia 公司，理所当然 Flash 也被收于麾下，在当时或许早已赚的盆满钵满了。直到 2007 年 W3C 开始立项 HTML5，到 2014 年 10 月底才正式对外公布。随着产品的迭代升级，HTML5 能做的事情高于 HTML 不知多少个 level，Adobe 公司也有意转到对 HTML5 支持，在 2017 年 Adobe 宣布将在未来彻底放弃 Flash，终于在 2020 年停止更新和分发 Flash Player。或许你在浏览一些老的站点的时候，就能看到下面这张图。
那 HTML5 到底有哪些新特性呢？（ 往下看呗? ）
HTML 与 HTML5 的区别
文档类型声明不同
我们随便打开两个网站（ http://www.cn9z.com/ 教育网 和 https://www.baidu.com 百度），在它们的网页源代码文件第一行就能看出区别。
1、html 文档声明为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
或者
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2、html5 文档声明为：
<!DOCTYPE html>
很显然 HTML5 定义文档类型声明比 HTML4 或以前简洁了太多。
增加了语义标签
1、HTML 缺少语义标签标签，大多使用 div 包裹。
ex:
<div id="header"></div>
2、HTML5 增加了很多的语义标签。
ex: <header>、<footer>、<dialog>、<mark>、 <nav>、<progress>...
可能这时候有人就会问了，我怎么知道 html5 新增的语义或者标签元素是否支持当前浏览器的当前版本呢？很简单——查文档；另外还有一个“功能如名”的神奇网站（ https://caniuse.com/ ）可以辅助我们更方便查询。我以<progress>标签为例查询浏览器的兼容率：
3、HTML5 并不是只增不减。
HTML5 在原 HTML4 及之前删除了一些标签元素
ex：<big>、<center>、<font>、<dir>、<frame>...
HTML5 的新特性（元素）
一、语意化更好的内容元素。
上文提到的语义元素。
二、用于媒介回放的 video 和 audio 元素
HTML5 新增了 audio 和 video 元素，并且提供可操作的属性与方法，当然这些方法、属性和事件允许您使用 JavaScript 来操作元素。
以 video 为例：
属性
描述
autoplay
如果出现该属性，则视频在就绪后马上播放。
controls
如果出现该属性，则向用户显示控件，比如播放按钮。
height
设置视频播放器的高度。
loop
如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted
如果出现该属性，视频的音频输出为静音。
poster
规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src
要播放的视频的 URL。
width
设置视频播放器的宽度。
三、localStorage 与 sessionStorage
localStorage：没有时间限制的数据存储，手动删除(remveItem || clear)。
sessionStorage：针对一个 session 的数据存储，关闭浏览器或者标签页自动清空。
由于 storage 为 h5 的新特性，使用之前务必需要判断当前浏览器是否支持。
var local = window.localStorage;
或者
var local = window.sessionStorage;
if (local) {
alert("恭喜您，当前浏览器支持 Storage");
} else {
alert("当前浏览器不支持");
}
function setValue(){
var value = document.getElementById("inputLocal").value;
local.setItem('tmp', value);
}
function getValue(){
var value = local.getItem('tmp');
document.getElementById("valueLocal").value = value;
}
有兴趣的同学可以尝试在将数据保存到 localStorage 和 sessionStorage 之后，重启浏览器看 sessionStorage 下保存的数据是否还存在？
四、绘画 canvas(画布)
HTML5 标签在网页上绘制图像(通过脚本，通常是 JavaScript)。
ex:画空心文字
function drawC(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("AndyJaa",10,50);
}
五、新增 input 类型、表单控件
input 类型：email、number、tel、search、range、color、date...。
表单控件：datalist、progress、meter...
表单属性：autocomplete：on/off、placeholder、autofocus：false/true、required：false/true...
六、新的技术 webworker, websocket, geolocation
webworker:Web worker 是运行在后台的 JavaScript，不会影响页面的性能。
websocket:WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
geolocation:Geolocation（地理定位）用于定位用户的位置。
七：拖放 draggable=true
后续会针对新的特性或者技术新开文章来详细使用和讲解。
我对 HTML5 怎么看
其实在我做 android 开发的时候，就经常会有同事调侃说原生 app 开发要凉，因为 h5 带着很多的高级 api 出现了，而且原来 html 做不到的事情，现在都可以做了...就目前来看原生 app 依然坚挺着，只不过现在需要的更多是高级研发。话说回来，H5 的出现的确对原生 app 的冲击力很大，作为开发者就当前的一些感受简单聊聊：
1、跨平台。
这对于开发者来讲应该说是首当其冲的利好。就一个手机 App 而言，如果想要绑定更多的用户，就目前来看最起码要开发两套相同业务逻辑的系统（Android 和 IOS)，但是 H5 做到了。这对公司来讲意味着减少了一人成本。真正做到一处开发，到处使用。
2、丰富的 Api。
HTML5 的设计目的是为了在移动设备上支持多媒体。H5 出现之前，原生开发异常火爆。因为原生 app 给人们带来的使用畅快感与便捷不言而喻。基于操作系统便利，单纯的 html 根本给不到人们想要的东西。可随着 H5 的正式发布与功能的日益完善，html 的弱势逐渐消减，其优势自然慢慢凸显。
3、无感更新。
App 一旦上线，就意味着你开发的功能完全暴露在使用者的视线之内。线上 Bug 在所难免，对于原生开发人员来讲修复完成之后需要重新上线，然而由于市场审核需要时间尤其对于 IOS 系统下的 App 升级更不友好，审核时间甚至一两周。这么久的修复时间足以流失大量用户，虽然后面也出现了“热修复”的技术，但总归还是有兼容性和迭代缺陷的；而 H5 却能绕过审核，做到实时更新。
4、大前端趋势。
市面上主流的前端 js 框架，像 augularjs、vuejs 等，都还是建立在 HTML，CSS，JavaScript 的基础之上，通过编译之后依然还是 HTML+CSS+JavaScript 组成。所以说一旦掌握 html 的语法，学习其他前端框架就如同打通任督二脉，学什么都快。
5、移动端霸主的支持。
Android 系统内置的 Webview 由 Android WebKit 升级到 Chromium，性能大幅提升。而苹果公司也是取消了三方程序调用 Nitro 的限制，也就意味着第三方应用使用其 UIWebview 一样能享受 Nitro 的加速。所以即使前端使用 JS 做复杂的运算也可以毫无压力。这就使得 H5 在移动端的发展不再受限。
6、JSBridge 可做最终的支撑。
上面虽然说了那么多 H5 的优点，但也并不意味着它能完全取代原生 App。因为如果 H5 想要基于操作系统做功能开发，还必须得得到原生协议。所以 JsBridge 模式就很好的解决了这一问题。原生开发定义好 JS 调用协议，前端开发人员只需在适当位置调用即可轻松获取系统提供功能 Api。
期待
个人的态度作为前端人员，熟练掌握 H5 的新特性是非常有必要的。因为这是做前端的基础。我相信随着 H5 作为下一代 Web 开发的标准，其功能日益迭代，必将在日后大放异彩。
发表评论 取消回复