web前端开发入门（一）

前端开发入门

踏入Web前端开发的世界，第一步必须牢牢掌握HTML、CSS和Ja vaScript这三大基石。它们构成了所有网页的骨架、皮肤和灵魂，缺一不可。

HTML/CSS/Ja vaScript

这“三驾马车”是前端的绝对核心。HTML，目前的主流是HTML5，它带来了许多激动人心的新特性，让网页从静态文档变成了功能丰富的应用。CSS则演进到了CSS3，其最大的变化在于模块化拆分，让样式管理变得更加清晰和强大。

至于Ja vaScript，它的内涵其实比表面看起来更丰富，可以拆解为三部分：ECMAScript（简称ES）、DOM和BOM。ES是Ja vaScript的语言核心，目前的最新标准已经是ES2017（即ES6的后续版本）。DOM，即文档对象模型，提供了一套完整的API，让你能随心所欲地访问和操作页面上的每一个元素。BOM，浏览器对象模型，则让你能与浏览器窗口本身进行交互。

说到学习资源，市面上选择不少。首先不得不提的是经典的w3school系列教程：

HTML教程：涵盖了基础内容和HTML5新增部分，但关于HTML5的讲解不如专门的教程深入，因此建议重点学习其基础教程和表单部分即可。

HTML5教程：专门讲解HTML5的新特性，是必要的补充。

CSS3教程：内容相对精炼，主要聚焦于CSS3新增的特性。

Ja vaScript教程：仅讲解了最基础的语法，作为入门第一步尚可。

不过，相比之下，菜鸟教程（runoob.com）的内容虽然也源自w3school，但在部分章节的讲解上更为细致，对新手可能更友好。以下是具体链接：

HTML：http://www.runoob.com/html/html-tutorial.html

CSS：http://www.runoob.com/css/css-tutorial.html

Ja vaScript：http://www.runoob.com/js/js-tutorial.html

Ja vaScript

对于HTML和CSS，按照上述教程路径学习基本足够。但Ja vaScript则不然，上述资源普遍缺少对ES6及更高版本内容的覆盖，这就需要我们寻找其他资料进行补充。

视频教程方面，慕课网、极客学院等平台虽有相关课程，但多为收费内容，且价格不菲。例如，慕课网某两门课程的组合套餐售价近千元，但其内容覆盖面未必比得上免费的优质文本教程。如果确实偏好视频学习，不妨关注网易云课堂上的一些免费课程，例如《从零玩转HTML5前端+跨平台开发》、《H5/web前端开发｜HTML5+CSS3》以及《李炎恢Ja vaScript教程 第一季》。

书籍方面，HTML和CSS的入门，首推《Head First HTML与CSS》。这本书的编排生动有趣，堪称零基础友好型教材，即便非IT背景的读者也能轻松上手。但需注意，该书未涉及HTML5和CSS3的内容。想了解HTML5，可以阅读同系列的《Head First HTML5 Programming》，不过学习此书需要一点Ja vaScript基础。至于CSS3，Head First系列暂无对应书籍，这时《CSS3实用指南》是一个不错的选择。

Ja vaScript的书籍选择就更多了。入门级强烈推荐《Ja vaScript高级程序设计》（红宝书），它由浅入深，讲解透彻，非常适合打基础。也有人推荐《Ja vaScript权威指南》（犀牛书），但这本书更像一本工具手册，内容略显艰深，不太适合作为入门第一本书。需要注意的是，《Ja vaScript高级程序设计》主要基于ES5，要学习ES6及更新特性，必须补充阅读阮一峰的《ES6标准入门》（目前第3版已覆盖ES2017）。幸运的是，这是一本开源教材，你可以直接在阮一峰的官网上免费阅读：http://es6.ruanyifeng.com/。

此外，还有一套备受推崇的系列书《You Don’t Know JS》（中译版为《你不知道的Ja vaScript》）。这套开源书籍能让你真正理解Ja vaScript的“所以然”，也涵盖了ES6内容。但它面向的是已有一定基础的开发者，更适合用于进阶学习。中文版目前出版了上卷和中卷，据读者反馈，上卷翻译质量不错，中卷则稍逊一筹。你可以访问其GitHub仓库：https://github.com/getify/You-Dont-Know-JS。

面对如此多的资源，如何高效学习？其实，和掌握任何新领域一样，关键在于抓住核心概念。我们不可能在短期内穷尽所有细节，因此，明确学习重点至关重要：

HTML基础：以w3school或菜鸟教程为主，熟悉常用标签，尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局等。

CSS基础：同样以上述教程为主，掌握CSS语法、选择器、样式、框模型、定位等核心模块。

Ja vaScript基础：首先掌握语言本身，包括数据类型、变量、运算符、控制流、函数、对象等；其次，必须熟悉DOM操作；BOM部分可简单了解，日常使用场景相对较少。

HTML5：重点了解其新特性，如Canvas、SVG、多媒体支持、Web存储、应用缓存、WebSocket等。

CSS3：熟悉其新特性，其中弹性盒子布局（Flexbox）是重中之重。

ES6：这是现代Ja vaScript开发的标配，学好阮一峰的《ECMAScript 6入门》教程便足以应对大多数场景。

总结

前端开发入门，要学的技术栈确实不少。除了HTML/CSS/Ja vaScript这三大基础，还需掌握HTML5、CSS3、ES6等现代标准。这之后，通常会进入流行框架的学习阶段。从当前趋势看，Vue.js因其易于上手的特点，常被推荐为第一个框架。围绕Vue的技术栈通常包括：Vue核心库、Vue Router（路由）、Vuex（状态管理）、Vue CLI（脚手架）、Axios（HTTP库）、Sass（CSS预处理器）以及Webpack（构建工具）。此外，对Node.js有基础了解也大有裨益。最后，通过实战项目巩固知识至关重要，可以从一个简单的TODO应用开始，再尝试复现一个像“饿了么”这样的完整商业项目前端部分。

思考和实践

前端开发与移动应用开发在编程思想上有何异同？前端领域成熟的组件化、状态管理等架构思想，能否以及如何反哺到移动开发中？这些问题值得深入探讨。当然，最重要的还是动手实践，独立完成一款Web应用，将是检验学习成果的最佳方式。