web前端开发入门（一）

前端开发入门

首先必须掌握 HTML/CSS/JavaScript 这三大基础技术栈，所谓基础就是基石。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基础，所以必须要掌握。HTML 主要就是HTML5，相比之前的版本，新增了很多新特性。CSS 则主要是 CSS3 了，相比以前的版本，主要就是作了模块化的拆分。JavaScript 其实分为三部分：ECMAScript、DOM和 BOM。ECMAScript 简称 ES，是 JavaScript 的核心，目前最新版本已经是ES2017，是 ES6 的第三个小版本。DOM 是文档对象模型，其实就是一套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型，用于访问和操作浏览器的一些特性。
.
HTML/CSS/JavaScript 的学习资源比较多，我推荐几个。首先是 w3school 的系列教程：

1. HTML：该教程也包括了 HTML5 新增的内容，但讲得没下面专门讲解 HTML5 的细，所以该教程我建议只看 HTML 基础教程和表单部分即可
2. HTML5：该教程讲解了 HTML5 的新特性，所以还需要学习下面的 CSS3 的教程
3. CSS3：该教程内容比较少，只包含 CSS3 新增的特性
4. JavaScript：该教程只是讲解了非常基础的语法

不过，我更推荐菜鸟的教程，内容虽然也是来自 w3school，但部分内容比 w3school 的更详细，以下是教程地址：

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

JavaScript

HTML 和 CSS 只要根据以上教程学习就足够了，但 JavaScript 则是不够的，以上教程缺少了 ES6 及更高版本的内容，后面我再推荐其他学习资源进行补充。

视频教程方面，慕课网、极客学院等都有基础课程，但都是收费的，而且价格不菲，性价比实在太低。比如慕课网的《前端小白入门》+《前端进阶：响应式开发与前端框架》两套课程的组合套餐就要 988 元了，而内容还没有上面免费教程的齐全。如果真要看视频，那我会推荐网易云课堂的一些免费课程:

1. 从零玩转HTML5前端+跨平台开发
2. H5/web前端开发｜HTML5+CSS3
3. 李炎恢JavaScript教程 第一季

书籍方面，HTML 和 CSS 基础方面的，首推《Head First HTML与CSS》，编排设计通俗易懂，就连完全零基础的非 IT 人员都适合学习。不过，Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过，Head First 有另一本书讲解了 HTML5，叫《Head First HTML5 Programming》，不过，要熟悉 HTML5 的用法，还是要先掌握一点 JavaScript 基础。CSS3 方面 Head First 则没有相应的书籍，因此，我推荐另一本《CSS3实用指南》。

JavaScript 方面，我首推《JavaScript高级程序设计》这本书，书中内容由浅入深，也是写得通俗易懂，适合入门。另外，有些人会推荐《JavaScript权威指南》，但这本书主要还是一本字典书，略显晦涩，其实不适合入门。不过《JavaScript高级程序设计》还是基于 ES5 的，为了补充 ES6 的内容，推荐阮一峰的《ES6标准入门》，目前是第3版，内容已经覆盖了最新版本的 ES2017。另外，因为这是一本开源教材，所以也可以直接去阮一峰的官网免费阅读，以下是链接地址：

• ECMAScript 6 入门：http://es6.ruanyifeng.com/
  另外，有一套系列书叫《You Don’t Know JS》也要推荐给大家，也是开源教材，这套书会让你对 JavaScript 知其然也知其所以然，也包含了 ES6 的内容，不过这套书面向初学者的，只适合用来进阶。也出版了中文翻译的书籍，叫《你不知道的JavaScript》，目前只有上卷和中卷两本，据评价，上卷的翻译还不错，但中卷的翻译则一般般，下卷不知道什么时候才出版。以下是系列书的github地址：
• You Don’t Know JS：https://github.com/getify/You-Dont-Know-JS
  那么，这么多学习资源，我们应该如何学习才高效呢？其实，和前面学习 Android 和 iOS 时一样，我们主要还是为了了解各种核心概念，我们不可能在短期内熟悉所有知识点，因此，我还是和前面的文章一样，也罗列出一些核心的知识点吧。
• HTML基础：以 w3school 或菜鸟的 HTML 教程为主，熟悉各种常用标签的用法，尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等
• CSS基础：同样以 w3school 或菜鸟的 CSS 教程为主，熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容
• JavaScript基础：首先作为一门编程语言，语言本身的基础肯定要熟悉，包括数据类型、变量、运算符、控制流、函数、对象等；另外，也要熟悉 DOM；BOM 简单了解下就可以了，使用场景不多
• HTML5：HTML5 的新特性肯定要了解，内容其实也不是很多，核心的就是 canvas、svg、对多媒体的支持、Web 存储、应用缓存、WebSocket等
• CSS3：CSS3 也是要熟悉那些新特性，最核心的就是弹性盒子
• ES6：ES6 自然也是要熟悉的，学好阮一峰的《ECMAScript 6 入门》教程就足够了

总结

前端开发入门，要学的技术栈真的很多，除了最基础的 HTML/CSS/JavaScript，还包括 HTML5、CSS3、ES6，还要学习目前流行的 JavaScript 框架，我的建议是从 Vue 开始，容易入门，要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解点基础。最后，实战项目我推荐了一个简单的小项目和一个完整的 vue 版饿了么项目。

思考和实践

前端开发的编程思想和移动开发有什么不同？如何将前端的架构思想应用到移动开发上？最后，还是要独立完成一款 Web 应用。