IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)-源文件是什么

从今日起,每天和大家分享一篇不同职位工程师应该掌握的技能,大家有什么感兴趣的职位可以通过留言告诉我,我整理好会优先发出来~

上一篇文章:JAVA工程师技能图谱


IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)

H5是什么?

首先,HTML5 并不是一项技术,而是一个标准。 (这是重点,敲黑板)

IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)

细心的粉丝已经看出来了,以前文章的题目都是xxx工程师技能图谱,这次是HTML5技能图谱,去掉了工程师

那么这个标准牵扯到什么?

1. 页面素材预加载技术,可以使用 createJS 之中的 preloadJS。我没有看 preloadJS 的源码,不过预加载并不是 HTML5 标准中更新的方法。

2. 音乐加载播放技术,createJS 中同样有 soundJS 可以实现,而且这部分说起来确实是 HTML5 标准支持的内容,在上个时代并没有 audio 这样的标签。

IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)

3. 可以滑动的页面,大多数是用了 swiper.js 这个 Jquery 插件,也有一些是手写的 swipe,比较拙劣的手写版页面是不会跟手滑动的,其中 touchstart 等四个 touch 系列的事件是 HTML5 标准中的事件

4. 可以涂抹擦除,多半是 canvas 叠加层,canvas 是 HTML5 标准里面的标签,是代表了先进生产力的标签。

5. 有动态的文字和图片,常见的是使用了 css3 或者直接使用 js 动画。很多时候提到 HTML5 多半还会带上 CSS3,而 CSS 的分级又是另外的一个问题了,在不同的项目标准上,CSS 会独立定级,以后应该不会有 CSS4 这个东西,所以大家也不用担心在 H5 以后又冒出来了 C4(不过真是想用 C4 炸死那些每天把 H5 挂在嘴上的人)

6. 可以填表报名,这是最基本的表单,是有网页以来就有的东西。

7. 可以支持分享自定义的文案和图片,这个是用到了微信的 jssdk,和 HTML 标准半毛钱关系都没有。

IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)

8. 还有其他我想起来再补充的。

所以我们在谈论 H5 的时候,实际上是一个解决方案,一个看起来酷炫的移动端 onepage 网站的解决方案。而这个解决方案不仅包含了 HTML5 新增的 audio 标签,canvas,拖拽特性,本地存储,websocket 通信,同时也包括了盒模型,包括绝对定位,包括一切前端的基本知识。

”H5“本应是一个技术合集,却被意会成了一项技术,变成可以在质上而不是量上描述的概念。

IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)

H5技能路线图

IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)


(由于头条号规定,Xmind 源文件下载链接不能放在正文里,大家可以给我留言)

IT 技能图谱の HTML5技能图谱(附 Xmind 源文件)

推荐阅读