作者：莫振杰
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
从0到1：HTML+CSS快速上手试读：
前言
一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。
本书和“从0到1”系列中的其他图书，大多都是源于我在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高，因而累计获得超过100000读者的支持。更可喜的是，我收到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。
我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己多年的学习和前端开发经验，完全站在初学者的角度而不是已经学会的角度来编写本书。我相信，本书会非常适合零基础的读者轻松地、循序渐进地展开学习。
之前，我问过很多小伙伴，看“从0到1”这个系列图书时是什么感觉。有人回答说：“初恋般的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。
配套习题
每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案放于本书的配套资源中，具体下载方式见下文。
配套视频课程
为了更好地帮助零基础的小伙伴快速上手，全书每一节都录制了配套的高质量视频，小伙伴们可扫描书中相应位置二维码观看。
配套网站
绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术“大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加QQ群讨论交流：519225291、593173594（只能加一个QQ群）。
配套资源下载及使用说明
本书的配套资源包括习题答案、源码文件、配套PPT教学课件。扫描下方二维码，关注微信公众号“职场研究社”并回复“51032”，即可获得资源下载方式。职场研究社
特别鸣谢
本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们的帮助本书才得以顺利出版。
感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量时间对本书进行细致的审阅，并给出了诸多非常棒的建议。
最后要感谢我的挚友郭玉萍，她为“从0到1”系列图书提供了很多帮助。在人生的很多事情上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。
由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以发送电子邮件至lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www.lvyestudy.com），了解更多前端开发的相关知识。作者第一部分 HTML基础第1章 HTML简介1.1 前端技术简介
在学习HTML之前，我们先来讲一下网站开发的基础知识。了解这些基础知识，对于你的网站开发学习之路是非常重要的。这不但能让你知道该学什么以及如何学，也能让你少走很多弯路。1.1.1 从“网页制作”到“前端开发”
1.Web 1.0时代的“网页制作”
网页制作是Web 1.0时代（即2005年之前）的产物，那个时候的网页主要是静态页面。所谓的静态页面，指的是仅仅供用户浏览而无法与服务器进行数据交互的页面。例如，一篇博文，就是一个展示性的静态网页。
在Web 1.0时代，用户能够做的唯一一件事就是浏览这个网页的文字和图片。用户只能浏览网页，却不能在网页上发布评论或交流（与服务器进行数据交互）。现在在网页上发布评论早已司空见惯，而在很多年前的Web 1.0时代的网站中，是极其少见的。
估计很多小伙伴都听过“网页三剑客”，这个组合就是Web 1.0时代的网站开发工具。网页三剑客指的是“Dreamweaver、Fireworks、Flash”这3款软件，如图1-1所示。图1-1 网页制作“旧三剑客”
2.Web 2.0时代的“前端开发”
现在常说的“前端开发”是从“网页制作”演变而来的。互联网于十多年前进入了Web 2.0时代，在Web 2.0时代，网页分为两种：一种是“静态页面”，另一种是“动态页面”。
静态页面仅可供用户浏览，不具备与服务器交互的功能。而动态页面不仅可以供用户浏览，还可以与服务器进行交互。换句话说，动态页面是在静态页面的基础上增加了与服务器交互的功能。举个简单的例子，如果你想登录QQ邮箱，就得输入账号和密码，然后单击“登录”按钮，这样服务器会对你的账号和密码进行验证，成功后才可以登录。
在Web 2.0时代，如果仅使用“网页三剑客”来做开发，是不能满足大量数据交互开发需求的。现在我们所说的“页面开发”，无论是从开发难度，还是开发方式上，都更接近传统的网站后台开发。因此，我们不再叫“网页制作”，而是叫“前端开发”。对于处于Web 2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客”了，因为这个组合已经是上一个互联网时代的产物了。此外，这个组合开发出来的网站，其问题也非常多，如代码冗余、可读性差、维护困难等。1.1.2 从“前端开发”到“后端开发”
1.前端开发
既然所谓的“网页三剑客”已经满足不了现在的前端开发需求，那么我们现在究竟要学习哪些技术呢？
对于前端开发来说，最核心的3个技术分别是HTML、CSS和JavaScript（简称JS），也叫“新三剑客”，如图1-2所示。图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所示。图1-3 默认外观
然后，我们使用CSS来修饰一下字体类型、字体大小和背景颜色，如图1-4所示。图1-4 使用CSS进行修饰
最后，再使用JavaScript来定义鼠标的行为，当鼠标移到上面时，背景颜色会变成蓝色，最终效果如图1-5所示。图1-5 加入JavaScript
到这里，大家应该都知道一个缤纷绚丽的网页是怎么做出来的了吧？理解这个过程，对于后面的学习非常重要。
对于前端开发来说，即使你精通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开发的。
此外，很多人认为“网站就是很多网页的集合”，其实这个理解是不太恰当的。准确地说，网站是前端与后端的结合。1.1.3 学习路线
与Web开发相关的技术实在太多了，很多小伙伴完全不知道怎么入门。即使上网问别人，得到的回答也是五花八门，令人十分困惑。下面是我们推荐的学习路线。
HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→移动Web→Vue.js
这是一条比较理想的前端开发的学习路线。除了掌握这些技术，后期我们可能还需要学习使用一些前端构建工具，如webpack、gulp和babel等。学完并且能够熟练使用之后，你才算是一位真正意义上的前端工程师。针对这条路线，我们为小伙伴们打造了这套“从0到1”系列图书。
在HTML刚入门的时候，你不一定要把HTML学精通了再去学CSS（这也不可能），这是一种最笨也是最浪费时间的学习模式。对于初学者来说，千万别想着精通了一门技术，再去精通另一门技术。在Web领域，不少技术之间都有着交叉关系，只有“通”十行才可能做到“精”一行。
如果你走别的路线，可能会走很多弯路。这条路线是我从初学前端，到开发了各种类型的网站以及写了十多个在线技术教程和多本书籍的经验总结。当然，这条路线只是一个建议，并非是一个强制性要求。
接下来，就让我们迈入前端开发学习的第一步——HTML入门。1.2 什么是HTML
HTML全称是“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
语法
<标签符>内容
说明
标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加了一条斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。
举个例子，我们一般用“绿叶学习网”来定义文字为斜体。当浏览器遇到标签对时，就会把标签中的文字用斜体显示出来。
绿叶学习网
当浏览器遇到上面这行代码时，就会得到图1-6所示的斜体文字效果。图1-6 浏览器解析后的效果
那么学习HTML究竟要学些什么呢？用一句简单的话来说，就是学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。
HTML是一门描述性的语言，就是用标签来说话。举个例子，如果你要在浏览器显示一段文字，就应该使用“段落标签（p）”；如果要在浏览器显示一张图片，就应该使用“图片标签（img）”。你想显示的东西不同，使用的标签也会不同。
总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示的东西，对应地使用正确的标签，非常简单。
此外，很多时候，我们也把“标签”说成“元素”，如把“p标签”说成“p元素”。标签和元素，其实说的是一个意思，仅仅是叫法不同罢了。不过“标签”的叫法更加形象，它说明了HTML是用来“标记”的，用来标记这是一段文字还是一张图片，从而让浏览器将代码解释成页面效果呈现给用户。1.3 常见问题
1.HTML的学习门槛高吗？
学习HTML不需要任何编程基础，即使是小学生也可以学。当年我读大学的时候，讲计算机网络这门课的教授就说，他见过有些小学生都会做网页了！而我那时候都不知道什么是HTML。
后来自己接触了很多前端知识后，才明白大学为什么很少涉及HTML、CSS这些课程。因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。图1-7 让人不得不服的《宝宝的网页设计》
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等。
最后还有一点要说明，之前有些人问：“为什么不把入门和进阶的内容都放到一本书里面？”。其实这样也是为了让大家有一个循序渐进的学习过程。第2章 开发工具2.1 开发工具
目前，前端开发工具非常多，如Dreamweaver、Sublime Text、Atom、HBuilder、Vscode等。对于有经验的开发者来说，使用哪一款工具都可以。不过对于完全没有基础的小伙伴，推荐使用HBuilder。
这里有个情况有必要跟初学者说明一下。如果选择了Dreamweaver作为开发工具，一定不要使用它的界面操作的方式来开发网页，如图2-1所示，这种开发方式已经被摒弃很久了。图2-1 不要使用Dreamweaver界面操作的方式来开发网页
大家不要觉得Dreamweaver那种用鼠标“点点点”的方式开发网页既简单又快速。等你学了一段时间就会发现，你学到的根本就不是技术，而只是软件操作！采用界面操作的方式开发网页，跟当前实际工作中的前端开发是完全脱轨的。这样开发出来的网站，其可读性和可维护性非常差。可读性和可维护性，是Web开发中极为重要的两个东西。相信大家学到后面，应该会有很深的理解。
Dreamweaver是一款不错的开发工具，这里并非反对大家使用Dreamweaver，而是反对大家使用Dreamweaver那种“点点点”的界面操作方式来开发网页。对于刚刚接触HTML的小伙伴来说，Dreamweaver易于上手。不过还是强烈建议大家一定要用“代码方式”写页面，而不是用“鼠标单击方式”写页面。
我自己从事前端开发很多年了，对实际工作还是非常清楚的。在真正的开发工作中，很少有前端工程师使用Dreamweaver，更多的是使用HBuilder、Sublime Text、Vscode、Webstorm。这里给初学者一个建议：使用HBuilder，因为HBuilder上手最简单。学到后期，推荐使用Vscode、Sublime Text或Webstorm，这3个更能满足真正的前端开发需要。2.2 使用HBuilder
不管使用哪款开发工具，在开发的时候，我们都需要新建一个HTML页面，然后再在这个页面中编写代码。
HBuilder是专为前端打造的开发工具，上手非常快，也是初学者的首选。这一节我们来介绍一下怎么在HBuilder中新建一个HTML页面。
① 新建Web项目：在HBuilder的左上方，依次单击【文件】→【新建】→【Web项目】，如图2-2所示。图2-2 新建Web项目
② 选择文件路径及命名文件夹：在对话框中，给文件夹命名，并且选择文件夹路径（也就是文件存放的位置）。然后单击【完成】按钮，如图2-3所示。图2-3 选择文件路径及命名文件夹
③ 新建HTML文件：在HBuilder左侧的项目管理器中，选中test文件夹，然后单击右键，依次选择【新建】→【HTML文件】，如图2-4所示。图2-4 新建HTML文件
④ 选择文件路径及给HTML文件命名：在对话框中选择文件夹路径（也就是HTML文件存放的位置），并且给HTML文件填写一个名字（建议使用英文），然后单击【完成】按钮，如图2-5所示。图2-5 选择文件路径及给HTML文件命名
⑤ 预览页面：在HBuilder上方工具栏中找到【预览】按钮，单击就可以在浏览器中查看页面效果了，如图2-6所示。图2-6 预览页面
最后，对于HBuilder的使用，还有两点要跟大家说明一下。
对于站点、文件、页面等的命名，不要使用中文，而应使用英文。因为，现在绝大多数操作系统都是英文的，如果使用中文，可能会导致无法识别。
对于HBuilder的使用，我们可以在HBuilder上方的工具栏中，依次选择【帮助】→【HBuilder入门】，里面有比较详细的使用教程。第3章 基本标签3.1 HTML结构
图3-1是HTML的基本结构，从中我们可以看出，一个页面是由4个部分组成的。
文档声明： 。
html标签对：。
head标签对：
。body标签对：
。图3-1 HTML基本结构一个完整的HTML页面，其实就是由一对对的标签组成的（当然也有例外）。接下来，我们简单介绍一下这4个部分的作用。
1.文档声明
是一个文档声明，表示这是一个HTML页面。
2.HTML标签
HTML标签的作用，是告诉浏览器，这个页面是从开始，然后到结束的。在实际开发中，我们可能会经常看到这样一行代码。
这句代码的作用是告诉浏览器，当前页面使用的是W3C的XHTML标准。这个我们了解即可，不用深究。一般情况下，我们不需要加上xmlns="http://www.w3.org/1999/xhtml"这一句。
3.head标签
是网页的“头部”，用于定义一些特殊的内容，如页面标题、定时刷新、外部文件等。4.body标签
是网页的“身体”。对于一个网页来说，大部分代码都是在这个标签内部编写的。此外，对于HTML结构，有以下2点要跟大家说明。
对于HTML结构，虽然大多数开发工具都会自动生成，但是作为初学者，大家一定要能够默写出来，这是需要记忆的（其实也很简单）。
记忆标签时，有一个小技巧：根据英文意思来记忆。比如head表示“页头”，body表示“页身”。
下面我们使用HBuilder新建一个HTML页面，然后在里面输入以下代码。
这是网页的内容
浏览器预览效果如图3-2所示。图3-2 实际例子
分析
title标签是head标签的内部标签，其中
在初学阶段，想要熟练掌握HTML和CSS，是不是应该使用记事本来编写呢？
这是初学者最常问的一个问题。我的建议：完全没有必要！因为，使用开发工具编写，虽然有代码提示，但是随着你编写的代码越来越多，你可以牢牢地把HTML和CSS都记住的。3.2 head标签
在上一节中，我们学习了HTML页面的基本结构，也知道head标签是比较特殊的。事实上，只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签内的。
这一节涉及的内容比较抽象，也缺乏实操性，因为这些标签都是在实战开发时才用得到，而练习中一般用不到。那么，为什么要在教程初期就给大家介绍head标签呢？其实，这也是为了让小伙伴们有一个清晰流畅的学习思路，先把“页头”学了，再来学“页身”。
在这一节的学习中，我们只需要了解head标签内部都有哪些子标签，这些标签都有什么用就可以了。记不住没关系，至少有个大概的印象。等我们学到后面，需要用到的时候，再回来翻一下这里。
在HTML中，一般来说，只有6个标签能放在head标签内。
title标签。
meta标签。
link标签。
style标签。
script标签。
base标签。
接下来，我们来给大家详细介绍这6个标签。3.2.1 title标签
在HTML中，title标签唯一的作用就是定义网页的标题。
举例
绿叶学习网，给你初恋般的前端教程。
浏览器预览效果如图3-3所示。图3-3 title标签
分析
在这个页面中，网页标题就是“绿叶学习网”。在学习的过程中，为了方便，我们没必要在每一个页面都写上title。不过在实际开发中，是要求在每一个页面都写上title的。3.2.2 meta标签
在HTML中，meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单地说，meta标签就是用来告诉“搜索蜘蛛”这个页面是做什么的。
其中，在Web技术中，我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。
在HTML中，meta标签有两个重要的属性：name和http-equiv。
1.name属性
我们先来看一个简单实例，代码如下。
通过上面这个简单的例子，我们来总结一下meta标签的name属性的几个取值，如表3-1所示。表3-1 name属性取值
表3-1只是列举了最常用的几个属性值。在实际开发中，我们一般只会用到keywords和description。也就是说记住这两个就可以了，其他的都不用考虑。
2.http-equiv属性
在HTML中，meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码，定义网页自动刷新跳转。
定义网页所使用的编码
语法
说明
这段代码告诉浏览器，该页面所使用的编码是utf-8。不过在HTML5标准中，上面这句代码可以简写成下面这样。
如果你发现页面打开是乱码，很可能就是没有加上这一句代码。在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上这句代码。
定义网页自动刷新跳转
语法
说明
这段代码表示当前页面在6秒后会自动跳转到http://www.lvyestudy.com这个页面。实际上，很多“小广告”网站就是用这种方式来实现页面定时跳转的。
举例
这个页面在6秒之后自动跳转到绿叶学习网首页
分析
我们可以在HBuilder中输入这段代码，然后在浏览器中打开，6秒后，页面就会跳转到绿叶学习网首页。3.2.3 style标签
在HTML中，style标签用于定义元素的CSS样式，在HTML中不需要深入研究，等学到了CSS时我们再详细介绍。
语法
3.2.4 script标签
在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。等学到了JavaScript时我们会详细介绍，这里不需要深究。
语法
3.2.5 link标签
在HTML中，link标签用于引入外部样式文件（CSS文件）。这也是属于CSS部分的内容，这里不需要深究。
语法
3.2.6 base标签
这个标签一点意义都没有，可以直接忽略，我们只需要知道有这么一个标签就行了。3.3 body标签
在HTML中，head标签表示页面的“头部”，而body标签表示页面的“身体”。
在后面的章节中，我们学习的所有标签都是位于body标签内部的。
之前我们已经接触过body标签，下面再来看一个简单例子。
举例
静夜思
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
浏览器预览效果如图3-4所示。图3-4 body标签
分析
的作用是防止页面出现乱码，在每一个HTML页面中，我们都要加上这句代码。此外，这一句必须放在title标签以及其他meta标签前面，这一点大家要记住。
h3标签是一个“第3级标题标签”，一般用于显示“标题内容”，在后面“4.2 标题标签”这一节中我们再给大家详细介绍。3.4 HTML注释
在实际开发中，我们需要在一些关键的HTML代码旁边标明一下这段代码是干什么的，这个时候就要用到“HTML注释”了。
在HTML中，对一些关键代码进行注释有很多好处，如方便理解、方便查找以及方便同一个项目组的人员快速理解你的代码。
语法
说明
又叫注释标签。表示注释的结束。
举例
静夜思
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
在浏览器的预览效果如图3-5所示。图3-5 HTML注释
分析
从上面我们可以看出，用“”注释的内容不会显示在浏览器中。在HTML中，浏览器遇到HTML标签就会进行解释，然后显示HTML标签中的内容。但是浏览器遇到“注释标签”就会自动跳过，因此不会显示注释标签中的内容。或者我们可以这样理解，HTML标签是给浏览器看的，注释标签是给程序员看的。
为关键代码添加注释是一个良好的编程习惯。在实际开发中，对功能模块代码进行注释尤为重要。因为一个页面的代码往往都是几百上千行，如果你不对关键代码进行注释，那么回头去看自己写的代码时，都会看不懂，更别说团队开发了。不注释的后果是，当其他队友来维护你的项目时，需要花大量时间来理解你的代码，这样时间成本
试读结束[说明：试读内容隐藏了图片]