从0到1微视频版HTML+CSS快速上手
人民邮电出版社
北京
图书在版编目（CIP）数据
从0到1：HTML+CSS快速上手/莫振杰著.--北京：人民邮电出版社，2019.12
ISBN 978-7-115-51032-7
Ⅰ.①从… Ⅱ.①莫… Ⅲ.①超文本标记语言一程序设计—教材②网页制作工具—教材 Ⅳ.①TP312.8②TP393.092.2
中国版本图书馆CIP数据核字（2019）第064031号
◆著 莫振杰
责任编辑 俞彬
责任印制 马振武
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京市艺辉印刷有限公司印刷
◆开本：787×1092 1/16
印张：16.5
字数：455千字 2019年12月第1版
印数：1-2500册 2019年12月北京第1次印刷
定价：45.00元
读者服务热线：(010)81055410 印装质量热线：(010)81055316
反盗版热线：(010)81055315
广告经营许可证：京东工商广登字20170147号
作者根据自己多年的前后端开发经验，站在完全零基础读者的角度，详尽介绍了HTML和CSS的基础知识，以及大量的开发技巧。
全书分为两大部分：第一部分是HTML基础，主要介绍各种标签的使用；第二部分是CSS基础，主要介绍样式布局操作。对于书中每一章，作者还结合实际工作及前端面试，精心配备了大量高质量的练习题，读者可以边学边练，以更好地掌握本书内容。
本书为每一节内容录制了高质量的视频课，并且配备了所有案例的源码。此外，为了方便高校老师教学，本书还提供了配套的PPT课件。本书适合完全零基础的初学者使用，可以作为前端开发人员的参考书，也可以作为大中专院校相关专业的教学参考书。
如果你想要快速上手前端开发，又岂能错过“从0到1”系列？
这是一本非常有个性的书，学起来非常轻松！当初看到这本书时，我们很惊喜，简直像是发现了新大陆。
你随手翻几页，就能看出来作者真的是用“心”去写的。
作为忠实的读者，很幸运能够参与本书的审稿及设计。事实上，对于这样一本难得的好书，相信你看了之后，也会非常乐意帮忙将它完善得更好。
——五叶草团队
一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。
本书和“从0到1”系列中的其他图书，大多都是源于我在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高，因而累计获得超过100000读者的支持。更可喜的是，我收到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。
我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己多年的学习和前端开发经验，完全站在初学者的角度而不是已经学会的角度来编写本书。我相信，本书会非常适合零基础的读者轻松地、循序渐进地展开学习。
之前，我问过很多小伙伴，看“从0到1”这个系列图书时是什么感觉。有人回答说：“初恋般的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。
配套习题
每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案放于本书的配套资源中，具体下载方式见下文。
配套视频课程
为了更好地帮助零基础的小伙伴快速上手，全书每一节都录制了配套的高质量视频，小伙伴们可扫描书中相应位置二维码观看。
配套网站
绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术“大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加QQ群讨论交流：519225291、593173594（只能加一个QQ群）。
配套资源下载及使用说明
本书的配套资源包括习题答案、源码文件、配套PPT教学课件。扫描下方二维码，关注微信公众号“职场研究社”并回复“51032”，即可获得资源下载方式。
特别鸣谢
本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们的帮助本书才得以顺利出版。
感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量时间对本书进行细致的审阅，并给出了诸多非常棒的建议。
最后要感谢我的挚友郭玉萍，她为“从0到1”系列图书提供了很多帮助。在人生的很多事情上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。
由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以发送电子邮件至lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www.lvyestudy.com），了解更多前端开发的相关知识。
作者
在学习HTML之前，我们先来讲一下网站开发的基础知识。了解这些基础知识，对于你的网站开发学习之路是非常重要的。这不但能让你知道该学什么以及如何学，也能让你少走很多弯路。
1.Web 1.0时代的“网页制作”
网页制作是Web 1.0时代（即2005年之前）的产物，那个时候的网页主要是静态页面。所谓的静态页面，指的是仅仅供用户浏览而无法与服务器进行数据交互的页面。例如，一篇博文，就是一个展示性的静态网页。
在Web 1.0时代，用户能够做的唯一一件事就是浏览这个网页的文字和图片。用户只能浏览网页，却不能在网页上发布评论或交流（与服务器进行数据交互）。现在在网页上发布评论早已司空见惯，而在很多年前的Web 1.0时代的网站中，是极其少见的。
估计很多小伙伴都听过“网页三剑客”，这个组合就是Web 1.0时代的网站开发工具。网页三剑客指的是“Dreamweaver、Fireworks、Flash”这3款软件，如图1-1所示。
2.Web 2.0时代的“前端开发”
现在常说的“前端开发”是从“网页制作”演变而来的。互联网于十多年前进入了Web 2.0时代，在Web 2.0时代，网页分为两种：一种是“静态页面”，另一种是“动态页面”。
静态页面仅可供用户浏览，不具备与服务器交互的功能。而动态页面不仅可以供用户浏览，还可以与服务器进行交互。换句话说，动态页面是在静态页面的基础上增加了与服务器交互的功能。举个简单的例子，如果你想登录QQ邮箱，就得输入账号和密码，然后单击“登录”按钮，这样服务器会对你的账号和密码进行验证，成功后才可以登录。
在Web 2.0时代，如果仅使用“网页三剑客”来做开发，是不能满足大量数据交互开发需求的。现在我们所说的“页面开发”，无论是从开发难度，还是开发方式上，都更接近传统的网站后台开发。因此，我们不再叫“网页制作”，而是叫“前端开发”。对于处于Web 2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客”了，因为这个组合已经是上一个互联网时代的产物了。此外，这个组合开发出来的网站，其问题也非常多，如代码冗余、可读性差、维护困难等。
1.前端开发
既然所谓的“网页三剑客”已经满足不了现在的前端开发需求，那么我们现在究竟要学习哪些技术呢？
对于前端开发来说，最核心的3个技术分别是HTML、CSS和JavaScript（简称JS），也叫“新三剑客”，如图1-2所示。
HTML，全称是“Hyper Text Markup Language”（超文本标记语言），HTML是一门描述性语言。
CSS，即“Cascading Style Sheets”（层叠样式表），是用来控制网页外观的一种技术。
JavaScript是什么？JavaScript是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。
现在，我们知道了前端最核心的3个技术是HTML、CSS和JavaScript。它们三者有什么区别呢？
“HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。”给大家打个比方加以说明，制作网页就好像是盖房子，盖房子的时候，我们都是先把结构建好（HTML）。之后，再给房子装修（CSS），例如，给窗户装上窗帘、在地板上铺瓷砖。装修好之后，当夜幕降临之时，我们要开灯（JavaScript）才能把屋子照亮。
我们再回到实际的例子中去，看一下绿叶学习网（本书配套网站）的导航栏。“前端入门”这一栏目具有以下4个基本特点。
字体类型是微软雅黑。
字体大小是14px。
背景颜色是淡绿色。
鼠标移到上面，背景色变成蓝色。
小伙伴们可能会疑惑：这些效果是怎么做出来的呢？其实思路与“盖房子”是一样的。我们先用HTML来搭建网页的结构，在默认情况下，字体类型、字体大小、背景颜色如图1-3所示。
然后，我们使用CSS来修饰一下字体类型、字体大小和背景颜色，如图1-4所示。
最后，再使用JavaScript来定义鼠标的行为，当鼠标移到上面时，背景颜色会变成蓝色，最终效果如图1-5所示。
到这里，大家应该都知道一个缤纷绚丽的网页是怎么做出来的了吧？理解这个过程，对于后面的学习非常重要。
对于前端开发来说，即使你精通HTML、CSS和JavaScript，也称不上是一位真正的前端工程师。除了上述3种技术，我们还得学习一些其他技术，如jQuery、Vue.js、SEO和性能优化等。建议小伙伴们把HTML、CSS和JavaScript学好之后，再慢慢去接触这些技术。
2.后端开发
掌握了前端技术，差不多你就可以开发一个属于自己的网站了。不过这个时候做出来的是一个静态网站，它的唯一功能是供用户浏览，而不能与服务器进行交互。在静态网站中，用户能做的事情是非常少的。因此，如果想开发一个用户体验更好、功能更强大的网站，我们就必须学习一些后端技术。
那后端技术又是什么样的技术呢？举个简单的例子，很多网站都有注册功能，只有用户注册之后，才具有某些权限。例如，你要使用QQ空间，就得注册一个QQ才能使用。这个注册以及登录的功能就是用后端技术做的。又如你在淘宝上可以轻松方便地购物，这些功能依靠后端技术处理才能实现。下面给大家介绍几种常见的后端技术。
PHP，是较为通用的开源脚本语言之一，其语法吸收了C、Java和Perl语言的特点，使用广泛，易于学习，适用于Web开发领域。
JSP，有点类似ASP技术，它可以在传统的网页HTML文件中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件。用JSP开发的Web应用是跨平台的，既可以在Windows系统下运行，也能在其他操作系统（如Linux）上运行。
ASP.NET，其前身就是我们常说的ASP技术，像绿叶学习网，就是使用ASP.NET开发的。
此外，很多人认为“网站就是很多网页的集合”，其实这个理解是不太恰当的。准确地说，网站是前端与后端的结合。
与Web开发相关的技术实在太多了，很多小伙伴完全不知道怎么入门。即使上网问别人，得到的回答也是五花八门，令人十分困惑。下面是我们推荐的学习路线。
HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→移动Web→Vue.js
这是一条比较理想的前端开发的学习路线。除了掌握这些技术，后期我们可能还需要学习使用一些前端构建工具，如webpack、gulp和babel等。学完并且能够熟练使用之后，你才算是一位真正意义上的前端工程师。针对这条路线，我们为小伙伴们打造了这套“从0到1”系列图书。
在HTML刚入门的时候，你不一定要把HTML学精通了再去学CSS（这也不可能），这是一种最笨也是最浪费时间的学习模式。对于初学者来说，千万别想着精通了一门技术，再去精通另一门技术。在Web领域，不少技术之间都有着交叉关系，只有“通”十行才可能做到“精”一行。
如果你走别的路线，可能会走很多弯路。这条路线是我从初学前端，到开发了各种类型的网站以及写了十多个在线技术教程和多本书籍的经验总结。当然，这条路线只是一个建议，并非是一个强制性要求。
接下来，就让我们迈入前端开发学习的第一步——HTML入门。
HTML全称是“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
语法
<标签符>内容</标签符>
说明
标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加了一条斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。
举个例子，我们一般用“<em>绿叶学习网</em>”来定义文字为斜体。当浏览器遇到标签对时，就会把标签中的文字用斜体显示出来。
<em>绿叶学习网</em>
当浏览器遇到上面这行代码时，就会得到图1-6所示的斜体文字效果。
那么学习HTML究竟要学些什么呢？用一句简单的话来说，就是学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。
HTML是一门描述性的语言，就是用标签来说话。举个例子，如果你要在浏览器显示一段文字，就应该使用“段落标签（p）”；如果要在浏览器显示一张图片，就应该使用“图片标签（img）”。你想显示的东西不同，使用的标签也会不同。
总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示的东西，对应地使用正确的标签，非常简单。
此外，很多时候，我们也把“标签”说成“元素”，如把“p标签”说成“p元素”。标签和元素，其实说的是一个意思，仅仅是叫法不同罢了。不过“标签”的叫法更加形象，它说明了HTML是用来“标记”的，用来标记这是一段文字还是一张图片，从而让浏览器将代码解释成页面效果呈现给用户。
1.HTML的学习门槛高吗？
学习HTML不需要任何编程基础，即使是小学生也可以学。当年我读大学的时候，讲计算机网络这门课的教授就说，他见过有些小学生都会做网页了！而我那时候都不知道什么是HTML。
后来自己接触了很多前端知识后，才明白大学为什么很少涉及HTML、CSS这些课程。因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。
2.学完这本书，要花多少时间？我能达到什么水平？
即使没有基础，只要认真学，一周就可以入门了。当然，仅仅学完这个教程，也只是入门程度，只能制作一些简单的网页。如果想要达到实际工作的水平，我们还需要学习CSS进阶的内容才行。
3.书中每一章后面的习题有必要做吗？
必须要做！这本书中每一章后面的练习题都是我与其他几个前端工程师精心挑选和设计出来的，这些习题来自于真正的前端开发工作，甚至不少还是面试题。希望小伙伴们认真把每一道题都做一遍。
4.现在都有HTML5了，为什么还要学HTML呢？
HTML是从HTML4.01升级到HTML5的。我们常说的HTML，指的是HTML4.01，而HTML5一般指的是相对于HTML4.01“新增加的内容”，并不是指HTML4.01被淘汰了。准确地说，你要学的HTML，其实是HTML4.01加上HTML5。
市面上的很多技术图书，都把“HTML5+CSS3+JavaScript”放到一本书里面介绍，其实这是误人子弟的做法。因为5本书都不可能把这些技术介绍完全，更不用说一本就能让你从入门到精通了。
之前好多小伙伴以为只要学HTML5就行了，没必要再去学HTML。殊不知没有HTML基础，你是学不懂HTML5的。
5.如果我想达到真正的前端工程师水平，还要继续学习哪些内容呢？
可以看一下“从0到1”系列的其他图书，这个系列的所有图书都是我一人“操刀”。本书只是一个入门篇，如果想要达到真正工作的水平，大家接下来应该学习JavaScript、jQuery、HTML5、CSS3、ES6、Vue.js等。
最后还有一点要说明，之前有些人问：“为什么不把入门和进阶的内容都放到一本书里面？”。其实这样也是为了让大家有一个循序渐进的学习过程。
目前，前端开发工具非常多，如Dreamweaver、Sublime Text、Atom、HBuilder、Vscode等。对于有经验的开发者来说，使用哪一款工具都可以。不过对于完全没有基础的小伙伴，推荐使用HBuilder。
这里有个情况有必要跟初学者说明一下。如果选择了Dreamweaver作为开发工具，一定不要使用它的界面操作的方式来开发网页，如图2-1所示，这种开发方式已经被摒弃很久了。
大家不要觉得Dreamweaver那种用鼠标“点点点”的方式开发网页既简单又快速。等你学了一段时间就会发现，你学到的根本就不是技术，而只是软件操作！采用界面操作的方式开发网页，跟当前实际工作中的前端开发是完全脱轨的。这样开发出来的网站，其可读性和可维护性非常差。可读性和可维护性，是Web开发中极为重要的两个东西。相信大家学到后面，应该会有很深的理解。
Dreamweaver是一款不错的开发工具，这里并非反对大家使用Dreamweaver，而是反对大家使用Dreamweaver那种“点点点”的界面操作方式来开发网页。对于刚刚接触HTML的小伙伴来说，Dreamweaver易于上手。不过还是强烈建议大家一定要用“代码方式”写页面，而不是用“鼠标单击方式”写页面。
我自己从事前端开发很多年了，对实际工作还是非常清楚的。在真正的开发工作中，很少有前端工程师使用Dreamweaver，更多的是使用HBuilder、Sublime Text、Vscode、Webstorm。这里给初学者一个建议：使用HBuilder，因为HBuilder上手最简单。学到后期，推荐使用Vscode、Sublime Text或Webstorm，这3个更能满足真正的前端开发需要。
不管使用哪款开发工具，在开发的时候，我们都需要新建一个HTML页面，然后再在这个页面中编写代码。
HBuilder是专为前端打造的开发工具，上手非常快，也是初学者的首选。这一节我们来介绍一下怎么在HBuilder中新建一个HTML页面。
① 新建Web项目：在HBuilder的左上方，依次单击【文件】→【新建】→【Web项目】，如图2-2所示。
② 选择文件路径及命名文件夹：在对话框中，给文件夹命名，并且选择文件夹路径（也就是文件存放的位置）。然后单击【完成】按钮，如图2-3所示。
③ 新建HTML文件：在HBuilder左侧的项目管理器中，选中test文件夹，然后单击右键，依次选择【新建】→【HTML文件】，如图2-4所示。
④ 选择文件路径及给HTML文件命名：在对话框中选择文件夹路径（也就是HTML文件存放的位置），并且给HTML文件填写一个名字（建议使用英文），然后单击【完成】按钮，如图2-5所示。
⑤ 预览页面：在HBuilder上方工具栏中找到【预览】按钮，单击就可以在浏览器中查看页面效果了，如图2-6所示。
最后，对于HBuilder的使用，还有两点要跟大家说明一下。
对于站点、文件、页面等的命名，不要使用中文，而应使用英文。因为，现在绝大多数操作系统都是英文的，如果使用中文，可能会导致无法识别。
对于HBuilder的使用，我们可以在HBuilder上方的工具栏中，依次选择【帮助】→【HBuilder入门】，里面有比较详细的使用教程。
