整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
亿互联网用户需求，促使300万WEB前端人才缺口。HTML5的蔓延让不少开发商发现了机遇，HTML5开发人才也遭受疯抢，但传统前端人才很难驾驭移动端，因此，HTML5开发人才出现严重紧缺状态，很多企业陷入两难境地。
据统计，我国对于高级HTML5开发人员的缺口将达到12万左右。目前，北京、上海、广州、深圳等地HTML5开发人员的薪资待遇更是一高再高。想成为一名优秀的HTML5开发人员吗？那么这份学习资料值得大家收藏学习了。
一.HTML5初级开发工程师
1.HTML5介绍
互联网发展趋势
H5语言的优势
简单易学人人都能编程
H5就业和薪资情况
H5常见的项目与产品
H5的未来与方向
2.HTML基础
HTML简介与历史版本
常用开发软件
常见标签与属性
表格与表单
标签规范与标签语义化
实战：网页结构布局
3.CSS基础
css简介与基本语法
常见的各种样式属性
CSS选择器与标签类型
理解盒子模型与CSS重置
浮动与定位
利用photoshop工具测量样式
HTML+CSS开发网页
实战：高仿电商首页效果
4.CSS3基础
css3常见样式
css3选择器
变形与动画
3D效果与关键帧
弹性盒模型
5.移动端布局
移动端基本概念
viewport窗口设置
移动端布局方案
rem、vh、vw等单位
响应式布局
bootstrap框架
6.JavaScript基础
JS简介
JS变量
数据类型与类型转换
运算符与优先级
流程控制-if..else
流程控制-switch...case
流程控制-while、do..while、for循环
break、continue语法
函数定义与调用
全局变量与局部变量
函数传参与返回值
函数作用域与变量作用域
DOM的基本操作
定时器使用
this指向与修改指向
数组、字符串等方法操作
时间对象与正则对象
掌握常见BOM操作
常见事件与事件细节
JSON与AJAX
JSONP跨域操作
前端cookie的使用
实战：JS配合HTML与CSS完成电商项目
7.jquery框架
jquery框架介绍及优势介绍
jquery核心思想
jquery常见方法
jquery动画操作
jqueryAJAX操作
jquery工具方法
利用jquery快速开发网页
8.PHP基础
PHP简介与基本语法
mysql数据库及sql语法
apache服务器与集成开发工具
PHP链接数据库
PHP与AJAX交互
实战：留言板、登录、注册等
9.H5基础项目
项目简介
项目功能演示
项目划分及框架
编写HTML页面结构
设置CSS样式
添加JS交互
可选框架：bootstrap、jquery、PHP等
项目调试及兼容
项目验收
二.HTML5中高级开发工程师
1.面向对象基础
面向对象概述
对象和构造函数（类）之间的关系
对象的属性和方法
原型与原型链
包装对象与内部实现
对象中实现继承方式
设计模式及实际运用
2.JavaScript高级
JS算法与排序算法
promise异步处理
运动与tween算法
闭包与模块化
JS组件开发
打造小型jquery框架
JS性能优化
ES6新增功能
3.前端工程化
gulp基本使用
less、sass、babel等预编译框架
理解模块概念，AMD与CMD规范
前端模块框架seaJS、requireJS
webpack基本使用
4.多人协作
svn基本用法与可视化工具
多人开发流程
git基本用法
命令行操作
分区及分支等概念
远程github操作
实战：多人协作开发项目
5.HTML5新功能
canvas绘图
svg绘图
音频与视频
本地存储与离线存储
地理信息
web Worker
web Socket
6.NodeJS基础
node与npm概念及使用
node模块方式
node常用内置模块
node爬虫与文件自动化处理
node搭建服务器与简单路由
mongodb非关系数据库
mongodb安装与db操作
mongodb增删改查
mongodb与node结合开发
mongoose数据建模
mongoose与node结合开发
express框架
中间件与ejs模板引擎
Robomongo与postman工具
express+mongoose搭建后端框架
设计Restful API
实战：前后端分离式开发
7.微信端开发
移动端交互与移动端事件
微信场景与swiper框架
微信公众号介绍
网页授权与JSSDK
微信web开发者工具使用
微信小程序开发
实战：公众号与小程序项目同步开发
三.HTML5大神级开发工程师
1.VueJS框架
Vue框架简介
渐进式与响应式
模板语法与计算属性
指令与数据处理器
生命周期
组件与组件通信
Vuex状态管理
Vue动画与路由
单文件组件与脚手架
基于Vue的组件框架
实战：Vue与Node全栈开发
2.ReactJS框架
React框架简介
JSX语法
组件与组件通信
属性与状态设置
虚拟DOM
生命周期
redux架构
react-redux使用
react-router使用
Mem脚手架使用
实战：React与Node全栈开发
3.AngularJS框架
Angular框架简介
TypeScript基础与进阶
开发环境配置
架构、模块与组件
模板、元数据与数据显示
服务于指令
依赖注入
路由
实战：Angular与Node全栈开发
4.Hybrid App开发
App介绍与分类
Android/ios与H5通信
Cordova/Phonegap框架
HTML5+基于HB工具
React Native
5.前端架构
单元测试与编写测试用例
自动化测试方案
前端安全与HTTP协议
项目上线与一键部署
数据统计与SEO优化
搭建组件库与按需载入
浏览器渲染与浏览器引擎
深入理解后端开发模式
更多学习资料，戳左下角哦~
部属性和全局属性
局部属性：有些元素能规定自己的属性，这种属性称为局部属性。 比如 link 元素，它具有的局部属性有 href、 rel、 hreflang、 media、 type、 sizes 这六个。 全局属性：可以用来配置所有元素共有的行为，这种属性称为全局属性，可以用在任何一个元素身上。
1、accesskey 属性
使用 accesskey 属性可以设定一个或几个用来选择页面上的元素的快捷键。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta > <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML全局属性测试</title></head><body> <form action=""> <p> Name: <input type="text" > </p> <p> Password: <input type="password" > </p> <p> Name: <input type="submit" > </p> </form></body></html>
在上面的例子中，三个 input 元素添加了 accesskey 属性，这样在 Mac 下就可以用 Control+Alt(Option)+ n快捷键访问到 Name 的输入框了。用来触发 accesskey 机制的按键组合因平台而异，具体如下：
| 浏览器 / 平台 | Window | Linux | Mac |
|---|---|---|---|
| Firefox | Alt + Shift + key | Alt + Shift + key | Control + Alt + key |
| Internet Explorer | Alt + key | N/A | N/A |
| Google Chrome | Alt + key | Alt + key | Control + Alt + key |
| Safari | Alt + key | N/A | Control + Alt + key |
| Opera | 同 Google Chrome | 同 Google Chrome | 同 Google Chrome |
关于 accesskey 这个全局属性的详解，可以看一下 HTML accesskey 属性与 web 自定义键盘快捷访问
2、class 属性
class 属性用来将元素归类，这个就无需多言了。
3、contenteditable 属性
contenteditable 是 HTML5 中新增加的属性，，其用途是让用户能够修改页面上的内容。
<body> <!-- contenteditable属性应用 --> <p contenteditable="true">设置为 true 是可编辑的</p></body>
如上例，p 元素的 contenteditable 属性值设置为 true 时，用户可以单击文字编辑内容。设置为 false 时禁止编辑。
4、dir 属性
dir 属性用来规定元素中文字的方向。有效值有两个：ltr(从左到右)、rtl(从右到左)。
<!-- dir属性应用 --><p dir="ltr">从左到右</p><p dir="rtl">从右到左</p>
5、draggable 属性
draggable 属性是 HTML5 支持拖放操作的方式之一，用来表示元素是否可被拖放。
6、dropzone 属性
dropzone 属性是 HTML5 支持拖放操作的方式之一，与 draggable 属性搭配使用。
7、id 属性
id 属性用来给元素分配一个唯一的标识符。这个也无需多言。需要说明的一点是，id 属性还可以用来导航到文档中的特定位置。
8、hidden 属性
hidden 是个布尔属性，表示相关元素当前不需要关注，浏览器对它的处理方式是隐藏相关元素（隐隐想起来控制一个元素的展示隐藏的时候，会自定义一个 hidden 类，然后在里面写隐藏样式），具体也可以看一下这篇介绍 HTML5 的 hidden 属性
<!-- hidden属性应用 --> <div hidden>这个元素将会被隐藏</div>
9、lang 属性
lang 属性用于说明元素内容使用的语言。lang 属性必须使用有效的 ISO 语音代码，使用这个属性的目的在于，让浏览器调整其表达元素内容的方式，比如在使用了文字朗读器的情况下正确发音。
<!-- lang属性应用 --> <p lang="en">Hello - how are you?</p>
10、spellcheck 属性
spellcheck 属性用来表明浏览器是否应该对元素的内容进行拼写检查，这个属性只有用在用户可以编辑的元素上时才有意义。 spellcheck 属性可以接受的值有两个：true 和 false。至于拼写检查的实现方式则因浏览器而异。
<!-- spellcheck属性应用 --> <textarea >This is some lalalala text</textarea>
11、style 属性
style 属性用来直接在元素身上定义 CSS 样式，这个也不做过多描述了。
12、tabindex 属性
HTML 页面的键盘焦点可以通过按 Tab 键在各元素之间切换。用 tabindex 属性可以改变默认的转移顺序。
<!-- tabindex属性应用 --> <form action=""> <label>Name: <input type="text" ></label> <label>City: <input type="text" ></label> <label>Country: <input type="text" ></label> <input type="submit" value="" tabindex="3"> </form>
上面的代码实现效果是：在按 Tab 键的过程中，tabindex 为 1 的 Country 输入框第一个被选中，接着焦点会跳到 Name 输入框，最后是 submit 提交。tabindex 设置为 - 1 的元素不会在用户按下 Tab 键后被选中。
13、title 属性
title 属性提供了元素的额外信息，浏览器通常用这些东西显示工具条提示，这个在一些展示不全的文本标题也经常使用。
<!-- title属性应用 --><a href="https://qiqihaobenben.github.io/" title="我的个人网站">qiqihaobenben.github.io</a>
前，H5页面制作工具的各种排行榜与评测文章花样百出、各执一词，却都没有明确依据。国内的大多评测与利益集团密切相关，说白了是抬高自有品牌、贬低竞品的工具，因此本文尽量通过可量化的指标，保证评测结果的可信度。
首先须明确，国内的H5页面制作工具，一般指用于HTML5页面可视化开发的在线编辑器，基本目的为生成可用于传播的HTML5网页。因此，无论不同工具在功能上有多少差异，基本面向作品的一键发布与即时投用，制作流程如下：
这与国外存在很大差别。美国也有H5页面制作工具，但多为离线软件形式、成品是打包的文件夹，功能应用上专用性也较强。比如Adobe Edge和Tumult Hype偏向网页动画、Google Web Designer偏向广告设计、Construct 2偏向游戏制作，制作流程如下：
评测以工具功能与性能为主，包括多媒体功能、高级应用、微信应用和用户友好度四个指标（各5分，总计65个参数），总分20分。评测得出排行榜单如下：
第1名iH5.cn 18星半
多媒体支持 ★★★★☆ 微信应用 ★★★★☆
高级应用 ★★★★☆ 用户友好度 ★★★★★
iH5综合性能最强，各项指标的得分均比较高，品牌展示、动画、游戏、建站均适用，主要面向企业用户。因为免费，也不少像我这样的小散户用它玩玩票。多媒体文件支持方面，是唯一同时支持图片（JPG、GIF、ZIP、PSD等）、音视频、网页等的上传，并允许用户在生成页面中重设文件属性的编辑器，拓展性高。
总的来说，它目前有超过10项高级功能的可视化是业内独有的，包括：（1）绘画（2）横幅（Banner）（3）画布（4）物理引擎（5）运动模拟与监测（6）智能语音识别（7）轴动画（8）响应设备（9）跨屏互动（10）数据库（11）变量绑定（12）数据运算等的可视化，也支持红包、支付、录音、拍照上传、获取用户个人信息等微信功能。
界面看起来有点“原生态”，但实用性和友好度很高，模板、工具说明手册、教程齐全，也提供历史记录、另存为作品等多种操作回退方案。美中不足的是，并不具备制图和图表功能。
第2名Epub360 10星
多媒体支持 ★★ 微信应用 ★★☆
高级应用 ★★☆ 用户友好度 ★★★
和搜索引擎等互联网产品的现象一致，第二名和第一名的差距比较明显。Epub 360相当于升级版的易企秀，微信应用和高级应用的支持较好，独有功能是有一个编辑SVG代码的简易入口。
总的来说，它虽然原意是面向HTML5页面的专业制作，但在复杂应用支持的设计上并不彻底。虽然能对文本、图片、音视频做简单的显示、播放与否的控制，但不支持重设文件尺寸大小、播放进度等较复杂的控制，也不具备动画、游戏制作所需的带轨时间轴、物理引擎等功能。
界面布局比较合理，遗憾的是它并不提供一对一的配置，比如不具备使用条件的事件也可能出现在对象属性里，对于用户体验是一大硬伤。
第3名 易企秀8星半
多媒体支持 ★★ 微信应用 ★☆
高级应用 ★ 用户友好度 ★★★★
易企秀很容易定义，就是移动版的PPT制作工具，面向手机上的基本演示。它各方面的功能，包括文本、按钮、图表、页面动效等参数都与微软的Powerpoint如出一辙。当然，图表的个性化设计还比不上后者。
它还是有一定H5页面制作特色的，比如基于套件的表单采集，以及微信应用上有录音和拍照上传功能。但它的功能有些还不够稳定，比如虽然声明可以嵌入音乐外链，但实际播放上存在一定问题。
国内H5页面工具的视频外链功能有个通病，大多并不是真的支持资源下载类型的外链，除iH5外只是允许嵌入优酷、腾讯、爱奇艺等网站自带播放器的播放外链。因为也算是能支持第三方视频，在这个指标上我没做太严格的限制。
并列第3搜狐快站8星半
多媒体支持 ★★ 微信应用 ★
高级应用 ★☆ 用户友好度 ★★★★
搜狐快站不是国内最好的H5页面制作工具，但算是最好的移动建站工具。它的特点在于各种现成套件的式样庞大，相当于一个个固定样式的框架，可以面向各种类型的移动建站需求。
虽然它的分类有一项是微海报，但它本质上就是面向网站建设，具备富文本、按钮、二维码在线生成这些支持一定动态拓展性的功能。此外，对于搜狐自有的其他平台（如自媒体），也能同步为移动主页。
界面设计上，因为定义的套件过于繁杂，它在显示上做了很多隐藏菜单的处理，但总体还是有点臃肿，使用功能时需要一定的遍历与寻找时间。还好网站有提供比较详尽的工具手册，能用于查考。
第5名 最酷网8星
多媒体支持 ★☆ 微信应用 ★☆
高级应用 ★ 用户友好度 ★★★★
本文只对排行前三的工具进行比较细致的说明，由于后面的平台大多同质性较强，就不作一一解释。比如排第5-8名的工具，简单地说就是易企秀去掉几个功能的产物，其中你甚至能在排行第五的最酷网里看到不少英文参数的设置。
“这是汉化功夫没做好吧？诶，为啥是汉化的？”
内在原因就不作太多剖析了，反正用了不少国外的开源框架——为什么国内这么多H5页面工具长得这么像、功能如此雷同，自有它的科学道理。
第6名 爆米兔7星
多媒体支持 ★☆ 微信应用 ☆
高级应用 ★ 用户友好度 ★★★★
并列第6场景应用7星
多媒体支持 ★☆ 微信应用 ☆
高级应用 ★ 用户友好度 ★★★★
并列第6 ME微杂志7星
多媒体支持 ★☆ 微信应用 ☆
高级应用 ★ 用户友好度 ★★★★
第9名 木疙瘩6星半
多媒体支持 ★★ 微信应用
高级应用 ★☆ 用户友好度 ★★★
靠后的榜单里还算有点特色的是Mugeda，面向HTML5的动画制作，可以做轴动画和变形动画。但它的致命伤比较明显，用户体验不是很好，主要在三个方面：
（1）界面：空间利用率低，对比其他工具是编辑台最小的一个；
（2）教程：互动教程是它的一个创新，但连个基本的工具指南都没有，只有不完全的案例教程，使用上非常不便；
（3）模板：没有任何模板或现成用例，也不具备微信应用功能。
并列第9百度H5平台6星半
多媒体支持 ★☆ 微信应用 ☆
高级应用 ☆ 用户友好度 ★★★★
百度H5平台是今年4月才推出的，本以为傍着大树好乘凉，应该也差不到哪里去，但实际上它也好不到哪里去。
虽然算是参与测评的近30个工具中最新发布的一个，在功能上唯一的创新是单页动效时长可以通过时间轴调整——但这种时间轴并不具备添加关键帧等动画制作能力，所以我也不确定是不是它后面想要放什么大招才留了这么个东西。
·
由于准入门槛较低，国内的H5页面制作工具数量巨大、质量参差不一。而且为了迎合微信H5庞大的制作需求，大多数公司急功急利，赶着包装出一个面向H5页面制作的概念抢生意，结果同质化严重、残次品频出。
评测日为2016年5月12日-19日，历时一周，数据尽量保持准确客观，各项参数也公开在下面以便各位看官拍砖。评价上可能因为个人倾向有点主观，但至于那种“怎么没有××呢”、“××这么好为什么没有提到呢”等质疑，我的回答只有一个——抱歉，不是没有测，只因分数太低没能上榜。
*请认真填写需求信息，我们会在24小时内与您取得联系。
