详情
本书根据自己在前后端大量开发中的实战经验，系统化知识，浓缩精华，用通俗易懂的语言直指痛点，让初学者有一个概括性的学习。
全书共分为2大部分，第一部分是HTML知识，主要学习网页的骨架。第二部分是CSS的内容，主要学习网页的样式。除了知识讲解，教程还融入了大量的开发技巧，并且更加注重编程思维的培养，使得学习者能有顺畅的学习思路，这一点是极其重要的。
书名：Web前端开发精品课——HTML与CSS 基础教程
ISBN：978-7-115-41609-4
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
2011~2015年就读于暨南大学信科院计算机科学与技术专业，从事前后端开发一年多，开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具，业余时间阅读大量国内外技术书籍。 现为绿叶学习网（http://www.lvyestudy.com）的站长，该网站用于分享自己在前后端开发中的一些经验，并且制作相关前后端开发的在线教程。这些在线教程在互联网引起广泛关注，极大受到网友推崇。本人编写过大量原创在线教程，每一个教程广受网友称赞与推崇。
本书特色
（1）高度浓缩，由互联网公认最高效最精华的原创在线教程转化而来；
（2）讲解通俗易懂，很多地方用最形象的例子直击知识的本质；
（3）一针见血，直指痛点，过时的知识和思维不会涉及，鲜少用的只是提及一下，减轻学习者负担；
（4）严格按照W3C规范，规避市面上大多数良莠不齐的书籍中的思维误区；
（5）结合互联网最好的在线教程进行同步学习；
（6）大量把个人经验分享到其中，第一人称角度，文字有温度，不像大多数书籍机械化地讲解；
（7）本书附有大量最实用的前端开发工具、手册等；
区别于同类图书
（1）由极受欢迎的在线教程（作者编写放上互联网）转化而来，即本书内容有过半年的互联网考验，被公认为互联网最好的HTML和CSS教程之一；
（2）语言简练，注重实战，规避市场上大多数同类书籍大篇幅的讲解技术历史；
（3）结合自己开发经验，大量开发技巧贯穿全书，这一点是大多数同类书籍所没有的；
（4）通俗易懂，口语化但不失严谨，这一点是大多数书籍所没有的；
本书分为两大部分：第一部分是HTML入门，主要介绍网页结构基础知识；第二部分是CSS入门，主要介绍网页样式方面的基础知识。此外，本书还融入了大量的开发技巧，更加注重编程思维的培养，使得学习者能有顺畅的学习思路。
作者结合自己的网站前后端开发中的大量实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。本书适合Web前端开发初学者、大中专院校相关专业学生，以及想要系统掌握Web开发基础知识的读者学习参考。
近年来，Web前端技术飞速发展，日趋重要。在Web前端技术中，HTML和CSS是最基础的知识。
本书内容源于笔者在绿叶学习网分享的两个超人气在线教程。这两个教程被公认为是互联网最好的入门教程，广受学友称赞。本书对这些内容进行深加工，使其更加完善。为了避免前端新人走太多的弯路，笔者把前端碎片化的知识系统化，指出许多书籍中所没有提到的学习误区，并且提供给前端初学者一个学习思路的流程。除了注重知识的讲解，更加注重开发技巧和思维。
① 高度浓缩，对于过时的知识和思维不会过多涉及，减轻学习者负担。
② 通俗易懂，用最贴心形象的语言直指技术本质。
③ 同步学习，将本书内容结合在线教程同步学习，提高效率。
④ 贴近读者，结合自己学习经历，文字有温度。
⑤ 直击痛点，规避很多学习中的思维误区，如使用HTML属性定义样式、Dreamweaver界面操作开发。
① Web前端开发初学者。
② 大中专院校相关专业学生。
③ 想要系统学习、有一定基础的Web爱好者。
本书中的代码请从www.epubit.com.cn本书页面下载。
本书在编写的过程中得到了很多人的帮助。特别感谢杨炳晔女士的不断鼓励与支持，非常感谢陈志东先生给笔者诸多有用的建议以及对稿件细致的审阅。此外感谢邵婵、程紫梦、孙鸿焱、方明晨等人给予的莫大帮助与支持。
由于作者水平有限，书中难免有错漏之处，读者如果遇到问题或有任何意见和建议，都可以到绿叶学习网（http://www.lvyestudy.com）或者以邮件（lvyestudy@foxmail.com）与编者联系。
编者
在HTML入门教程学习之前，有必要跟大家讲一些网站开发的相关知识。了解这些知识，对你以后网站开发之路如何走、该学习些什么，是非常有用的。同时也避免你走太多的弯路。
网页制作是Web 1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互，且仅仅供读者浏览的网页，例如一篇QQ日志、一篇博文等展示性网页。在Web 1.0时代，用户能做的唯一一件事就是浏览这个网站的文字图片内容，不能像现在一样评论交流（缺乏交互性）。现在大多数人都听过“网页三剑客Dreamweaver+Fireworks+Flash”吧，这个组合就是Web 1.0时代的产物。
注：网页三剑客指的是“Dreamweaver、Fireworks和Flash”。
“前端开发”是从“网页制作”演变而来的。
从2005年开始，互联网进入Web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在Web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是指用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登录新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。Web 2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那远远不能满足需求。现在网站开发无论是开发难度，还是开发方式，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“Web前端开发”。
所以，处于Web 2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站的问题也非常多，例如代码冗余、维护困难（学习到后期，你会知道为什么不用这个组合了）。
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由三部分组成：结构、表现和行为。现在网页的新标准是W3C，目前的模式是HTML、CSS和JavaScript，如图1-1所示。
图1-1 前端最核心三种技术
（1）HTML是什么
HTML，全称“Hyper Text Markup Language”（超文本标记语言），简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“层叠样式表”。以后我们在别的地方看到“层叠样式表”或“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门脚本语言。
（4）HTML、CSS和JavaScript的区别
我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢？
“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”
这不是等于没说吗？好吧，我给大家打个比喻。我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、给地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。现在大概懂了吧。
回到实际例子中去，看一下绿叶学习网的导航条。我们先分析一下“前端技术”这一栏目具有的基本特点，如图1-2所示。
① 导航条文字颜色是白色。
② 大小是14px。
③ 背景颜色是绿色。
④ 鼠标指针移动到上面时颜色会变成深绿色。
这些效果是怎么做出来的呢？其实思路就跟上面介绍的“建房子”一样。我们先用HTML搭建网页结构，默认情况下，字体、字体颜色、字体大小和背景颜色如图1-2所示。然后我们通过CSS修饰一下，改变其字体、字体大小、字体颜色和背景颜色，得到如下的效果图（见图1-3）。
图1-2 仅仅使用HTML的文字
图1-3 在HTML基础上加入CSS的文字
最后，我们通过JavaScript定义一个鼠标行为，就是鼠标指针移动到上面的时候，背景颜色会变为深绿色，效果如图1-4。
图1-4 加入JavaScript特效的文字
现在大家就知道一个缤纷多彩的网页究竟是怎样做出来的，也知道为什么前端技术最核心的是HTML、CSS和JavaScript了吧？
前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三种，也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习HTML5、CSS3、Ajax、SEO等。
（1）AJAX
AJAX，即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个页面。
AJAX是前后端交互的技术，主要是在前端实现（不懂？！没关系，我们在AJAX章节中会讲解到）。
（2）SEO
SEO，即“Search Engine Optimization”（搜索引擎优化）。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。
简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到。我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你的网站有更多人浏览吧。
如果我们学习完前端技术，其实也差不多可以开发属于自己的网站了。不过这个时候开发出来的网站是一个静态的网站，唯一的功能是供用户浏览，缺乏与用户的交互性，用户能操作的东西不多。因此，如果我们要开发一个用户体验更好、功能更加强大的网站，就要学习一下后端技术。
那后端技术究竟是怎样的一门技术呢？举个简单的例子，很多大型网站都有注册功能，只有用户注册了之后才具有某种权限。例如你要使用QQ空间，你就要注册一个QQ才能使用。这样的功能就是用后端技术实现的。再有，淘宝网不是有很多商家吗？这些商家有各种各样的商品，这些庞大的数据只能使用后端技术中的数据库技术才能实现。
PHP是一种通用开源脚本语言。其语法吸收了C语言、Java和Perl的特点，易于学习，使用广泛，主要适用于Web开发领域。
JSP技术有点类似ASP技术，它是在传统的网页HTML文件中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件。用JSP开发的Web应用是跨平台的，既可以在Windows系统下运行，也能在其他操作系统（如Linux）上运行。
ASP.NET的前身就是我们常说的ASP技术。我们的官网绿叶学习网就是使用ASP.NET开发的。对于新手要注意一点，ASP是落后20年的技术了，我们应该学习的是ASP.NET而不是ASP。
以上三种都是动态网页技术，大家可以到百度百科中详细了解一下动态网页技术。
很多人都以为“网站就是很多网页的集合”，这个理解太恰当了。准确来说，应该是“网站是前端与后端的结合”。
图1-5 常见的Web技术
从上面我们可以看出，Web技术实在是太多了，很多同学都不知道怎么入手，上网问别人，回答又五花八门。以下是本书的推荐路线。
HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX
这条路线是一条比较理想的、从前端开发到后端开发的学习路线，你别看这条路线那么长，其实我是截断了来定制的，要掌握的也就几门技术：HTML、CSS、JavaScript、ASP.NET（PHP）、Ajax等。
在HTML刚刚入门的时候，你不需要一定要把HTML学到精通才去学CSS入门教程（这也不可能），这是一种最笨又最浪费时间的学习模式。所以对于初学者，千万别想着精通了一门技术，再去精通另外一门技术。你要是能做到了，我相信很多人都拜你为师了。因为技术这种东西是要“通十行”才会把一行给通了。
如果走别的路线，你可能将会走很多很多的弯路。这条路线是本人从前端技术初学者开始，到开发了绿叶学习网、广州智能工程研究会网站、毕业选题系统、大量在线工具等项目以及阅读大量技术书籍之后的心血总结。当然，这条路线也只是一个建议，并非硬性的。
接下来，让我们踏入前端开发的第一步——HTML入门教程。
1．什么叫XHTML+CSS+JavaScript？
市面上很多书名都叫“DIV+CSS”或“HTML+CSS”，其实这两个叫法都是不严谨的，准确来说是“XHTML+CSS”。但是叫的人多了，大家也知道是那个意思，所以就约定俗成干脆称为“DIV+CSS”或“HTML+CSS”。所以以后，我们看到“DIV+CSS”或“HTML+CSS”，心里也应该知道指的是“XHTML+CSS”。然而什么叫XHTML，我们在后面的章节会介绍，读者现在不必惊慌。
2．常见的JavaScript框架应该学习哪个？
我们知道，HTML、CSS和JavaScript是前端技术中最基本的三个元素。HTML和CSS，它们没有别的框架，但是对于JavaScript来说，它却有很多框架，例如：
“jQuery、ExtJS、Dojo、YUI……”
那对于初学者来说，应该选择哪个JavaScript框架比较好呢？当然非jQuery莫属了。jQuery是全球最流行的JavaScript框架，是最简单易懂、最适合初学者入门的JavaScript框架，没有之一。
HTML，全称“Hyper Text Markup Language”（超文本标记语言），它是制作万维网页面的标准语言。
HTML不是一门编程语言，而是一门描述性的“标记语言”。HTML最基本的语法如下：
<标签符>内容</标签符>
标签符一般都是成对出现，有一个开始符号和一个结束符号，结束符号只是在开始符号的前面加一个斜杠“/”。当浏览器收到HTML文本后，就会解释里面的标签符，然后把标签符相对应的功能表达出来。
例如，用< em >< /em >标签用来定义文字为斜体字；用< strong >< /strong >来定义文字为粗体。当浏览器遇到标签对时，就会把标签中所有文字用斜体显示出来。
<em>绿叶学习网</em>
当浏览器遇到上面这行代码时，会得到如下斜体文字效果，见图1-6。
图1-6 浏览器解析代码效果
HTML要学习什么呢？用一句很简单易懂的话来说就是：学习HTML就是学习各种标签，就是学习网页的“骨架”。
标签有文字标签、图像标签、音频标签、表单标签等。HTML这门语言就是一门描述性的语言，就是用标签来说话的。举个例子：如果你要在浏览器显示一段文字，你就用到段落标签p；如果你要在浏览器显示一张图像，就要用到图像标签img……针对对象不同，使用的标签不同。假如你想要在浏览器显示一张图片，你用段落标签p就不可能将图片显示出来。所以，学习HTML说白了就是学习各种各样的标签，然后针对你想要显示的内容来使用相应的标签，并且在相应的地方用对标签。
此外，很多时候我们也把“标签”说成“元素”，例如“p标签”说成“p元素”，这说的是一个意思，只是叫法不同而已。而“标签”的叫法更形象地说明了HTML元素是用来“标记”的，来标记这是一段文字还是一张图片，从而让浏览器将你的代码解析出来而展示给用户看。
在1.1节“Web技术简介”中，我们讲到从前端技术到后端技术的学习流程：
HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX
在HTML入门学习之前，我们有必要给初学者说明一下：在接下来的HTML入门教程学习中，我们仅仅是学习标签，不会像别的书籍那样将HTML和CSS进行混合讲解。
本书是我的心血积累，在编写的时候字斟句酌。从一开始学习HTML的时候，我就在记录自己当初作为初学者时所遇到的一些问题，所以我很了解作为初学者的你的心态，也很清楚你应该怎么样才能快速而无阻碍地学习。我是站在初学者的角度，而不是站在已经学会的角度来编写本书的。有一句话说得好，如果你已经站在山顶上了，当初在爬山的时候你若缺少细心体会，这时你早就忘记作为攀岩者艰苦攀登时的心情了。
对于本书中的每一句话，我都精心编写，审阅了无数遍，尽量把精华呈现给大家。所以大家在阅读的时候，不要图快，尽量把速度放慢，把每一个概念都理解，千万别指望什么“48小时精通HTML+CSS”。别信这种鬼话。
当然，个人能力有限，书中疏漏和错误在所难免，也欢迎大家指正。
有一种学习模式是值得推荐的：学技术，泛读十本书不如精读一本书十遍。这句话适用于学习任何课程。挑一本最精华的书，把这本书当做主体，然后辅以其他的书籍来弥补这本书的缺陷。
大家在学习过程中遇到任何困难，都可以到绿叶学习网的论坛上面提问，届时会有很多热心的网友帮忙喔。如果大家发现教程中有任何错误，也希望大家发邮件给本人（lvyestudy@foxmail.com），以便我把教程做得更加完善。
在HTML入门教程中，我把一些HTML学习的思想和技巧，如“HTML语义化”等穿插在各个章节，以便大家更好地提高技能。
学习HTML不需要任何编程基础，哪怕你是一个小学生都可以学习。当年我的计算机网络课的教授说，他见过有些小学生都会做网页了！当时我立刻晕了过去，因为当时我还不懂什么HTML标签。后来自己学到一定程度才知道为什么大学课程没有涉及HTML这些东西，因为这些是完全可以自学的，跟离散数学、算法分析、数据结构那些知识完全没办法比。也就是说，网站开发的基本技术（如HTML和CSS）是非常容易学的，不要抱怨自己不会，那是你不够努力。如果你是大学生，你还不赶紧努力？！ 在接下来的学习，你没有理由再抱怨难学了。
可以把基本的网页都做出来了，例如一篇博客。
不多，努力学的话，3到5天就学得很好了。当然仅仅学完这门教程，也只是入门程度。
（1）从Web 1.0到Web 2.0，网页制作已经变为前端开发了。现在对于前端开发，你要学的不是什么“网页三剑客”，而是HTML+CSS+JavaScript。
（2）前端技术核心元素的是HTML、CSS和JavaScript，但是我们还要学习一些AJAX、SEO知识。
（3）前端技术只能开发静态网页，而进一步学习后端技术后，你能开发一个用户交互性更好、功能更加强大的网站。
（4）后端技术有PHP、JSP、ASP.NET。
（5）学习路线：HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX
（1）学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签。
（2）HTML标签即“HTML元素”。
根据个人经验，目前比较好的前端开发工具有Dreamweaver、Subline Text和Visual Studio等。
Dreamweaver，简称DW，是Adobe公司的一款非常优秀的网页开发工具，并且深受广大用户（特别是初学者）的喜爱。现在最新的版本是Dreamweaver CC。
对于初学者来说，Dreamweaver是最理想的开发工具，是广大前端入门者的首选。但是要强调一下，如果选择了Dreamweaver作为开发工具，我们一定不要使用Dreamweaver那种传统的、使用操作界面的方式来开发网页。这种开发方式已经被摒弃很久了。笔者当初刚刚接触前端开发的时候，也是深受其害。当时跟着一个视频学，第一步点击哪里，第二步点击哪里……点点点，全部是用鼠标来点，点到我头都晕了。
大家不要觉得Dreamweaver用鼠标操作的方式来制作网页既简单又方便。学了一段时间你会发现，你学到的根本不是知识，而只是开发网页时你应该点哪里！还有，当你用Dreamweaver鼠标操作的方式来制作网页时，你会发现弊端何其多！特别是冗余的代码，一堆一堆的，让开发出来的网站难以在后期进行维护。
当然，Dreamweaver还是挺不错的一个开发工具，我并非反对大家使用Dreamweaver，而是反对大家使用Dreamweaver界面操作的方式来制作网页。对于刚刚接触前端开发的新手来说，可以使用Dreamweaver作为开发工具，不过本人强烈建议你一定要用代码去写网页，别用鼠标点击的方式进行。还有，我可以很清楚地告诉你，现在大部分网站都不用鼠标操作实现的，而是靠编写代码。哪怕人家用Dreamweaver开发，都不会单纯采用鼠标点击的方式。
不过话说回来，Dreamweaver依然是初学者的首选开发工具，简单方便。但是我们一定不要使用“点点点”方式来开发网页，切记。
Sublime Text凭借其漂亮的用户界面和极其强大的功能，被誉为“神级”代码开发工具。
Sublime Text 支持多种编程语言的语法高亮，拥有优秀的代码自动完成功能。此处，它还拥有代码片段（Snippet）的功能，可以将常用的代码片段保存起来，在需要时随时调用。Sublime Text 支持 VIM 模式，可以使用VIM模式下的多数命令。
Sublime Text 还具有良好的扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能，支持强大的多行选择和多行编辑。
该编辑器在界面上比较有特色的是支持多种布局和代码缩略图。利用右侧的文件缩略图滑动条，可以方便地观察当前窗口在文件的哪个位置。
如果你已经有一定的前端基础，我相信Sublime Text更加适合你。Sublime Text可以让你快速地进行开发，强力推荐！
Microsoft Visual Studio，简称VS，是微软公司的开发工具包系列产品，是目前最流行的Windows平台应用程序的集成开发环境（IDE）。所谓的集成开发环境，就是指用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面工具。这么复杂，谁看得懂呀？哎，简单来说，Visual Studio是一个具有很多用途的开发工具，它可以用来开发功能很强大的网站。这下懂了吗？
Visual Studio是笔者推荐的三款开发工具中功能最强大的，但是使用起来也相对复杂。不过用习惯了之后，开发效率还是非常高的。Visual Studio不仅可以开发静态网页，还非常有利于开发动态网页。在开发动态网页方面，可以说Visual Studio比Dreamweaver更胜一筹。前面我们说过，静态网页一般是没有交互性的，用户能做的也仅仅是浏览网页。而在动态网页中，作为用户，我们可以参与评论交流、上传文件，以及使用与服务器交互。
这三款开发工具，大家可以根据自己的实际情况选择一下。
不管你使用何种前端开发工具，Dreamweaver、Sublime Text，还是Visual Studio，在进行页面开发的时候，我们都需要新建一个页面，然后再在这个页面中进行代码开发。
对于新手来说，我们首选Dreamweaver作为开发工具。在Dreamweaver中新建一个HTML页面，只需要两小步就行。
【第1步】：打开Dreamweaver，界面如图2-1。
【第2步】：在界面中部的“新建”中找到“HTML”，点击后界面如图2-2。
之后，我们就可以在代码处编写网页代码了。这里只是对Dreamweaver进行一个简单的介绍。关于Dreamweaver的更多操作，如新建站点、新建CSS文件等，在互联网上有大量的资源。大家在接下来的学习中，要一边学习代码，一边摸索开发工具的使用。
图2-1 Dreamweaver打开界面
图2-2 Dreamweaver新建HTML页面
关于Dreamweaver，我们只需要掌握几个基本操作就行了，但是大家一定要注意，不要用鼠标“点点点”的方式去生成代码。对于网页代码，我们都尽量手写。
对于Sublime Text和Visual Studio这些编辑器的用法，各种快捷键等，我们同样能够在互联网上找到大量的资源，这里不再赘述。
