要理解H5,那首先要从前端的发展来剖析H5的世界。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代产物，那时网站的主要内容是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。现今，HTML5已经成为互联网的热门话题之一，然而，在移动端Web技术领域，由于历史的原因，HTML5标准才刚刚起步，但随着HTML5和CSS3逐渐兴起，其强大的特性在移动Web应用当中得到了非常好的发挥。将正式进军移动互联网人才培养领域, 加速培养更多具备综合技能的全能型移动互联网人才，服务移动互联产业发展。
web前端H5主要涉及到哪些内容呢？
Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。进入重点，做H5需要学什么？
1、H5标签
1.1、H5引进的一些新的标签，需要注意article、header、footer、aside、nav以及HTML的标题结构
1.2、理解浏览器解析HTML的过程，理解DOM的树形结构，及相应API
1.3、理解HTML标签在各个浏览器上的默认样式（代理样式），理解CSS中的重置样式表的概念
1.4、理解Canvas、SVG、video等功能性标签
1.5、理解form、iframe标签，理解文件提交过程
2、CSS知识
2.1、学习基础知识，包括大部分常用属性、选择器的用法，了解大多数标签基本概念
学习浏览器兼容性问题，知道兼容性的主要问题及解决方法
2.2、深入理解盒子模型，区分块级元素、行内元素，一些重要的属性： display、float、position，必须要会区分盒子、行内盒子的概念
还可以学一些简单的预编译语言：sass、less
2.3、学习常用框架，可以使用bootstrap构建项目
2.4、学习框架的代码组织方式
包括：12格栅系统、组件化、组件的风格化等
2.5、学习CSS 3的新功能，特别是动画效果、选择器
2.6、学习一些CSS对象化思想，学习编写简洁性、高复用性、高健壮性的CSS
2.7、可以看看扁平化设计，还有简洁性
2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念
学习方法：
多看别人的代码，优秀的设计网站
要学会使用grunt、gulp压缩CSS
display + position + float 可以组合出很复杂的效果，多练习盒子模型
尝试在不用float，且position不为absolute的情况下实现等高、等宽等布局
3、深入学习javascript
3.1、重新学习JS语法，注意：表达式、语句、类型
主要倾向于“原生”JS哦，不要使用框架
3.2、深入理解JS的“一级函数”、对象、类的概念
学会使用函数来构造类、闭包，学会用面向对象的方式组织代码
3.3、深入理解JS的作用域、作用域链、this对象
理解函数的各种调用方法（call、apply、bind等）
3.4、理解对象、数组的概念
理解对象的“[]”调用，理解对象是一种“特殊数组”
理解for语句的用法
深入理解JS中原始值、包装对象的概念（重要）
3.5、学习一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，更高级的：backbone、angularjs、ejs、jade比较多个框架的使用方法，总结常见用法，提高学习速度学习模块化开发（使用require.js、sea.js等）
3.6、适当看一些著名框架的源码，比如jQuery重要的是学习框架中代码的组织形式，即设计模式
3.7、了解JS解释、运行过程，理解JS的单线程概念
深入理解JS事件、异步、阻塞概念
3.8、理解浏览器组成部件，理解V8的概念
学习V8的解释-运行过程
在V8基础上，学会如何提高JS性能
学会使用chrome的profile进行内存泄露分析
学习方法：
提高对自己的要求
多看优秀框架的源码，特别是框架的架构模式、设计模式
多学设计模式
学习原生JS、DOM、BOM、Ajax
4、跨终端
理解混合APP的概念
理解网页在各类终端上的表现
理解网页与原生app的区同，重在约束
理解单页网站，特别要规避页面的内存泄露问题
入门nodejs，对其有个基础概念
5、工具
学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩
会用PS进行切图、保存icon
入手sublime、webstorm
学会使用chrome调试面板，特别是：console、network、profile、element
二、进阶：
1、性能
1.1、理解资源加载的过程
包括：TCP握手连接、HTTP请求报文、HTTP回复报文
1.2、理解资源加载的性能约束，包括：TCP连接限制、TCP慢启动
1.3、理解CSS文件、JS文件压缩，理解不同文件放在页面不同位置后对性能的影响
1.4、理解CDN加速
1.5、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响
1.6、深入理解浏览器的render过程
2、http及TCP协议族
2.1、学习http协议，理解http请求-响应模式
2.2、理解http是应用层协议，它是构建在TCP/IP协议上的
2.3、理解http报文（请求-响应报文）
2.4、理解http代理、缓存、网关等概念，指定如何控制缓存
2.5、理解http协议内容，包括：状态码、http头、长连接（http1.1）
2.6、学习http服务器的工作模型，对静态文件、CGI、DHTML的处理流程有个大致概念
3、安全性
XSS、SQL注入
好等小伙伴们这个就是一整套的h5前端工程师需要掌握的内容，不知道大家有没有一些了解呢？上面说了这么多，也就是让大家培养Web UI(网站设计)设计能力，网页编写和网页动态效果能力，基本编程的能力，企业需要既懂网页设计，又具有编程能力的技术人员，只要能具备以上3个方面，就已经基本满足了企业对于H5前端工程师的招聘需求。
代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。 而前端开发的性能优化法恭瘁枷诓磺搭委但莲往往是后台的专属，但是作为前端开发的性能是极其的重要的。一个优秀的前端开发工程师写出来的代码能够让服务器压力小，承载能力翻倍，请求次数更少，合理的布局等等，这是一个普通的前端开发人员所做不到的。说了这么多，希望对前端小白的你有所帮助。
热点新闻
前端开发技术库
