从零开始：HTML5+CSS3快速入门教程

图书在版编目（CIP）数据

从零开始：HTML5+CSS3快速入门教程 / 郝金亭，史笑颜著．-- 北京：人民邮电出版社，2020.5

ISBN 978-7-115-52694-6

Ⅰ．①从…　Ⅱ．①郝… ②史…　Ⅲ．①超文本标记语言-程序设计-教材②网页制作工具-教材　Ⅳ．①TP312.8②TP393.092.2

中国版本图书馆CIP数据核字（2019）第268562号

著　　　　郝金亭　史笑颜

责任编辑　俞彬

责任印制　马振武

人民邮电出版社出版发行　北京市丰台区成寿寺路11号

邮编　100164　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

北京捷迅佳彩印刷有限公司印刷

开本：787×1092　1/16

印张：15.25

字数：254千字

印数：1 - 3 000册

2020年5月第1版

2020年5月北京第1次印刷

读者服务热线：（010）81055410　印装质量热线：（010）81055316

反盗版热线：（010）81055315

广告经营许可证：京东工商广登字20170147号

内容提要

本书全面讲解使用HTML5和CSS3开发网页的过程，使读者能够迅速掌握开发静态页面的核心知识及对应的编程能力。

本书共9章，第1章用一个完整的案例讲解了静态页面制作的流程；第2章讲解常用的HTML元素；第3章讲解将CSS引入HTML文件的方法，以及常用的CSS样式；第4章讲解盒模型的构成；第5章讲解浮动布局；第6章讲解改变元素位置的定位方式；第7章讲解表单元素和表格元素；第8章讲解HTML5的新增元素和CSS3的新增样式；第9章通过制作一个完整的购物网页，讲解网页制作过程中的重点和难点。

本书配有精选的一线互联网公司的面试真题，供读者自我检测使用，并附有HTML标签与CSS样式的快速查看表。本书适合零编程基础的读者阅读，也适合具备一些编程基础且想要提升编程能力的读者阅读。

前言

本书特色

从零开始，入门级讲解：本书从零开始讲解，为浏览器和工具提供了详细介绍与下载途径，保证零基础的读者能够顺利入门。

章前设立学习任务，让读者心中有数不迷茫：每一章都配有总体介绍与章前任务，让读者明确学习目标，方便读者检验学习成果，做到心中有数不迷茫。

知识点与案例精密结合：对于编程初学者来说，阅读代码和语法是件艰涩的事情。本书在讲解每一个知识点时都会配合案例进行说明，图文并茂，使读者在实际操作中加深对代码的理解。

核心内容反复讲解与练习：本书不是一本全面的工具手册，而是在有限的篇幅内讲解网页制作中最重要、使用频率最高的HTML元素和CSS样式，使读者集中精力学习核心知识点，并通过案例进行反复练习，力求在最短时间内提升读者的编程能力。

提供来自大公司的面试真题：本书准备了部分一线互联网公司的面试真题，供读者自我检测使用，为之后获取相关工作机会打下坚实的基础。

本书内容

第1章　从浏览器和编辑器开始，讲解制作网页的必备工具，给读者提供学习建议和网络资源。本章将带领读者完成一个完整的页面，无论读者之前有没有编程基础，都能在学习本章之后完成自己的第一个页面。

第2章　讲解HTML的语法和常用的HTML标签。经过本章的学习，读者可以学会在网页上显示图片、链接以及不同类型的文本。

第3章　讲解CSS的语法知识以及文本样式，包括改变文字的字体、字号、颜色，设置背景图片、背景颜色，控制图片的位置和显示方式，给不同状态的链接设置不同样式等。经过本章的学习，读者可以学会设置网页中的文本样式。

第4章　讲解盒模型的构造及每一部分的用法，讲解元素的类型及类型转换。盒模型是网页中最重要的概念之一，经过本章的学习，读者将初步学会控制元素的位置与显示方式。

第5章　讲解实现浮动布局和清除浮动的方法。经过本章的学习，读者能够将多个块元素置于同一行显示。

第6章　讲解4种不同的定位。定位是规定元素在网页上位置的重要手段，经过本章的学习，读者可以实现单独地、不受其他元素影响地改变某一元素的位置，还可以让元素相对视窗位置不变。

第7章　讲解表格与表单的写法。经过本章的学习，读者可以学会在网页上制作课程表和注册页面。

第8章　讲解HTML5的新元素和CSS3的新样式。经过本章的学习，读者可以学习视频、音频等多媒体元素，以及阴影、动画、过渡等新增样式。

第9章　通过制作一个完整的复杂页面，讲解网页制作过程中的难点和解决办法。

后续学习

本书专注于编程能力的提升，目的是让初学者在最短时间内掌握静态页面的核心知识，以达到能够编写完整页面的水平。因此，本书忽略了一些不常用的元素和属性。在学完本书之后，读者可以通过“w3school在线教程”网站继续学习。

联系作者

作者在编写过程中，通过阅读大量资料去核实本书所述内容的准确性，对每个案例反复修改，力求让读者得到最好的学习效果。由于时间有限，书中难免有疏漏和不妥之处，欢迎读者发送邮件至18811132138@163.com与我们联系，帮助我们改正提高。本书为读者创建了共同学习的QQ群，群号为544028317，欢迎各位读者加入。本书使用的案例素材可在QQ群中获取。

致谢

作者在编写过程中，得到了很多朋友和伙伴的帮助。感谢编辑在内容设计方面的建议，感谢设计师周燕华老师为本书提供精彩的案例设计，感谢赵莹玥、卜若琪同学在资料收集和代码整理过程中提供的帮助。

编者
2019年9月

第1章 初识HTML5——完成第一个HTML5页面

欢迎踏上HTML5的学习之旅！

本章通过制作一个比万能的“Hello，world！”更加复杂但有趣的HTML5欢迎仪式界面，让读者初窥HTML5的概貌，直观而清晰地看到一个完整的HTML5页面是怎样一步步诞生的。

本章任务

配置HTML5开发环境，了解HTML5页面的制作流程，制作一个图1-1所示的HTML5页面，并在浏览器中打开。

1.1 准备HTML5开发环境

1.1.1 浏览器的使用

网页是在浏览器上呈现的。作为网页的载体，目前最受欢迎的浏览器有Chrome、Mozilla Firefox、Microsoft Edge、Opera、Safari等。不同的浏览器展示同一文档的页面时，会存在细微的差别，观察这些差别并做出适当调整，非常有助于开发者学习。

本书选择Chrome浏览器进行讲解。Chrome的界面简洁，渲染速度快，并具备很完善的开发者工具，是开发者最常用的浏览器之一。

下面来学习Chrome浏览器的安装和使用。

1. 下载并安装Chrome

在Chrome的官方网站免费下载Chrome的安装程序，如图1-2所示。

2. 使用Chrome的开发者工具

开发者工具可以帮助开发者查看网页代码、快速进行调试和查找错误。开发者应该了解和掌握这个强大的功能。

在想要查看的页面上单击右键选择【检查】，或直接按快捷键F12，会弹出一个窗口，开发者可以在这里查看页面元素，如图1-3所示。

有两种查看页面元素的方法：第一种是通过源代码查看；第二种是选择页面中某一位置查看。

（1）通过源代码查看元素的属性以及元素在浏览器中的位置。

在弹出窗口的左侧选择【Elements】即可查看页面的源代码，单击想要查看的元素，弹出窗口右侧【Styles】界面就会显示该元素的属性，如图1-4所示。

在【Styles】界面中可以查看被选中元素的CSS属性，还可以查到被选中元素的某个CSS属性来自于哪个CSS文件，使编码调试时修改代码变得非常方便。

提示

这里提到的CSS属性、元素等新概念，将在后续的章节中进行详细讲解。

【Styles】界面旁边是【Computed】界面，如图1-5所示。【Computed】界面展示元素的盒模型以及经过计算之后浏览器使用的CSS属性。属性的计算由浏览器自动进行，这是浏览器渲染页面时一个必不可少的过程。

（2）选择页面的某一部分查看对应的元素。

打开开发者工具，如图1-6所示，单击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，在页面中单击需要查看的位置，此时【Elements】界面中文档对应的元素就会被标识出来（黄框位置）。

1.1.2 下载编辑器

目前，市面上比较流行的编辑器有Atom、Sublime、eBrackets、HBuilderX、VSCode等。其中，最适合初学者使用的莫过于HBuilderX。它的优点是界面简洁、操作简单并且支持中文，能够有效地降低学习成本，为不熟悉编程的初学者提供良好的开发支持。HBuilderX没有烦琐的安装步骤，下载即可运行，可以在HBuilderX的官方网站免费下载HBuilderX的安装程序，如图1-7～图1-8所示。

在图1-9所示的下载弹窗中，根据计算机系统的不同，需要在【正式版】下选择相应的HBuilderX版本。Windows系统用户请选择Windows版下面的标准版，IOS系统用户请选择MacOS版下面的标准版。

下载完成后，解压压缩包，双击HBuilder.exe即可打开编辑器。

提示

如果文件不显示后缀名，请在资源管理器中的【查看】下选中【文件扩展名】。

1.1.3 HTML5的学习方法

学习编程绝不是一件容易的事情。在正式开始学习之前，本书为读者制定了3个准则。

（1）动手去敲每一个案例的代码，并在每一章的学习之后检验自己的学习成果。

从现在开始，请牢牢记住，动手敲的代码越多，真正学到的就越多。本书在每章之前都设置了“本章任务”，仔细阅读它，读者将明白在本章的学习中需要达成的目标。本书为每个知识点都配有案例，读者需要在自己的计算机上敲出案例中的代码并查看结果。只有将每个案例都练习过，才能保证读者有足够的能力完成本章任务。

（2）善用搜索工具，加入相关技术群。

任何学习之路都不可能是一帆风顺的。遇到问题时，要积极寻找解决方法，如利用百度等搜索引擎进行搜索，加入相关技术群参与群里的讨论。欢迎大家加入本书的读者QQ群，群号为544028317。

（3）阅读大量的优秀网页作品。

掌握了基础知识之后，要多去看一些优秀的网站，如淘宝、百度等，可以在开发者模式下查看这些网站的代码结构，还可以试着去借鉴它们的布局，这无疑是学习HTML和CSS最好的方式了。

1.2 第一个HTML5页面

1.2.1 用HBuilderX创建一个项目

用HBuilderX创建一个HTML5的项目，单击【文件】→【新建】→【项目】，如图1-10所示。

在弹出的【新建项目】中，填写项目名称，在【位置】中单击【浏览】可以选择项目存放的位置，勾选【基本HTML项目】作为当前模板，如图1-11所示。

创建好的项目中包含css文件夹、img文件夹，它们分别用来存储css文件和项目中的图片，index.html表示项目的首页，如图1-12所示。

在文件或文件夹上单击右键，选择【删除】即可删除不需要的文件；选择【打开文件所在目录】可以打开文件在文件夹中所在的位置。

1.2.2 在页面中写入内容

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Document</title>
    </head>
    <body>
      <h1>Let's start our first page！</h1>
      <p> 欢迎大家来到HTML乐园，通过本书的学习，你将获得独立完成静态页面的技能，
      一起来开启你的第一个页面吧！
      </p>
      <div>Start</div>
    </body>
</html>

<body>
    <div>
     <h1>Let's start our first page！</h1>
     <p> 欢迎大家来到HTML乐园，通过本书的学习，你将获得独立完成静态页面的技能，
   一起来开启你的第一个页面吧！
     </p>
     <div>Start</div>
    </div>
</body>

<body>
    <div class="container">
     <h1>Let's start our first page！</h1>
     <p> 欢迎大家来到HTML乐园，通过本书的学习，你将获得独立完成静态页面的技能，
   一起来开启你的第一个页面吧！
     </p>
     <div class="btn">Start</div>
    </div>
</body>

双击index.html打开页面，项目中已经默认生成了HTML5页面所需要的结构，代码如下。

第1行代码不是HTML标签，而是一个声明，告诉Web浏览器当前页面应该使用哪个HTML版本进行解析。

<html>标签是整个页面的最外层围墙，用来“包裹”页面的所有内容。<head>标签相当于页面的身份证，包括了页面的所有重要信息，这一部分内容不会呈现在页面上，浏览者不能直接看到。<body>部分是页面的主体部分，包含了所有在浏览器上要呈现的内容信息，也就是浏览者可以看到的内容。

在<body>标签内加入标题和内容，标题使用<h1>标签，内容使用<p>标签，按钮使用<div>标签。不同的标签将在浏览器中呈现不同的样式，代码如下。

此时，网页的结构已经完成了，按Ctrl+S组合键保存文件，然后单击工具栏中的浏览器标志，如图1-13所示，即可使用浏览器打开页面，运行结果如图1-14所示。

到目前为止，<body>标签中的内容部分已经完成了。<body>标签就像一个房间，如果将内容元素直接放入<body>标签中，就像是房间里散落一地的玩具，不易控制。因此，要创造一个透明的盒子，将所有元素都收纳起来。

<div>标签就是这个透明的盒子，它在没有添加CSS样式的时候并不会在浏览器上显示身影，但是可以将元素收纳在盒子内部，代码如下。在后面的章节中，还将详细介绍如何控制盒子的颜色、设置盒子的边框等。

此时，文档中有两个<div>标签，可以使用class属性给<div>标签增加类名以作区分，代码如下。

1.3 用CSS美化页面

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Document</title>
      <style>

      </style>
    </head>
    <body>
      <div class="container">
        <h1>Let's start our first page！</h1>
        <p> 欢迎大家来到HTML乐园，通过本书的学习，你将获得独立完成静态页
      面的技能，一起来开启你的第一个页面吧！
        </p>
        <div class="btn">Start</div>
      </div>
    </body>
</html>

要在页面中使用CSS，需要先在<head>标签中创建一个<style>标签，页面中的样式都放在<style>标签内部，代码如下。

1.3.1 给页面添加背景

html，body{
   height:100%;
   margin :0;
   padding :0;
}

 .container{
   border-top : 1px solid transparent;
}

body{
   background :red url(img/index.jpg) center center;
}

body{
   background :red url(img/index.jpg) center center;
   background-size :cover;
}

准备一张合适的图片作为素材。鉴于背景图片需要撑满浏览器的整个屏幕，如果图片尺寸过小，就容易显得模糊不清，建议使用1600×1200px以上的图片。

在项目中的img文件夹上单击右键，选择【打开文件所在目录】，即可打开对应的文件夹，如图1-15所示。

将图片命名为index.jpg，并且放入到项目的img文件夹中，如图1-16所示。

提示

前面讲到，img文件夹放置整个项目的图片资源，这是因为HTML文档使用图片资源的方式不同于在Word中直接插入图片的方式，HTML文档中的图片不能直接嵌入到文档的内部，而是采用引入外部图片资源的方式。也就是说，在网页中展示任何图片都需要在HTML文档以外放置相应的图片文件，网页中写入的是图片位置的路径（CSS3和Canvas绘制的图片除外）。事实上，在HTML文档中，不仅图片资源如此，使用音频、视频等多媒体资源时同样采用从外部引入资源的方式。

将整个网页的高度设定为100%，即撑满整个浏览器，为了更准确地控制元素，将默认的margin和padding属性值都设为0，运行结果如图1-17所示。CSS代码如下。

由于margin在父子元素之间具有传递性，<p>标签的上边距经过最外层的<div>标签，传递给了<body>标签，导致页面高度增大，出现滚动条。因此，要给class名为“container”的<div>元素设置一条透明的上边框，以此来阻止margin的传递，CSS代码如下。

此时，页面撑满整个浏览器，运行结果如图1-18所示。

通过给body元素设置背景的方式，给页面设置背景图片并且居中显示。url中写入图片相对于页面的路径，本案例的图片存放在img文件夹中，并且img文件夹和index.html处于同一文件夹中，所以路径是“img/图片名称”，运行结果如图1-19所示。CSS代码如下。

提示

相对路径写法

每使用一次“..”，就上溯一层父目录，如果想上溯两层父目录，可以写成“../..”。请严格地使用HTML语言中的符号，文件之间使用“/”隔开，所有字符应该是英文字符，不可以用“\”来代替“/”。

由图1-19可以看到，图片在横向未撑满全屏，使用background-size属性使背景充满整个屏幕，运行结果如图1-20所示。CSS代码如下。

1.3.2 将页面中的文本元素居中

body{
   background:red url(img/index.jpg) center center;
   background-size :cover;
   position : relative;
}

<body>
   <div class="container">
      <h1>Let's start our first page！</h1>
      <p> 欢迎大家来到HTML乐园，通过本书的学习，你将获得独立完成静态页面的技能，一起
      来开启你的第一个页面吧！
      </p>
      <div class="btn" id="start">Start</div>
    </div>
</body>

.container{
   position :absolute;
   top:50%;
   text-align:center;
   width: 100%;
}

.container{
   position :absolute;
   top:50%;
   text-align:center;
   width: 100%;
   transform:translateY (-50%);
}

观察页面可以发现，自然状态下，元素都是自上而下、从左到右分布的。在页面内容较少的情况下，这样的自然排序方式无法突出文字内容。

为了突出文字内容，可以将文字内容移动到页面的中心位置。此时，把元素装在盒子里的做法将起到非常重要的作用，只需把盒子移到页面中间即可，不必去移动每一个元素。

给body元素设置相对定位属性，这一步决定了之后定位的参考对象，CSS代码如下。

以body元素为基准，设置外部div的position为absolute，实现绝对定位。将div元素的宽度设为100%，设置top属性值为页面高度的50%，设置text-align属性值为center，使文字水平居中，HTML代码如下。

CSS代码如下。

调整后呈现的网页效果如图1-21所示。

网页中的文字内容仍处于偏下的位置，想要将其调至完全居中，使用translateY将div元素上移自身高度的50%，CSS代码如下。

此时，页面中的文字内容完全居中，运行结果如图1-22所示。

1.3.3 调整页面文字的字体和颜色

h1{
   line-height:90px;
   color:#ffffff;
   font-size:50px;
}
p{
   line-break:80px;
   font-size:22px;
   color:#ffffff;
}

经过前面的学习，文字内容已被成功移动到页面的中心位置。接下来，调整文字的大小和颜色，使页面中的文字更加醒目和美观。

使用font-size属性设置字体的大小，使用color属性设置字体的颜色，运行结果如图1-23所示。CSS代码如下。

1.3.4 给按钮添加边框和背景色

.btn{
   width: 200px;
   height: 60px;
   background-color : #7cacae;
}

.btn{
   width: 200px;
   height: 60px;
   background-color : #7cacae;
   color: #fff;
   font-size:24px;
   line-height: 60px;
}

.btn{
   width: 200px;
   height: 60px;
   background-color: #7cacae;
   color: #fff;
   font-size:24px;
   line-height: 60px;
   margin: 30px auto;
}

.btn{
   width: 200px;
   height: 60px;
   background-color : #7cacae;
   color: #fff;
   font-size:24px;
   line-height: 60px;
   margin: 30px auto;
   border-radius:10px;
}

至此，页面的样式已经基本符合一个欢迎界面的雏形，为了使页面中的Start看起来像一个开启新世界旅程的按钮，可以采用当前最流行的扁平化设计，设置按钮的长度、宽度和背景颜色，运行结果如图1-24所示。CSS代码如下。

将按钮中的文字设置为白色、24px，并且在垂直方向居中，运行结果如图1-25所示。CSS代码如下。

为了使整个按钮的位置调整到水平居中，并且和上面的文字部分保持一定的距离，可以使用marign属性，将上边距设置为30px，左右边距设置为auto，运行结果如图1-26所示。CSS代码如下。

在目前常用的扁平化设计中，按钮通常会有圆角效果，可以使用CSS3中的最新属性borderradius给长方形的按钮增加圆角样式，CSS代码如下。

至止，页面的静态效果已经全部完成，运行结果如图1-27所示。

1.3.5 给页面增加动态效果

.btn:hover{
   width:300px;
   height:100px;
   background-color:yellow;
   line-height:100px;
   margin:100px auto;
}

.btn{
   width: 200px;
   height: 60px;
   background-color: #7cacae;
   color: #fff;
   font-size:24px;
   line-height: 60px;
   margin: 30px auto;
   border-radius:10px;
   transition:1s;
}

<style>
    html,body{
      height:100%;
      margin:0;
      padding:0;
    }
    body{
      background:red url(img/index.jpg) center center;
      background-size:cover;
    }
    h1{
      line-height:90px;
      color:#ffffff;
      font-size:50px;
    }
    p{
      line-break:80px;
      font-size:22px;
      color:#ffffff;
    }
    .btn{
      width: 200px;
      height: 60px;
      background-color: #7cacae;
      color: #fff;
      font-size:24px;
      line-height: 60px;
      margin: 30px auto;
      border-radius:10px;
      transition:1s;
    }
    .btn:hover{
      width:300px;
      height:100px;
      background-color:yellow;
      line-height:100px;
    }
    .container{
      position:absolute;
      top:50%;
      text-align:center;
      width: 100%;
      transform:translateY (-50%);
    }
</style>

CSS3可以做出很棒的动态效果。接下来就为本案例中的页面增加动态效果，使鼠标指针移动到按钮上的时候，让按钮的形态发生变化。

在按钮的选择器后面加上:hover，表示鼠标指针移动到按钮上的状态。使用width和height分别改变按钮的宽度和高度，并调整line-height的值等于高度，实现文字的垂直居中。使用background-color改背景颜色为黄色，增加margin的值，使按钮和上面文字部分的距离更大，运行结果如图1-28所示。CSS代码如下。

通过测试可以看出，这个动态变化是很生硬的。可以用transition属性设置过渡时间，使动态变化在一定时间内逐步完成，运行结果如图1-29所示。CSS代码如下。

使用CSS美化页面的完整代码如下。

1.4 在手机上查看页面

<meta name="viewport" content="width=device-width,initial-scale=1.0 user-scale"/>

.container{
   padding: 0 20px;
   position:absolute;
   top:50%;
   text-align:center;
   width: calc (100% - 40px);
   transform:translateY (-50%);
}

随着时代的发展，越来越多的人使用手机浏览网页。如果一个页面无法适配移动端，那它无疑是落后于时代的。本节讲解如何将PC端的页面样式改成适合在手机上展示的页面样式。

在浏览器中打开开发者模式，单击切换设备工具栏，如图1-30所示，调出移动端的显示界面。

由于移动端和PC端在尺寸、分辨率等方面的不同，在页面没有做任何更改的时候，移动端界面上的内容会变得非常小以至于看不清。在HTML文档的<meta>中设置移动端的viewport显示窗口，保存代码并测试，运行结果如图1-31所示。HTML代码如下。

通过设置移动端的显示窗口，页面在移动端上的展示效果看起来已经很舒服了。但由于图片尺寸的缩小，段落的内容和屏幕边界连在了一起，影响视觉效果。可以通过给外层盒子增加内边距来保证所有元素离屏幕边界都有一定的距离，同时使用calc()方法，将width缩小40px。保存代码并测试，运行结果如图1-32所示。CSS代码如下。

到此，一个由图片、文字和简单动态效果构成的HTML5欢迎界面已经完成，接下来的章节会从语法和使用两方面来详细讲解HTML5和CSS3的基本知识。