回首我开始学HTML的时候，那已经是2014年9月的事情了。

当时我才刚上大一，就连编程也只能说是一个初心者，算法只会选择排序，编程语言只学过一点点Visual Basic。

当时对网页制作还停留在FrontPage、Dreamweaver 这种工具的印象上。

说来有趣，当时印象中的Web开发跟用Word写点东西并发到QQ空间里没什么本质区别。

直到现在，我在Web开发之路上已经跌跌撞撞走了20个月了。

没有老师教过，完全靠自学，所以走过不少弯路，现在准备整理一下发一个系列的博文分享给大家。

没有完全复现我的学习之路，让大家陪我一起走弯路的意思；也没有给大家讲解Web历史，或者是广泛介绍各种开发框架的意思。而是结合现在的经验脑补出一条学习的路径供参考。

通用学习资源

• W3C School
• 极客 Wiki

还有很多私人的网站和博客可以参考。

前端三大件

Web前端三大件是指：HTML、CSS、JavaScript，掌握这三大件，你就能进入工业界拿个前端工程师的名头混碗饭吃了。所谓前端的工作，也就是把数据以人民喜闻乐见的形式呈现而已，其中大有讲究。

HTML

一个Web开发初心者，应当从HTML开始学起。
HTML的入门很简单，现在入门的话，直接从HTML5开始学习就可以了。

基本

1. 了解HTML5文档的基本结构与嵌套模式。（约10分钟）
2. 了解基本的几个标签（h*, p, a, code等）。（约30分钟）
3. 了解人机交互标签（button, input等）。（约30分钟）
4. 了解引用外部资源（图片、样式、脚本）的方式。（约20分钟）

进阶

1. 了解HTML文档的树形结构（DOM树）。（约10分钟）
2. 了解DOM树各种节点（对应各种标签）上的属性与方法。（4小时以上）

深入

1. 理解HTML背后更深层次的设计范式XML。
2. 了解其他的数据表示范式，如JSON，YAML等。
3. 扩散学习各种标记语言，如Markdown等。

HTML中的M是Markup，而Markdown的取名正来自于Markup。

禅

这无非就是对象序列化（Object Serialization）的一种形式。

CSS

HTML仅被考虑成是一种有格式的数据，而浏览器会将其渲染成一个网页，所用样式都是浏览器自己默认定义的（User-Agent类样式）。通常情况下，这极为难看。这个时候Web开发者就需要自定义样式来使得页面变得美观。

基本

1. 了解CSS的选择器与作用层序。（约1小时）
2. 了解基本的CSS语法与样式。（约2小时）

进阶

1. 学习CSS3的各种特性。
2. 学习CSS最佳实践。
3. 学习各种CSS库，如Bootstrap等。

深入

1. 了解最新的CSS标准，甚至那些尚未被浏览器支持的。
2. 使用CSS预处理器，如Less, SASS等。

禅

这是一门化妆的艺术。

JavaScript

停一下
麻烦停一下
各位停一下，听我说

JS 大法好！

JavaScript作为一门编程语言来说，跟Java其实没有什么关系。如今，JavaScript的应用甚广，甚至能一定程度上进行全栈开发（Full Stack Developing）。

基础

1. 会用JS REPL交互环境，如浏览器控制台等可以即时执行JS代码的环境。
2. 学习JavaScript的基本数据格式、语法。
3. 了解JavaScript的基本对象与其属性、方法。
4. 会用JavaScript操作DOM树(即document对象)。
5. 学习浏览器环境中的全局对象，如window, document, localStorage等。

进阶

1. 学习JavaScript库，如jQuery等。
2. 学习JavaScript的异步编程模式。
3. 学习用JavaScript与服务器进行交互（Ajax）。

深入

1. 学习管理JavaScript代码的依赖方式。
2. 学习NodeJS进行Web后端开发。

禅

无它，JS大法好！

后端开发

后端开发是一个应用的重中之重，是实现各种强大功能的部分。

什么？前端？那只是给你们人类看的部分而已！

后端程序通常被部署在服务器上，资源通常比客户端多，但一拳难敌四手，在大量的客户端下资源显得很有限。高性能、稳定、易维护是后端要的效果。

基本上，是个编程语言都能开发后端。Web后端无非是一个将请求（Request）转化为响应（Response）的程序而已。

最基本的方式是直接按照静态资源（HTML、CSS、JavaScript）存放的目录响应请求，建立一个双射。

但这样的后端灵活度实在有限，很快有了很多的拓展方案：

PHP

php有着自己的一个处理器，每当客户端请求涉及php文件时，服务器存储的php文件会先经过这个处理器，转化成HTML或者其他的响应格式后再传回给客户端。

Java

Java 企业级 Web 应用开发。基本形式同PHP，但它的语言较之PHP很容易掌握，可维护性也强得多，缺点是不灵活，开发周期长。

NodeJS

NodeJS有着与JavaScript无与伦比的亲和力，在Web 后端开发中大放光芒。但JavaScript本身性能不高，NodeJS凭借异步模型可以有效提高其作为Web服务器的性能，但本质上并没有减少服务器要做的工作。

小结

我目前仅有以上三种后端的开发经验。相比之下，我个人更喜欢 NodeJS 的开发。对于开发来说，它的开发周期不长，闭包带来了良好的可维护性、模块生态良好，社区也比较成熟。全程用JavaScript开发的柔顺感极佳！另外NodeJS的性能也绝对不差，甚至在很多情况下优于其他的。

根据我个人的经验，本系列后面的会走：

HTML + CSS + JavaScript -> NodeJS -> … 这样的一条路线。