什么是前端开发？

我们不妨拿一个网站来拆解看看。一个完整的网站项目，通常会包含网站设计、前端开发和程序开发这几个主要环节。网站设计，很好理解，负责的是网站的“颜值”，那些平面的视觉元素都归它管。程序开发，则是负责功能实现，让网站能跑起来、能交互。那么前端开发呢？简单一句话：它就是把设计师给的效果图，变成用户真正能浏览、能操作的网页。这个过程就像一个翻译官，把静态的图纸“翻译”成动态的线上产品。

具体来说，前端的工作涵盖了一系列精细活儿：切图、编写样式、实现各种鼠标悬停效果、设计图片轮播切换等等。但一名优秀的前端开发者，远不止是完成这些效果。真正的功力在于，实现酷炫效果的同时，必须确保网站打开速度不受拖累，能在各种浏览器里正常显示，还得对搜索引擎友好，方便被收录。这些功夫都下足了，用户体验才能真正舒适起来，让访客觉得这个网站不仅好看好用，而且做得非常精细、用心。

话说回来，如今前端的工作疆界早已不局限于传统网页了。从火爆的微网站、Web APP，到手机游戏，前端技术无处不在。你现在用的很多手机APP，其内核其实就是一个用前端技术打包而成的Web页面。而游戏里那些丰富的互动界面，更是前端开发技术大展拳脚的舞台。

什么是HTML5？

HTML5，本质上就是HTML语言的最新标准，你可以把它看作是Web开发世界里一次意义重大的“版本升级”。作为一项被广泛采纳的推荐标准，它现在已经成为现代Web程序开发的核心基石。

这里有个常见的点需要厘清：严格来说，CSS3和HTML5是两门不同的语言。但在行业内的日常交流中，大家提到“HTML5”时，往往是一个更宽泛的概念，通常也涵盖了CSS3。原因很简单，这两者在实际项目中几乎总是并肩作战、配合使用。

当然，HTML5的内涵远不止于此。从技术层面来看，如今我们看到的许多酷炫页面、Web APP、微网站，乃至直接在浏览器里跑的网页游戏，基本都是基于HTML5标准构建的。尽管这类应用的很多核心交互逻辑其实是由Ja vaScript驱动的，但“HTML5”这个概念实在太深入人心了，以至于大家说到开发微网站或WebAPP时，都习惯性地冠以“用HTML5开发”的名头。

前端与HTML5的区别？

现在很多人容易把“前端开发”和“HTML5”这两个概念混为一谈，这里确实需要做个清晰的区分。比如，“H5”是HTML5的简称，但不少朋友会误将HTML5当成了前端开发的代名词。

事实究竟如何呢？HTML5只是前端开发技术栈中极为重要的一部分，是当前前端领域的标准配置，尤其在移动端的动效开发、游戏开发以及混合APP开发方向上，它扮演着绝对主力的角色。如果做个比喻，把整个前端开发看作建设一座“大厦”，那么HTML5就像是构筑这座大厦所必需的“钢筋水泥”，是基础而核心的材料。

所以，当你听到有人说“我们用HTML5开发了某个功能”时，其实他们想表达的，多半是运用了包括HTML5在内的整个前端技术体系。只不过“HTML5”这个词更时髦、更流行，久而久之，很多人便用它来指代整个前端技术了。

前端开发学习什么？

想踏入前端开发的大门，需要搭建一个系统的知识体系。这条学习路径大致是这样的：

首先是基础三件套：HTML、CSS，以及DIV+CSS的页面布局技术，这是制作Web页面的起点。紧接着，必须攻克Ja vaScript，连同DOM（文档对象模型）、BOM（浏览器对象模型）一起掌握，这是建立编程逻辑和开发思维的基石。

当然，光会写代码不够，还得懂点设计。Photoshop、Axure这类软件的应用也得了解，目的是能看懂设计稿，更好地实现UI设计。此外，为了与后端伙伴顺畅协作，对Node.js、PHP以及数据库这些后端技术也得有个基本的认识。

进入进阶阶段，重心会转向移动互联网：HTML5与CSS3的深入应用、响应式页面布局、微网站制作，这些都是必备技能。而像Ajax、jQuery、jQuery Mobile、Bootstrap、AngularJS这类框架和库，更是提升开发效率、解决复杂问题的高级工具，属于必学内容。

再往上走，就是应对企业级开发需求了：HTML5的地理位置应用、离线应用、利用Web Worker实现多线程、WebSocket实时通信、跨平台开发技术以及WebAPP深度开发，这些都是当前市场上的主流技术方向。

最后，说到目前前端领域最炙手可热、人才需求最旺的方向，那非“网页游戏与动画”莫属。利用Canvas进行网页游戏和复杂动画开发，甚至使用Cocos2d-js等游戏引擎来制作游戏，代表了前端技术应用的高阶疆域，也是许多开发者心之所向。

转载于:https://www.cnblogs.com/xiaoxiaobird/p/6665835.html