近年来，随着互联网的飞速发展，使用“网页三剑客”的传统开发方式已经满足不了实际开发需求。现在的页面开发，无论是开发难度还是开发方式上，都更接近传统的网站后台开发。因此我们不再叫“网页制作”，而是叫“前端开发”。

在过去几年，只要新人稍加努力，就能找到一份薪水不错的工作。但是随着整个前端行业水平的提升，很多小伙伴发现自己当初所学的技能，往往跟不上实际工作的需求。尤其是像百度、阿里或腾讯这样的大型互联网公司，很多求职者都达不到其前端岗位的要求。

前端技术非常多，但最核心的还是HTML、CSS和JavaScript。本书内容来源于笔者在绿叶学习网分享的三个倍受欢迎的超人气在线教程。本书对这些内容进行深加工，使其更加完善。为了避免前端新人走弯路，笔者把前端碎片化的知识系统化，指出许多书籍中所没有提到的学习误区，并且提供给前端初学者一个明确的学习思路。除了详细讲解知识，更加注重开发技巧和思维。

为了让读者更好地掌握前端开发技能，笔者还结合实际工作以及前端面试，精心挑选了大量的高质量练习题。此外，本书还专门配套了课件PPT以及各种工具手册，以便各大高校老师教学使用。

本书特色

• 系统学习，把前端碎片化的知识系统化，避免新手走弯路。

• 兼顾工作，从真正前端工作角度出发，详尽介绍各种开发技能。

• 通俗易懂，语言风格轻松幽默、一针见血，直击技术的本质。

• 贴近读者，结合笔者自身学习经历，以第一人称讲解，文字更有温度。

• 含金量高，前端高质量的内容整合，一大波高级开发技巧呈现。

• 直击痛点，规避传统开发的思维误区，摒弃过时的方法与技术。

读者对象

• 没有任何编程基础的初学者。

• 有一定基础但想系统学习的前端工程师。

• 大中院校相关专业的学生。

技术交流

技术只有多交流才会更快地长进，因此我们还为读者小伙伴们提供了一个高质量的交流平台，如果大家有任何技术问题，可以加QQ群讨论交流：519225291、593173594。

资源下载

本书配套的所有资源，包括练习答案、源码文件、课件PPT等，可以到人民邮电出版社异步社区（）中本书页面下载。

特别致谢

在编写本书的过程中，笔者得到了很多人的帮助。首先感谢五叶草团队的几个小伙伴（韦雪芳、程紫梦、陈志东）花费大量时间对本书进行细致的审阅，给出诸多非常棒的建议。

特别感谢赵轩老师（本书责任编辑）在这段时间给予我专业的指导以及不懈的支持，有您的帮助本书才得以顺利出版。

由于笔者水平有限，书中难免有错漏之处，小伙伴们如果遇到问题或有任何意见和建议，可以到绿叶学习网（）或者发邮件（lvyestudy@foxmail.com）与我联系。

在学习HTML之前，我先来给小伙伴们讲一下网站开发的基础知识。了解这些知识，对于以后学习网站开发是非常重要的。同时，也能让你少走弯路。

1. Web1.0时代的“网页制作”

网页制作是Web1.0时代（即2005年之前）的产物，那个时候的网页主要是静态页面。所谓的静态页面，指的是仅仅供用户浏览而没有跟服务器进行数据交互的页面，例如一篇博文网页。

在Web1.0时代，用户能够做的唯一一件事就是浏览这个网页中的文字和图片。这种网页仅仅供用户浏览，却不能像在现在大多数网页中那样进行评论交流（跟服务器进行数据交互）。当今，很多网站都具备评论功能，但是在Web1.0时代是做不到的。

图1-1　网页三剑客

估计很多小伙伴都听说过“网页三剑客”吧？其实，这个组合就是Web1.0时代的东西。网页三剑客，指的是Dreamweaver、Fireworks和Flash。

2. Web2.0时代的“前端开发”

现在常说的“前端开发”是从“网页制作”演变而来的。从2005年开始，互联网进入了Web2.0时代，仅仅由文字和图片组成的静态页面已经远远满足不了用户的需求了。在Web2.0时代，网页可以分为两种：一种是静态页面，另外一种是动态页面。