html5学习开发指南

本文发表于CSDN《程序员》杂志2016年8月期，未经允许不得转载！

概述：

随着移动互联网的兴起，前端开发工程师的岗位也随着兴起。前端工程师不仅在用户和产品之间扮演着越来越重要的角色，而且前端的职能也能够（开始）朝着服务端延伸。所以不仅小公司缺人在招前端，大公司同样面临着缺少优秀前端工程师的尴尬处境。

当我们在谈论或者招聘前端工程师的时候，都会提到熟练或者是熟悉 h5（html5） 开发。那么所谓的 h5 开发是什么呢？这篇文章主要就是为大家介绍 h5 的基本内容和学习指南。

1.html5是新技术么？

从2006年 html5 标准被提出到2014年10月29号，html5规范制定完成并且发布，这中间经历了8年时间。从被提出到最终规范定稿，html5 包含的很多新特性，同步的在被同时期的现代浏览器（Chrome,Firefox等）所实现。所以 html5 对于很多开发者来说，已经不能算是一项新技术了。在 html5 发展的过程中，移动互联网的兴起，html5标准委员会 为了满足在移动设备上实现复杂多媒体功能，设计了一些新特性来支持移动互联网的发展。

严格意义上来说，我们现在口中的 h5开发 并不仅仅指的是 html5 这一项技术，而是包含了html5 ,css3，javascript。所以在我们励志成为一名优秀的前端工程师的时候，应该多关注这三方面的技术。

2.html5 相对于 html4.x 有那些改变？

1. html5首先通过新的  声明方式，告诉浏览器对所要解析的html文档的文档类型。来规范浏览器的解析行为。该声明方式比 html4.x 声明更加简洁和灵活；

2. html5新增加的标签丰富了网页结构，有利于搜索引擎的抓取；

3. html5使得页面元素在浏览器上的表现更加的丰富，比如绘图（canvas），媒体播放（audio，video）；

4. html5新增的事件类型，可以让开发者监测用户更多的行为，使用户在操作网页时，网页有更加丰富的表现；

5. html5可以使开发者的网页兼容更多的设备（可以使我们的网页在不同的移动端设备上基本表现一致）；

6. html5可以让开发者在客户端存储更多的数据；

3.html5新增了哪些知识点和作用

1. 章节语意标签，比如：

    

    等，可以使我们创建更友好的页面结构，便于搜索引擎抓取；

2. 表单元素，属性，比如：number email autocomplete等，可以让我们规定表单元素的输入类型，长度，表单元素的行为；

3. 多媒体标签，比如：  。可以让我们定义多媒体文件的类型和行为；

4. 2D绘图，矢量图应用，  标签可以让我们在网页上绘制复杂的图形和显示复杂的图形；

5. 拖拽事件，drag drop 事件可以让我们在网页上对元素进行拖放操作；

6. 离线数据的存储，localStorage sessionStorage可以让开发者根据用户行为在客户端缓存数据，提高网站性能和用户体验；

7. 获取当前用于的地理位置，geolocation 可以让我们不依赖客户端就可以获取用户位置；

8. Application Cache 可以让我们对Web应用进行缓存，离线时也可以访问，增加用户体验；

9. web worker 可以让我们脱离JavaScript是单线程的这个魔咒，而且web worker独立于其它的脚本不会影响页面性能；

10. 被动的获取服务端数据，EventSource 对象可以让我们的应用程序不主动发送HTTP 请求的情况下接收服务端推送的消息，并且做出响应；

4.为什么选择html5开发我们的应用

上面介绍了那么多html5新特性，那么这些新特性普及能为开发者带来哪些便利呢？

对于经常使用微信的朋友来说，在 发现 一栏里可以看到 京东购物 的标签，当我们打开后会发现它几乎跟我们使用京东客户端一样。我们会想，难道微信在自己的客户端内，单独为京东开发了展示商品的模块呢？假如说，微博的客户端也要为京东添加这样的一个入口，是不是微博的工程师也需要开发这样的模块呢？

答案是否定的，首先两家不同类型且独立的公司，先不说技术储备问题，这么复杂的页面开发起来在协调沟通和开发成本都会很大。如果某天XX活动京东要对网站首页改版，为了保持一致性微信的工程师也得同步的开发京东的新版页面。这明显违背软件设计 解耦 的思想。那么什么技术可以改变这种现状呢？

因为html5新增的特性，已经可以让开发者开发出接近原生 native 体验的页面，也有满足多终端适配的解决方案。京东只需要使用html5 来开发自己的页面，为需要提供入口的客户端提供页面的URL地址即可。不仅可以极大的减少开发成本，人力成本和沟通成本，而且也不会因为客户端版本更新迭代慢而影响产品的生效效率。事实上京东是这么做的。国内很多公司都是这么做的。

5.html5学习指南

5.1我是有经验的开发者

对于已经有html和css开发经验的人来说，我认为学习html5应该是很快的。我们应该根据自己的工作需要来选择学习哪些内容。比如：SVG 和 Canvas 已经属于Web图形学方面的内容，内容很多也比较复杂，如果平时工作中接触和使用的不多，仅仅作为了解就可以了。不必要投入太多的精力和时间。

除了以上两个知识点之外，我们就可以把html5新增的内容分成以下几点进行学习，各个击破：

• 新的标签,属性和表单元素

• 新的事件类型

• 多媒体播放

• web存储和应用缓存

• 用户地理位置信息获取

• 多终端设备的适配

5.2我是刚入门的选手

对于刚入门的选手，就不要刻意的区分html5和html了。现在随便买一本html书（最近3年出版的书ಥ_ಥ），其中都会包含html5的内容。你的关注点应该是把自己对html包含的内容整体的把握起来。并且多写一些demo来练习,知道这些标签在网页上的表现和具有的特性。

6.开发使用建议

前端开发就是跟浏览器打交道。所以我们在工作中应该关注自己的产品必须兼容浏览器的版本。当我们在使用html5一些新特性的时候，可以在 caniuse 上查询是否满足自己的兼容标准，对这些新特性有选择的使用。

说了这么多html5开发的优点，也应该了解一些html5页面的缺点：

• 对pc端一些旧版本浏览器兼容性不好；

• 页面动画性能没有原生的 native 高，复杂动画或者是低配置的终端会特别明显；

• 没办法直接调通系统的API;

注：移动端浏览器几乎兼容所有的html5新特性。

---