html5学习开发指南

快来打我* 2022-09-25 02:26 168阅读 0赞

本文发表于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首先通过新的 `<!DOCTYPE>` 声明方式，告诉浏览器对所要解析的html文档的文档类型。来规范浏览器的解析行为。该声明方式比 html4.x 声明更加简洁和灵活；
2.  html5新增加的标签丰富了网页结构，有利于搜索引擎的抓取；
3.  html5使得页面元素在浏览器上的表现更加的丰富，比如绘图（canvas），媒体播放（audio，video）；
4.  html5新增的事件类型，可以让开发者监测用户更多的行为，使用户在操作网页时，网页有更加丰富的表现；
5.  html5可以使开发者的网页兼容更多的设备（可以使我们的网页在不同的移动端设备上基本表现一致）；
6.  html5可以让开发者在客户端存储更多的数据；

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

1.  章节语意标签，比如：`<footer>` `<article>` 等，可以使我们创建更友好的页面结构，便于搜索引擎抓取；
2.  表单元素，属性，比如：`number` `email` `autocomplete`等，可以让我们规定表单元素的输入类型，长度，表单元素的行为；
3.  多媒体标签，比如： `<video>` `<audio>`。可以让我们定义多媒体文件的类型和行为；
4.  2D绘图，矢量图应用，`<canvas>` `<svg>` 标签可以让我们在网页上绘制复杂的图形和显示复杂的图形；
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新特性。

--------------------

[![698e22a9jw1f5wotsif5fj21k4068dij.jpg_objectId_1190000006194787_token_8668ee43cecef1b556c29f8fb55ae62d][]][698e22a9jw1f5wotsif5fj21k4068dij.jpg_objectId_1190000006194787_token_8668ee43cecef1b556c29f8fb55ae62d 1]

[698e22a9jw1f5wotsif5fj21k4068dij.jpg_objectId_1190000006194787_token_8668ee43cecef1b556c29f8fb55ae62d]: https://segmentfault.com/image?src=http://ww3.sinaimg.cn/large/698e22a9jw1f5wotsif5fj21k4068dij.jpg&objectId=1190000006194787&token=8668ee43cecef1b556c29f8fb55ae62d
[698e22a9jw1f5wotsif5fj21k4068dij.jpg_objectId_1190000006194787_token_8668ee43cecef1b556c29f8fb55ae62d 1]: https://github.com/zhiqiang21/blog/blob/master/README.md