内 容 提 要

本书是“十三五”“十四五”职业教育国家规划教材，是适切线上线下混合式教学而推出的新形态一体化教材。

全书以企业开发的学校真实网站为载体，将学校网站项目拆分为 10 个任务，按照“任务描述→知识准备→任务实

现→实训”序化教材内容，采用项目贯穿、任务驱动的方式组织学习，通过任务实现学习 HTML5 语言、CSS3 层

叠样式表、盒子模型、表格与表单、HTML5+CSS3 布局等网站开发技术。在关键知识点、任务实现及实训中嵌入

二维码，供学生课前或课后观看。

本书可以作为中职或高职院校计算机相关专业“Web 前端开发”或“网页设计”课程的教材，也可以作为 Web

前端开发爱好者的学习参考书。

♦ 主 编 李志云 董文华

副 主 编 李 晓 李阿芳 杨晓莹 杨 娜

责任编辑 马小霞

责任印制 王 郁 焦志炜

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

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

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

大厂回族自治县聚鑫印刷有限责任公司印刷

♦ 开本：889×1194 1/16

印张：13.25 2024 年 1 月第 1 版

字数：272 千字 2024 年 1 月河北第 1 次印刷

定价：49.80 元

读者服务热线：(010)81055256 印装质量热线：(010)81055316

反盗版热线：(010)81055315

广告经营许可证：京东市监广登字 20170147 号

党的二十大报告提出“全面贯彻党的教育方针，落实立德树人根本任务，培养德智体美

劳全面发展的社会主义建设者和接班人。”本书将社会主义核心价值观、中华优秀传统文化、

大国工匠精神等元素融入教材，坚定历史自信和文化自信。

本书以真实网站（书中用化名：未来信息学院）项目组织内容，从内容安排、知识点组

织、教与学、做与练等多方面体现中职教育特色，符合中职学生的学习特点。全书共分为 11

个任务，前 10 个任务根据未来信息学院网站项目划分，每个任务完成一个相对独立的功能。

任务 11 结合前 10 个任务的知识，完成未来信息学院网站整体的设计与实现。本书的主要特

点体现在以下几个方面。

1．项目贯穿、任务驱动

本书以完成网站项目组织教与学；以完成任务为导向，引入相关知识点；以“实现任务

为主，理论够用”为原则进行编写。

2．以岗定课、课岗直通

本书根据 Web 前端开发相关岗位的需求，主要介绍主流的 Web 前端开发知识，摒弃过时、

不重要的知识点，做到课堂所学与岗位需求紧密衔接。

3．产教融合、校企合作

本书案例是与道普信息技术有限公司的杨娜工程师合力开发的。另外，国基北盛（南京）

科技发展有限公司也对本书的资源制作提供了大力支持和帮助。

本书主要内容及参考学时如表 1 所示。

表1 本书主要内容及参考学时

任务 内容 主要知识点或案例 学时

任务 1 创建第一个 HTML5 网页 Web 相关概念、HTML5 概述、常用的浏览器、

网页编辑软件等 2

任务 2 搭建简单学院网站 HTML5 文本标记、列表标记、超链接标记以及

图像标记等 12

任务 3 美化简单学院网站 引入 CSS 样式、CSS 常用选择器、CSS 常用文

本属性、CSS 的高级特性等 4

任务 4 制作学院介绍页面 盒子模型的概念、相关属性、背景属性等 6

前 言

P R E F A C E

2

续表

任务 内容 主要知识点或案例 学时

任务 5 制作学院网站导航条 无序列表样式及超链接样式设置、元素的类型与

转换、常用导航条结构及样式设置等 4

任务 6 制作学院新闻块 元素的浮动、块元素间的外边距、新闻块页面结

构的搭建与新闻块样式设置等 4

任务 7 制作学生信息表 表格的常用标记及样式设置等 4

任务 8 制作学生问卷调查表单 表单标记、表单控件、表单的创建及样式设置等 6

任务 9 制作学院风景墙页面 过渡属性和变形属性 4

任务 10 布局学院网站主页 HTML5+CSS3 常用布局方式 6

任务 11 完整项目：制作学院网站 学院网站的整体设计与实现 12

合计 64

本书配套的数字课程“Web 前端基础”（课程负责人：李志云）已在智慧职教 MOOC 平

台上线，读者可以登录网站进行在线学习及资源下载，授课教师可以调用本课程构建符合自

身教学特色的 SPOC 课程。

本书由李志云、董文华担任主编，李晓、李阿芳、杨晓莹、杨娜担任副主编，全书由李

志云统稿。由于编者水平有限，书中不妥之处敬请读者批评指正。编者电子邮箱：

lizhiyunwf@126.com。

编者

2023 年 3 月

创建第一个 HTML5

网页 ......................... 1

1.1 任务描述 .......................................2

1.2 知识准备 .......................................2

1.2.1 认识 Web 前端开发.......................... 2

1.2.2 Web 相关概念................................... 2

1.2.3 HTML5 概述..................................... 5

1.2.4 常用的浏览器 ................................... 5

1.2.5 网页编辑软件 ................................... 6

1.3 任务实现 .......................................6

任务小结 ................................................8

习题 1 .....................................................9

实训 1 ...................................................10

扩展阅读 ..............................................10

任务 2 搭建简单学院网站...... 12

2.1 任务描述 .....................................13

2.2 知识准备 .....................................13

2.2.1 HTML5 文档的基本结构............... 14

2.2.2 HTML 标记及其属性..................... 15

2.2.3 HTML 文本标记............................. 16

2.2.4 HTML 列表标记............................. 22

2.2.5 HTML 超链接标记......................... 26

2.2.6 HTML 图像标记............................. 29

2.3 任务实现 .....................................32

2.3.1 创建网站目录 ................................. 32

2.3.2 创建网站首页 ................................. 32

2.3.3 创建学院简介页面 ......................... 33

2.3.4 创建学院新闻页面 ......................... 33

2.3.5 创建新闻详情页面 ......................... 34

任务小结 ..............................................35

习题 2 ...................................................36

实训 2 ...................................................37

扩展阅读 ..............................................38

任务 3 美化简单学院网站 .....40

3.1 任务描述 .....................................41

3.2 知识准备 .....................................41

3.2.1 什么是 CSS..................................... 41

3.2.2 引入 CSS 样式................................ 42

3.2.3 CSS 常用选择器............................. 46

3.2.4 CSS 常用文本属性......................... 52

3.2.5 CSS 的高级特性............................. 55

3.3 任务实现 .....................................58

3.3.1 美化网站首页 ................................. 58

3.3.2 美化学院简介页面 ......................... 59

3.3.3 美化学院新闻页面 ......................... 60

3.3.4 美化新闻详情页面 ......................... 61

任务小结 ..............................................62

习题 3 ...................................................63

目 录

CONTENTS

任务 1

2

实训 3 ...................................................64

扩展阅读 ..............................................65

任务 4 制作学院介绍页面 .....66

4.1 任务描述 .....................................67

4.2 知识准备 .....................................67

4.2.1 盒子模型的概念 ............................. 67

4.2.2 盒子模型的相关属性 ..................... 69

4.2.3 背景属性 ......................................... 74

4.2.4 不透明度属性 ................................. 80

4.3 任务实现 .....................................81

4.3.1 搭建学院介绍页面结构 ................. 81

4.3.2 定义学院介绍页面 CSS 样式........ 82

任务小结 ..............................................82

习题 4 ...................................................83

实训 4 ...................................................85

扩展阅读 ..............................................85

任务 5 制作学院网站导航条....87

5.1 任务描述 .....................................88

5.2 知识准备 .....................................88

5.2.1 无序列表样式设置 ......................... 88

5.2.2 超链接样式设置 ............................. 89

5.2.3 元素的类型与转换 ......................... 91

5.3 任务实现 .....................................94

5.3.1 搭建学院网站导航条结构............. 94

5.3.2 定义学院网站导航条 CSS 样式..... 95

任务小结 ..............................................96

习题 5 ...................................................96

实训 5 ...................................................97

扩展阅读 ..............................................98

任务 6 制作学院新闻块 ........99

6.1 任务描述 ...................................100

6.2 知识准备 ...................................100

6.2.1 元素的浮动 ................................... 100

6.2.2 块元素间的外边距 ....................... 104

6.3 任务实现 ...................................109

6.3.1 搭建学院新闻块页面结构........... 109

6.3.2 定义学院新闻块 CSS 样式.......... 110

任务小结 ............................................111

习题 6 .................................................112

实训 6 .................................................112

扩展阅读 ............................................113

任务 7 制作学生信息表 .......115

7.1 任务描述 ...................................116

7.2 知识准备 ...................................116

目 录

C O N T E N T S

3

7.2.1 表格标记 ....................................... 116

7.2.2 合并单元格 ................................... 118

7.2.3 使用 CSS 定义表格样式.............. 119

7.3 任务实现 ...................................121

7.3.1 搭建学生信息表结构 ................... 121

7.3.2 定义学生信息表 CSS 样式.......... 123

任务小结 ............................................124

习题 7 .................................................125

实训 7 .................................................125

扩展阅读 ............................................126

制作学生问卷

调查表单 ............... 127

8.1 任务描述 ...................................128

8.2 知识准备 ...................................128

8.2.1 认识表单 ....................................... 128

8.2.2 表单标记 ....................................... 129

8.2.3 表单控件 ....................................... 129

8.2.4 使用 CSS 定义表单样式.............. 133

8.3 任务实现 ...................................135

8.3.1 搭建学生问卷调查表单页面

结构 ............................................... 135

8.3.2 使用 CSS 定义学生问卷调查表单

页面样式 ....................................... 137

任务小结 ............................................138

习题 8 .................................................138

实训 8 .................................................140

扩展阅读 ............................................140

任务 9 制作学院风景墙页面 ...141

9.1 任务描述 ...................................142

9.2 知识准备 ...................................142

9.2.1 过渡属性 ....................................... 142

9.2.2 变形属性 ....................................... 148

9.3 任务实现 ...................................151

9.3.1 搭建学院风景墙页面结构........... 151

9.3.2 定义学院风景墙页面 CSS 样式... 152

任务小结 ............................................153

习题 9 .................................................154

实训 9 .................................................155

扩展阅读 ............................................156

任务 10 布局学院网站主页 ... 157

10.1 任务描述 .................................158

10.2 知识准备 .................................158

10.2.1 单列布局 ..................................... 158

10.2.2 二列布局 ..................................... 160

10.2.3 三列布局 ..................................... 162

10.2.4 通栏布局 ..................................... 164

10.3 任务实现 .................................164

10.3.1 搭建布局块结构 ......................... 164

任务 8

目 录

C O N T E N T S

4

10.3.2 定义布局块 CSS 样式................ 165

任务小结 ............................................168

习题 10 ...............................................169

实训 10 ...............................................169

扩展阅读 ............................................170

完整项目：制作学院

网站 ......................171

11.1 任务描述 .................................172

11.2 网站规划 .................................172

11.3 效果图设计 .............................173

11.3.1 效果图设计原则 ......................... 173

11.3.2 效果图设计步骤 ......................... 173

11.3.3 效果图切片导出素材 ................. 178

11.4 制作网站主页 .........................178

11.5 制作新闻列表页 .....................194

11.6 制作新闻详情页 .....................199

11.7 制作视频宣传页 .....................200

任务小结 ............................................202

实训 11 ...............................................202

扩展阅读 ............................................203

参考文献........................... 204

任务 11

目 录

C O N T E N T S

任务1

创建第一个HTML5网页

计算机专业学生李华听了入学后的专业介绍之后，打算将来成为一名

Web 前端开发工程师。他上网搜索了相关岗位要求，并咨询了学业导师张老

师，张老师告诉他应先从 HTML 学起。就像盖房子需要先搭建房子结构，再

对房子进行装修，HTML 用于搭建网页结构，后续学习的 CSS 则用于定义

网页样式，类似于对房子进行装修美化。接下来我们就和李华一起来学习

HTML5，创建第一个 HTML5 网页吧。

情景导入

学习及

素养目标

◎ 了解 Web 前端开发技术；

◎ 了解 Web 相关概念；

◎ 熟悉常用的浏览器；

◎ 了解常用的网页编辑软件；

◎ 会创建简单的 HTML5 页面；

◎ 了解行业发展，树立职业理想。

2 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

1.1 任务描述

启动 HBuilderX，创建一个空项目，项目名称为 chapter01，在该项目中新建一个 HTML

文件，文件名为 example01.html，网页标题为“第一个网页”，在网页上显示：“只争朝夕，

不负韶华。”网页浏览效果如图 1-1 所示。

图1-1 第一个网页浏览效果

1.2 知识准备

2005 年以后，互联网进入“Web 2.0”时代，各种类似桌面软件的 Web 应用大量涌现，

网站的前端由此发生了翻天覆地的变化。网页不再只承载单一的文字和图片，各种丰富的媒

体资源让网页的内容更加生动，各种交互形式为用户提供了更好的使用体验，这些都是基于

前端技术实现的。

1.2.1 认识 Web 前端开发

Web 前端开发是指创建 Web 页面或 App 界面等前端界面并将其呈现给用户的过程。通过

超文本标记语言（Hyper Text Markup Language，HTML）、串联样式表（Cascading Style Sheets，

CSS）、JavaScript，以及衍生的各种技术、框架、解决方案，可实现互联网产品的用户界面。

Web 前端开发也称为“客户端开发”。与 Web 前端开发对应的是 Web 后端开发，Web 后

端开发也称为“服务器端开发”，主要负责业务逻辑代码模块的实现。Web 前端开发与 Web

后端开发使用的主要技术如图 1-2 所示。

图1-2 Web前端开发与Web后端开发使用的主要技术

本书是介绍 Web 前端开发技术基础的教材，主要介绍利用 HTML5 和 CSS3 构建 Web 网

页的知识。

1.2.2 Web 相关概念

对于从事 Web 开发的人员来说，与互联网相关的专业术语，如 IP 地址、域名、URL、

微课视频

微课 1-1：

Web 前端开

发的前世今生

任务1 创建第一个HTML5网页 3

网站、网页、主页、HTML、Web 标准等，都是必须了解的。

1．IP 地址、域名与 URL

IP 地址（Internet Protocol Address，互联网协议地址）和域名（Domain Name）都用于标

识互联网上的每台主机，IP 地址的格式是×××.×××.×××.×××，其中×××是 0～255

的任意整数，由于 IP 地址是一组枯燥且难记的数字，不易使用，所以我们平时上网使用的是

与 IP 地址相对应的域名。URL 是统一资源定位符（Uniform Resource Locator）的缩写。关于

三者的描述如图 1-3 所示。

图1-3 IP地址、域名与URL的描述

2．网页、网站与主页

网页就是把文字、图像、声音、视频等多媒体信息，以及分布在互联网上的各种相关信

息，相互链接构成的一种信息表达方式。网页、网站与主页的具体描述如图 1-4 所示。

图1-4 网页、网站与主页的描述

3．HTML

HTML 表示网页的一种规范（或者说是一种标准），它通过标记来描述显示的网页内容。

注意 由于本机的 IP 地址是 127.0.0.1，在浏览网页时，出现在地址栏中的 127.0.0.1

就是本机的 IP 地址。

4 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

HTML 提供了许多标记，如段落标记、标题标记、超链接标记和图像标记等。网页中需要显

示什么内容，就用相应的 HTML 标记进行描述。图 1-5 和图 1-6 所示是京东商城的主页和该

主页的 HTML 源代码。

图1-5 京东商城的主页

图1-6 京东商城主页的HTML源代码

4．Web 标准

为了使网页在不同的浏览器中呈现相同的效果，在开发应用程序时，浏览器开发商和 Web

开发商都必须共同遵守 W3C（World Wide Web Consortium，万维网联盟）与其他标准化组织

共同制定的一系列 Web 标准。万维网联盟是国际最著名的标准化组织之一。Web 标准并不是

某一个标准，而是一系列标准的集合，其构成如图 1-7 所示。

图1-7 Web标准构成

任务1 创建第一个HTML5网页 5

1.2.3 HTML5 概述

HTML5 是 HTML 的第 5 代，在互联网上的应用越来越广泛。HTML5 将 Web 应用带入

一个标准的应用平台。在 HTML5 平台上，视频、音频、图像和动画等都被标准化。

HTML5 取代了 1999 年制定的 HTML 4.01 和 XHTML 1.0 标准，在互联网应用迅速发展

的时候，使网络标准符合实际的网络需求，为桌面和移动平台带来紧密衔接的丰富内容。

HTML5 的第一份正式草案已于 2008 年 1 月公布，并得到了各个浏览器开发商的广泛支持。

2014 年 10 月 29 日，W3C 宣布 HTML5 标准规范制定完成，并公开发布。HTML5 的主要优

势如图 1-8 所示。

图1-8 HTML5的主要优势

1.2.4 常用的浏览器

浏览器是网页运行的平台，网页文件必须使用浏览器打开才能呈现网页效果。目前，常用

的浏览器有 Edge、火狐（Firefox）、Chrome、Safari 和 Opera 等，如图 1-9 所示。

图1-9 常用的浏览器

1．Edge 浏览器

Edge 浏览器是微软推出的新一代的浏览器，是 IE 的替代产品，其功能全面，支持扩展

程序，界面简洁，注重实用性，对 HTML5 有很好的支持。

2．火狐浏览器

火狐浏览器发布于 2002 年，是一个开源网页浏览器。火狐浏览器由 Mozilla 基金会和开

源开发者一起开发。由于是开源的浏览器，所以它可以集成很多小插件，具有可扩展等特点。

由于火狐浏览器对 Web 标准的执行比较严格，所以在实际网页制作过程中，火狐浏览器

6 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

是最常用的浏览器之一，对 HTML5 的支持度也很高。

3．Chrome 浏览器

Chrome 浏览器是由谷歌公司开发的公开源代码的浏览器。该浏览器的目标是提升网页的

稳定性、传输速度和安全性，并提供简洁有效的使用界面。Chrome 浏览器完全支持 HTML5。

4．Safari 和 Opera 浏览器

Safari 浏览器是苹果公司开发的浏览器。Opera 浏览器是 Opera 软件公司开发的一款浏览

器。两款浏览器都对 HTML5 有很好的支持。

1.2.5 网页编辑软件

网页编辑软件有很多种，常用的网页编辑软件有 HBuilderX、Visual Studio Code、

Dreamweaver、Sublime Text 等，具体介绍如图 1-10 所示。

图1-10 常用的网页编辑软件

HBuilderX、Visual Studio Code 和 Sublime Text 这三款网页编辑软件都具有快捷、高效的

特点，使用人数众多。HBuilderX 和 Visual Studio Code 可以免费下载使用。Dreamweaver 有

可视化的编辑界面，对于 Web 开发初学者来说，无须编写任何代码就能快速创建 Web 页面，

但运行时速度稍慢。

本书所有代码均在 HBuilderX 中完成编写。

1.3 任务实现

创建 HTML5 网页的具体步骤如下。

1．启动 HBuilderX

下载并安装 HBuilderX 后，双击 HBuilderX.exe 文件或桌面上的 HBuilderX 快捷方式，启

注意 本书所有页面在浏览时一律采用 Chrome 浏览器。

微课视频

微课 1-2：

任务实现

任务1 创建第一个HTML5网页 7

动 HBuilderX，界面如图 1-11 所示。

图1-11 HBuilderX界面

2．新建项目

项目用来存储一个网站的所有文件，这些文件包括网页文件、图像及音视频文件、脚本文

件、样式表文件等。

从菜单栏中选择“文件”|“新建”｜“项目”选项，

出现“新建项目”对话框，输入项目名称“chapter01”，

项目存放位置为“E:/Web 前端开发/源代码”，选择模板

类型为“空项目”，单击“创建”按钮，如图 1-12 所示。

此时一个项目创建完成，在 HBuilderX 的左侧视图

中显示了该项目，如图 1-13 所示。若左侧视图没显示在

HBuilderX 界面中，则可选择菜单栏中的“视图”|“显

示项目管理器”选项使其显示。

图1-13 项目创建完成

3．在项目中创建网页文件

在左侧视图中右击“chapter01”，在弹出的快捷菜

单中选择“新建”｜“html 文件”选项，出现“新建

html 文件”对话框，输入文件名“example01.html”，单

击“创建”按钮，如图 1-14 所示。

新创建的项目

图1-12 新建项目

图1-14 创建网页文件

8 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

4．输入网页代码

在网页文件代码的<title>与</title>之间输入 HTML 文档的标题，这里输入“第一个网页”，

然后在<body>与</body>标记之间添加网页的主体内容，如图 1-15 所示。

<p>只争朝夕，不负韶华。</p>

这里的<p>和</p>是 HTML 段落标记，在任务 2 中会详细介绍。

图1-15 输入网页代码

5．保存文件

在菜单栏中选择“文件”｜“保存”选项，或按“Ctrl+S”组合键，即可保存文件内容。

6．浏览网页

在 HBuilderX 中单击工具栏中的“浏览器运行”按钮 ，或按“Ctrl+R”组合键，选择

Chrome 浏览器浏览网页，效果如图 1-16 所示。

图1-16 浏览网页效果

至此，创建了一个 HTML5 项目 chapter01，该项目包含一个网页文件 example01.html。

还可以在该项目中用同样的方法继续创建新的网页文件。

任务小结

本任务主要介绍了 Web 前端开发的基础知识，包括 Web 相关概念、HTML5 概述、常用

的浏览器、网页编辑软件，以及使用 HBuilderX 开发工具创建简单的 HTML5 项目网页文件

的步骤等。本任务的主要知识点如图 1-17 所示。

文档的标题

网页的主体内容

注意 如果计算机中已安装了浏览器软件，浏览网页时，也可在“此电脑”或“计

算机”中双击文件名来浏览。

任务1 创建第一个HTML5网页 9

图1-17 任务1的主要知识点

习题 1

一、单项选择题

1．HTML 的中文意思是（ ）。

A．文件传输协议 B．超文本传输协议

C．超文本标记语言 D．统一资源定位符

2．URL 的中文意思是（ ）。

A．文件传输协议 B．超文本传输协议

C．超文本标记语言 D．统一资源定位符

3．下面的应用软件中，不可以用于网页制作的是（ ）。

A．Sublime Text B．HBuilderX

C．Dreamweaver D．3ds Max

二、判断题

1．使用 Chrome 浏览器浏览网页时，在网页的任意空白处右击，选择“查看网页源代码”

选项可以查看网页的 HTML 代码。 （ ）

2．HTML5 可以跨平台使用，具有良好的移植性。 （ ）

3．Web 标准并不是某一个标准，而是一系列标准的集合，主要包括结构标准、表现标准

和行为标准。 （ ）

4．一个项目只能有一个网页文件。 （ ）

10 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

实训 1

一、实训目的

1．熟悉 HBuilderX 界面，会创建简单的网页。

2．了解 HTML5 文件的基本结构。

二、实训内容

1．在本任务创建的 chapter01 项目中新建一个网页文件，文件名称为 myself.html，网页

主体内容为自己的学号、姓名、性别、特长等信息，保存后浏览网页。

2．练习项目和网页文件的基本操作。

在 HBuilderX 中，可以对项目或网页文件进行重命名、移除项目、删除网页文件等操作。

其操作方法是右击项目或网页文件名称，选择相应的选项。请同学们自行练习。

三、实训总结

1．如何在 HBuilderX 中创建项目？

2．如何在项目中创建网页文件？

3．在 HBuilderX 中移除项目，但未删除项目，如何再将其在 HBuilderX 中打开？

扩展阅读

Web 前端开发的前世和今生

“Web 前端开发”是从“网页设计”演变而来的。1991 年 8 月，英国科学家蒂姆·伯纳

斯·李（Tim Berners-Lee）发布了第一个网站，这个网站只有简单的文本、十几个超链接。

这之后的两三年，出现的网页也都比较简单，只有文本、图像、表格等内容。1994 年，W3C

成立，确定了网页使用的标准语言 HTML。也是在这一年，中国正式接入互联网，我国开始

逐渐进入“互联网时代”。

1995—2004 年一般称为“Web 1.0”时代，这一时期大部分网站都是由静态页面构成的，

信息只是单纯地被发布到网络上供访问者浏览。网站以静态、单向阅读为主，这类网站的代

表主要有新浪、网易、搜狐等。

2005 年后，互联网进入“Web 2.0”时代，用户不再是互联网信息被动的接收者，而是作

为参与者参与到了互联网的发展之中。用户不再是单纯的浏览者，而是互联网这张大网的编

织者、使用者与传播者。这类网站的代表主要有百科全书、网摘、黄页、论坛、博客、搜索

引擎、微博等。

2012 年后，随着智能手机等各种智能终端的普及，互联网进入“Web 3.0”时代，特别是

2014 年，HTML5 标准发布，全新的以 HTML5 为核心的前端技术正以破竹之势横扫互联网，

1-3：实训 1

参考步骤

任务1 创建第一个HTML5网页 11

各种 HTML5 的移动应用影响着我们生活的方方面面，比如，美团、抖音、微信等各种 App，

都是前端技术迅猛发展的产物。

现在的 Web 前端开发与以前的网页设计早已有了天壤之别，前端开发不仅包括网页开

发，还包括各种移动端 App 的开发以及微信小程序的开发。网站不仅运行于 PC 端，也运行

于各种移动端。前端技术“炙手可热”，企业急需大量优秀的 Web 前端开发工程师，那如何

才能成为 Web 前端开发工程师，将来能在此领域顺利就业呢？万丈高楼平地起，我们得从

基础学起。

Web 前端开发主要包含三大技术：描述网页内容的 HTML，描述网页样式的 CSS，以及

描述网页行为的脚本语言 JavaScript。除了这三大技术外，目前的 Web 前端开发还要用到

Bootstrap 等多种框架，而新的框架不断涌现，前端技术正蓬勃发展。

任务2

搭建简单学院网站

李华学习了任务 1 后，他迫切地想学习更多的 HTML5 知识，想知道如

何在网页上添加更多的内容，比如怎样在网页上添加标题、段落、列表、图

像和超链接等。接下来，我们就和李华一起来学习 HTML5 网页的基本结构

和常用的 HTML5 标记，最后利用这些知识搭建简单学院网站。

情景导入

学习及

素养目标

◎ 掌握 HTML5 网页的基本结构；

◎ 掌握常用的 HTML5 标记；

◎ 熟练使用 HTML5 常用标记搭建简单网站；

◎ 在编写代码时养成认真、细致、精益求精的工匠精神。

任务2 搭建简单学院网站 13

2.1 任务描述

综合利用 HTML5 标记，搭建一个简单学院网站，页面浏览效果如图 2-1～图 2-4 所示，

具体要求如下。

（1）从主页可以链接到其他页面，从其他页面可以返回到主页。

（2）在主页中创建友情链接，链接到百度网站和学院官网。

（3）在学院新闻页面中，新闻条目采用无序列表展示，且每个条目都建立超链接。

（4）单击学院新闻页面中的第一条新闻，链接到新闻详情页面。

图2-1 网站首页 图2-2 学院简介页面

图2-3 学院新闻页面 图2-4 新闻详情页面

2.2 知识准备

网页中显示的内容是通过 HTML 标记描述的，网页文件其实是一个纯文本文件。在

HTML 发展过程中，推出了 HTML 1.0、HTML 2.0、HTML 3.2、HTML 4.0 和 HTML5 等多个

版本，在这个过程中新增了许多 HTML 标记，同时也淘汰了一些 HTML 标记。

HTML5 并不是对旧版本的 HTML 的颠覆性革新，它的核心理念是保持与过去技术的完

美衔接，因此 HTML5 对旧版本的 HTML 有很好的兼容性，同时 HTML5 能兼容各种不同的

14 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

浏览器；HTML5 的结构代码也更简洁、易用。

学习 HTML5 首先需要了解 HTML5 的语法及常用的 HTML5 标记。

2.2.1 HTML5 文档的基本结构

使用 HBuilderX 新建网页文件时会自动生成一些源代码，这些自带的源代

码构成了 HTML5 文档的基本结构。

例 2-1 在 HBuilderX 中新建项目，项目名称为 chapter02，位于“E:/Web

前端开发/源代码”目录下，选择模板类型为“空项目”，单击“创建”按钮。

创建项目后，右击项目名称，选择“新建”|“html 文件”选项，在“新建 html 文件”对话框

中输入文件名称“example01.html”，单击“创建”按钮，此时可以看到系统自动生成的源代

码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title></title>

</head>

<body>

</body>

</html>

这些源代码构成了 HTML 文档的基本结构，其中主要包括<! DOCTYPE >文档类型声明、

<html>标记、<head>标记、<body>标记。

1．<!DOCTYPE>文档类型声明

<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 标准规范。

HTML5 的文档类型声明非常简单，代码如下。

<!DOCTYPE html>

必须在文档开头使用<! DOCTYPE >标记为 HTML 文档指定 HTML 文档类型，只有这样浏

览器才能将该文档作为有效的 HTML 文档，并按指定的文档类型进行解析。

2．<html>标记

<html>标记标志着 HTML 文档的开始，</html>标记标志着 HTML 文档的结束。在它们

之间的是文档的头部信息和主体内容。

3．<head>标记

<head>标记用于定义 HTML文档的头部信息，也称为头部标记。<head>标记紧接在<html>

标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>和<style>等用来描

述文档的标题、作者及样式等的标记。

一个 HTML 文档只能含有一对<head>标记。

微课视频

微课 2-1：

HTML5 文档

的基本结构

任务2 搭建简单学院网站 15

4．<body>标记

<body>标记用于定义 HTML 文档所要显示的主体内容，也称为主体标记。浏览器中显示

的所有文本、图像、音频和视频等信息都必须位于<body>标记内。

一个 HTML 文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于

<head>标记之后，与<head>标记是并列关系。

2.2.2 HTML 标记及其属性

2.2.1 节介绍的<html>标记、<head>标记和<body>标记都是 HTML 文档中的基本标记，

除了这些标记之外，HTML5 还提供了大量其他的标记，下面对标记及标记中的属性进行简要

说明。

1．标记

在 HTML 文档中，带有“< >”符号的元素称为 HTML 标记。HTML 文档由标记和被标

记的内容组成。标记可以产生所需的各种效果。

标记的格式如下。

<标记>受标记影响的内容</标记>

使用标记时要遵循如图 2-5 所示的规则。

图2-5 标记的规则

例如：

<title>学院介绍</title>

<title>是双标记，由<title>和</title>构成。

<hr>

<hr>是单标记，无结束标记。

2．标记的属性

许多标记还包括一些属性，以便对受标记影响的内容进行更精细的控制。标记可以通过

不同的属性展现各种效果。

属性在标记中的使用格式如下。

<标记 属性 1=\"属性值 1\" 属性 2=\"属性值 2\"... >受标记影响的内容</标记>

使用属性时要遵循如图 2-6 所示的规则。

16 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

图2-6 属性的规则

例如，<a href=\"http://www.sdcit.edu.cn\">未来信息学院</a>。

其中超链接标记<a>的属性 href 用于设置超链接的目标地址。

3．注释标记

如果需要在 HTML 文档中添加一些便于读者阅读和理解，但又不需要显示在页面中的注

释文字，就需要使用注释标记。其基本语法格式如下。

<!-- 注释文字 -->

例如，<a href=\"http://www.sdcit.edu.cn\">未来信息学院</a><!--给文字设置超链接-->。

下面介绍 HTML5 中的常用标记。

2.2.3 HTML 文本标记

网页中控制文本的标记有标题标记、段落标记、水平线标记、换行标记、字

体样式标记、特殊字符等。

1．标题标记

标题标记的语法格式如下。

<hn>标题文字</hn>

用<hn>设置的标题文字在浏览器中显示时默认都以粗体显示，而且标题文字单独显示为

一行。

例 2-2 在项目 chapter02 中新建一个网页文件，在代码中使用标题标记，文件名为

example02.html，代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>标题标记</title>

</head>

<body>

<h1>凡是过往，皆为序章。</h1>

说明 使用该标记设置文档中的标题，其中 n 为 1～6 的数字，<h1>表示设置一级

标题，<h6>表示设置六级标题。

微课视频

微课 2-2：

HTML 文本

标记

任务2 搭建简单学院网站 17

<h2>凡是过往，皆为序章。</h2>

<h3>凡是过往，皆为序章。</h3>

<h4>凡是过往，皆为序章。</h4>

<h5>凡是过往，皆为序章。</h5>

<h6>凡是过往，皆为序章。</h6>

<p>凡是过往，皆为序章</p>

</body>

</html>

浏览网页，效果如图 2-7 所示。

图2-7 标题标记

2．段落标记

段落标记的语法格式如下。

<p>段落文字</p>

例 2-3 在项目 chapter02 中新建一个网页文件，在代码中使用段落标记，文件名为

example03.html，代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>段落标记</title>

</head>

<body>

<h2>未来信息学院简介</h2>

<p>未来信息学院是省人民政府批准设立、教育部备案的公办省属普通高等学校，学校秉持“以服务发展为宗

旨，以促进就业为导向”的办学方针，遵循“以人为本、德技双馨、产教融合、服务社会”的办学理念，以“建设有特色高

水平高职院校”为目标，建立了开放创新强校模式，累积了优质的教育资源，形成了良好的育人环境。学校的管理水平、教

学质量、办学特色得到社会各界的广泛肯定。</p>

<p>学校是教育部批准的“国家示范性软件职业技术学院”首批建设单位，部队士官人才培养定点院校，“3+2”

对口贯通分段培养本科招生试点院校，省示范性高职单独招生试点院校；是国家首批“电子信息产业高技能人才培训基地”

“省级服务外包人才培训基地”“省级劳务外派培训基地”“省信息安全培训中心”；荣获“全国信息产业系统先进集体”“省

职业教育先进集体”“德育工作优秀高校”等称号。</p>

</body>

</html>

浏览网页，效果如图 2-8 所示。

说明 “p”是英文“paragraph”（段落）的缩写。<p>和</p>之间的文字表示一个段

落，表示多个段落需要用多对段落标记。

18 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

图2-8 段落标记

3．水平线标记

水平线标记的语法格式如下。

<hr>

例 2-4 在项目 chapter02 中新建一个网页文件，在代码中使用水平线标记，文件名为

example04.html，代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>水平线标记</title>

</head>

<body>

<h2>未来信息学院简介</h2>

<hr>

<p>未来信息学院是省人民政府批准设立、教育部备案的公办省属普通高等学校，学校秉持“以服务发展为宗

旨，以促进就业为导向”的办学方针，遵循“以人为本、德技双馨、产教融合、服务社会”的办学理念，以“建设有特色高

水平高职院校”为目标，建立了开放创新强校模式，累积了优质的教育资源，形成了良好的育人环境。学校的管理水平、教

学质量、办学特色得到社会各界的广泛肯定。</p>

<p>学校是教育部批准的“国家示范性软件职业技术学院”首批建设单位，部队士官人才培养定点院校，“3+2”

对口贯通分段培养本科招生试点院校，省示范性高职单独招生试点院校；是国家首批“电子信息产业高技能人才培训基地”

“省级服务外包人才培训基地”“省级劳务外派培训基地”“省信息安全培训中心”；荣获“全国信息产业系统先进集体”“省

职业教育先进集体”“德育工作优秀高校”等称号。</p>

</body>

</html>

浏览网页，效果如图 2-9 所示。

图2-9 水平线标记

水平线

说明 “hr”是英文“horizontal rule”（水平线）的缩写，其作用是绘制一条水平线。

该标记为单标记。

任务2 搭建简单学院网站 19

4．换行标记

换行标记的语法格式如下。

<br>

例 2-5 在项目 chapter02 中新建一个网页文件，在代码中使用换行标记，文件名为

example05.html，代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>换行标记</title>

</head>

<body>

<h1>冬夜读书示子聿</h1>

<hr>

<h3>[宋] 陆游</h3>

<p>

古人学问无遗力，<br>

少壮工夫老始成。<br>

纸上得来终觉浅，<br>

绝知此事要躬行。

</p>

</body>

</html>

浏览网页，效果如图 2-10 所示。

图2-10 换行标记

5．字体样式标记

字体样式标记可以设置文字的粗体、斜体、删除线和下画线效果。字体样式标记如图 2-11

说明 “br”是英文“break”的缩写，其作用是强制换行。该标记为单标记。

注意 使用标记<br>换行后，换行后的文字和上面的文字保持相同的属性，仍然属

于同一个段落。也就是说，<br>使文字换行但不分段。

20 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

所示。

图2-11 字体样式标记

例 2-6 在项目 chapter02 中新建一个网页文件，在代码中使用字体样式标记，文件名为

example06.html，代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>字体样式标记</title>

</head>

<body>

<h1>冬夜读书示子聿</h1>

<hr>

<h3>[宋] 陆游</h3>

<p>

<strong>古人学问无遗力，</strong><br>

<em>少壮工夫老始成。</em><br>

<del>纸上得来终觉浅，</del><br>

<ins>绝知此事要躬行。</ins>

</p>

</body>

</html>

浏览网页，效果如图 2-12 所示。

图2-12 字体样式标记

6．特殊字符

在网页设计过程中，除了显示文字以外，有时还需要插入一些特殊字符，如版权符号、

注册商标、货币符号等。这些字符需要用一些符号代码来表示。表 2-1 列出了常用特殊字符

的符号代码。

32 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

2.3 任务实现

本节在前面学习 HTML 基本标记的基础上，综合使用各种标记及标记属

性搭建简单学院网站。

2.3.1 创建网站目录

2.1 节中已展示过简单学院网站由多个页面构成，而且用到了图像，为了便于操作和组织

这些文件，先创建网站目录 school，再创建 images 目录，步骤如下。

（1）右击项目名称“chapter02”，选择“新建”|“目录”选项，创建目录 school。

（2）右击目录名称“school”，选择“新建”|“目录”选项，创建目录 images，用于存放

图像文件，把本任务提供的素材中的图像复制到该目录中。

2.3.2 创建网站首页

首先对首页的结构进行分析，然后在项目中创建页面文件，最后使用 HTML 相应标记添

加页面的内容。

1．页面分析

分析图 2-1 所示的首页，该页面有标题文字、带有超链接的文字以及图像等。标题文字

使用标记<h2>设置；带有超链接的文字使用段落标记<p>和超链接标记<a>设置；换行使用

<br>标记设置；图像使用<img>标记设置。

2．创建首页

右击目录名称“school”，选择“新建”|“html 文件”选项，将文件命名为 index.html，

并添加代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>未来信息学院</title>

</head>

<body>

<h2>欢迎来到未来信息学院</h2>

<hr>

<p><a href=\"#\">学院简介</a><br>

<a href=\"#\">学院新闻</a><br>

<a href=\"#\">专业介绍</a><br>

<a href=\"#\">招生就业</a>

</p>

<p><img src=\"images/school1.jpg\" width=\"400\" alt=\"学院鸟瞰图\" title=\"学院鸟瞰图\"></p>

<p>友情链接：<a href=\"https://www.baidu.com\" target=\"_blank\">百度</a>&nbsp;&nbsp;

<a href=\" https://www.sdcit.edu.cn\" target=\"_blank\">学院官网</a></p>

<hr>

<p>版权所有&copy;未来信息学院</p>

微课视频

微课 2-6：

任务实现

任务2 搭建简单学院网站 33

</body>

</html>

浏览网页，效果如图 2-1 所示。

2.3.3 创建学院简介页面

首先对学院简介页面的结构进行分析，然后在项目中创建页面文件，最后使用 HTML 相

应标记添加页面的内容。

1．页面分析

分析图 2-2 所示的学院简介页面，该页面有标题文字和段落文字等。标题文字使用<h2>

标记设置；水平线使用<hr>标记设置；段落文字使用<p>标记设置；“返回”超链接使用<a>

标记设置，用于返回首页。

2．创建学院简介页面

右击目录名称“school”，选择“新建”|“html 文件”选项，将文件命名为 intr.html，并

添加代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>学院简介</title>

</head>

<body>

<h2>学院简介</h2>

<hr>

<p>未来信息学院是省人民政府批准设立、教育部备案的公办省属普通高等学校，学校秉持“以服务发展为宗

旨，以促进就业为导向”的办学方针，遵循“以人为本、德技双馨、产教融合、服务社会”的办学理念，以“建设有特色高

水平高职院校”为目标，建立了开放创新强校模式，累积了优质的教育资源，形成了良好的育人环境。学校的管理水平、教

学质量、办学特色得到社会各界的广泛肯定。</p>

<p>学校是教育部批准的“国家示范性软件职业技术学院”首批建设单位，部队士官人才培养定点院校，“3+2”

对口贯通分段培养本科招生试点院校，省示范性高职单独招生试点院校；是国家首批“电子信息产业高技能人才培训基地”

“省级服务外包人才培训基地”“省级劳务外派培训基地”“省信息安全培训中心”；荣获“全国信息产业系统先进集体”“职

业教育先进集体”“德育工作优秀高校”等称号。</p>

<hr>

<p>版权所有&copy;未来信息学院</p>

<p><a href=\"index.html\">返回</a></p>

</body>

</html>

浏览网页，效果如图 2-2 所示。

2.3.4 创建学院新闻页面

首先对学院新闻页面的结构进行分析，然后在项目中创建页面文件，最后使用 HTML 相

应标记添加页面的内容。

1．页面分析

分析图 2-3 所示的学院新闻页面，该页面主要由标题文字和列表文字组成。标题文字使

34 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

用<h2>标记设置；列表文字使用<ul>标记设置；“返回”超链接使用<a>标记设置，用于返回

到首页。

2．创建学院新闻页面

右击目录名称“school”，选择“新建”|“html 文件”选项，将文件命名为 news.html，

并添加代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>学院新闻</title>

</head>

<body>

<h2>学院新闻</h2>

<hr>

<ul>

<li><a href=\"#\" target=\"_blank\">学校联合发起成立软件行业产教联盟(2021-04-09)</a>

</li>

<li><a href=\"#\" target=\"_blank\">学校“四个推进”掀起党史学习教育热潮(2021-04-08)

</a></li>

<li><a href=\"#\" target=\"_blank\">学校召开 2021 年度体育工作会议(2021-04-02 )</a>

</li>

<li><a href=\"#\" target=\"_blank\">我校举行“铭记历史 缅怀先烈”清明节祭扫先烈活动

(2021-04-01)</a></li>

<li><a href=\"#\" target=\"_blank\">中国工业互联网研究院来我校交流访问(2021-03-30)</a>

</li>

<li><a href=\"#\" target=\"_blank\">学校召开党务干部业务培训会议(2021-03-30)</a></li>

<li><a href=\"#\" target=\"_blank\">我校举行示范课建设专题讲座(2021-03-30)</a></li>

</ul>

<hr>

<p>版权所有&copy; 未来信息学院</p>

<p><a href=\"index.html\">返回</a></p>

</body>

</html>

浏览网页，效果如图 2-3 所示。

2.3.5 创建新闻详情页面

首先对新闻详情页面的结构进行分析，然后在项目中创建该页面，最后使用 HTML 相应

标记添加页面的内容。

1．页面分析

分析图 2-4 所示的新闻详情页面，该页面主要由标题文字、段落文字和图像等组成。标

题文字使用<h2>和<h4>标记设置；段落文字使用<p>标记设置；图像使用<img>标记设置；

“返回”超链接使用<a>标记设置，用于返回到首页。

2．创建新闻详情页面

右击目录名称“school”，选择“新建”|“html 文件”选项，将文件命名为 news1.html，

任务2 搭建简单学院网站 35

并添加代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>学校联合发起成立软件行业产教联盟</title>

</head>

<body>

<h2>学校联合发起成立软件行业产教联盟</h2>

<h4>撰稿人：软件与大数据系 时间：2021-04-09 20:33:17 浏览次数：181 次</h4>

<hr>

<p>4 月 9 日，软件行业产教联盟成立大会在省城举行，会上举行了省优秀软件企业和优秀软件产品颁奖仪式，

主题演讲活动于同日举办。</p>

<p>软件行业产教联盟是在省工业和信息化厅指导下，由我校和浪潮集团、省软件行业协会联合发起成立的，

联盟有企业会员 196 家、高校会员 55 所。我校任联盟副理事长单位。</p>

<img src=\"images/lianmeng.jpg\" alt=\"成立现场\">

<hr>

<p>版权所有&copy;未来信息学院</p>

<p><a href=\"news.html\">返回</a></p>

</body>

</html>

浏览网页，效果如图 2-4 所示。

至此，4 个页面创建完成。最后，打开 index.html 页面，修改该页面的代码，将“学院简

介”“学院新闻”文字的超链接修改成相应的页面文件，代码如下。

<p><a href=\"intr.html\">学院简介</a><br>

<a href=\"news.html\">学院新闻</a><br>

<a href=\"#\">专业介绍</a><br>

<a href=\"#\">招生就业</a></p>

然后，在学院新闻页面中将第一条新闻的超链接修改成新闻详情页面文件，代码如下。

<li><a href=\"news1.html\" target=\"_blank\">学校联合发起成立软件行业产教联盟(2021-04-09)</a>

</li>

最后，预览各个网页，检查是否能从首页链接到其他页面以及从其他页面能否返回到

首页。

另外，本项目中的专业介绍和招生就业页面由同学们在课后自己设计完成。

任务小结

本任务围绕简单学院网站的搭建，介绍了 HTML5 文档的基本结构，以及文本标记、列

表标记、超链接标记和图像标记等的使用方法，并综合利用这些标记完成了简单学院网站的

搭建。本任务介绍的主要知识点如图 2-28 所示。

注意 本项目的实现代码形式并不是只有上述案例形式。采用其他的标记或属性实

现同样的效果也是可以的，代码的编写其实很灵活，但越简洁越好。

36 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

图2-28 任务2的主要知识点

习题 2

一、单项选择题

1．网页的主体内容写在哪个标记内部？（ ）

A．<body> B．<head> C．<p> D．<html>

2．以下标记中，用于设置页面标题的是（ ）。

A．<title> B．<caption> C．<head> D．<html>

3．可以不用发布就能在本地计算机上浏览的页面，使用的编写语言是（ ）。

A．ASP B．HTML C．PHP D．JSP

4．以下标记中，没有对应的结束标记的是（ ）。

A．<body> B．<br> C．<html> D．<title>

5．<title>和</title>标记必须包含在下述哪对标记中？（ ）

A．<body>和</body> B．<table>和</table>

C．<head>和</head> D．<p>和</p>

6．请选择能产生粗体字的 HTML 标记。（ ）

任务2 搭建简单学院网站 37

A．<bold> B．<bb> C．<strong> D．<bld>

7．在下列的 HTML 标记中，哪个可以实现换行？（ ）

A．<br> B．<enter> C．<break> D．<b>

8．在下列的 HTML 标记中，哪个表示层级最大的标题？（ ）

A．<h6> B．<h5> C．<h2> D．<h1>

9．用于标识一个段落的 HTML 标记是（ ）。

A．<b>和</b> B．<br>和</br> C．<p>和</p> D．<li>和</li>

10．在下列的 HTML 代码中，哪个可以插入图像？（ ）

A．<img href=\"image.gif\" alt=\"\"> B．<image src=\"image.gif\" alt=\"\">

C．<img src=\"image.gif\" alt=\"\"> D．<img>image.gif</img>

11．建立超链接时，要在新窗口显示网页，需要加入的标记属性是（ ）。

A．target=\"_blank\" B．border=\"1\" C．name=\"target\" D．#

12．包含图像的网页文件，其扩展名应该是（ ）。

A．.jpg B．.gif C．.pic D．.html

二、判断题

1．网页文件是用一种标记语言书写的，这种语言被称为 HTML，制作一个网站就等于制

作一个网页。 （ ）

2．网站的首页文件通常是 index.html，它必须存放在网站的根目录中。 （ ）

3．HTML5 标记是不区分大小写的，但通常用小写字母。 （ ）

4．如果文本需要换行，则可以使用换行标记<br>。 （ ）

5．<hr>标记可以在网页中生成一条水平线，它没有结束标记。 （ ）

6．标题标记<h1>～<h6>都有换行的功能。 （ ）

7．关于网页中图片的大小，可以在 HTML5 代码中直接指定其宽、高，但最好在图像处

理软件中事先处理好图像的大小。 （ ）

8．JPG 格式能提供良好的、损失极少的压缩，这种格式可以用于制作透明和多帧的动画。

（ ）

9．书写图片路径时，尽量使用绝对路径，因为这样更稳定、简洁。 （ ）

10．在 HTML5 页面中，通过单击锚点链接，用户能够快速定位到目标内容。 （ ）

实训 2

一、实训目的

1．练习常用 HTML5 标记的使用。

2．学会使用 HTML5 标记创建简单网站。

二、实训内容

1．创建图文混排网页，显示图 2-29 所示的网页内容。网页中的标题文字为“网页设计

2-7：实训 2

参考步骤

38 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

中色彩的运用”｡

图2-29 第1题页面

2．创建宋词赏析页面，在“宋词赏析”标题下面创建“水调歌头”“蝶恋花”“念奴娇”

3 个锚点链接，单击每个锚点链接时页面定位到相应的内容处，如图 2-30 所示。

图2-30 第2题页面

3．创意设计：创建一个个人网站项目，对自己进行全面介绍，要求如下。

（1）包含一个主页面和 3 个子页面，主页面和子页面可以相互链接。

（2）在主页中创建友情链接，链接到自己喜欢的两个网站。

（3）至少有一个页面包含无序列表。

（4）至少有一个页面包含锚点链接。

（5）在每个页面中合理使用文字、图像等。

三、实训总结

写出常用的 HTML5 标记及其作用。

扩展阅读

HTML5 标准的制定

2014 年 10 月，互联网技术组织 W3C 正式宣布，历时 8 年的 HTML5 标准制定工作全面

完成，正式开始面向行业做出推荐。

任务2 搭建简单学院网站 39

W3C 由万维网之父蒂姆·伯纳斯·李在 1994 年创办，是制定网络标准的权威国际组织。

当前互联网广泛使用的 HTML、XHTML、CSS、XML 等的标准均由 W3C 制定。目前，谷歌、

雅虎、诺基亚、苹果等知名互联网公司都是 W3C 成员。

W3C 是全球 Web 技术的权威技术标准组织，推动了 Web 技术，尤其是 HTML 技术的一

代代演进。该组织表示，在过去多年时间里，其联合了全球 60 多家公司，共同完善 HTML5

标准，并解决了 4000 多个 bug。

HTML5 代表了新一代的网页应用开发技术，可以提供比“HTML”要强大得多的功能，

而在 HTML5 标准并未成型的背景下，各家公司所实施的 HTML5 技术，以及不同浏览器的

兼容状况，存在不统一的情况。

HTML5 权威标准板上钉钉，有助于开发人员进行网页应用开发。

我国的阿里巴巴、腾讯、百度、数字天堂、360、中国移动、中国联通、华为等公司都是

W3C 成员，在 HTML5 工作组里积极发挥作用。可喜的是，随着中国互联网技术的飞速发展，

我国在 W3C 中的成员越来越多。我们目前已不只是接受国外的标准，而是参与国际标准的制

订，我们国家的科技实力正越来越强。

任务3

美化简单学院网站

李华在学习了任务 2 后，他又提出了新的问题，他感觉任务 2 创建的网

站不太好看，比如，网页中的标题和图像在浏览器中没有居中、文字颜色全

是黑色，总之，他想让网站更美观，也就是想对网页中的元素进行美化。接

下来，我们就和李华一起来学习对简单学院网站进行美化，这就要用到 CSS

这个“美颜利器”了。

情景导入

学习及

素养目标

◎ 理解 CSS 的基本语法；

◎ 掌握 CSS 引入网页的方式；

◎ 掌握常用 CSS 文本属性的用法；

◎ 熟练使用 CSS 文本属性设置样式；

◎ 在美化网页的过程中培养正确的审美观。

任务3 美化简单学院网站 41

3.1 任务描述

对任务 2 中搭建的简单学院网站进行美化，页面浏览效果如图 3-1～图 3-4 所示，具体要

求如下。

（1）每个页面的标题在浏览器中居中显示，标题文字为红色或橙色。

（2）图片在浏览器中居中显示。

（3）正文文本首行缩进 2 个字符，行高为 25px。

（4）版权信息在浏览器中居中显示，“返回”超链接在浏览器中居右显示。

图3-1 网站首页 图3-2 学院简介页面

图3-3 学院新闻页面 图3-4 新闻详情页面

3.2 知识准备

CSS 功能强大，能实现比 HTML 更多的网页元素样式，几乎能定义所有的网页元素。现

在几乎所有漂亮的网页都使用了 CSS，CSS 已经成为 Web 前端开发必不可少

的工具之一。很多网页都使用 CSS 添加了各种酷炫的效果。

3.2.1 什么是 CSS

CSS 即串联样式表，是由 W3C 的 CSS 工作组创建和维护的。它是一种不

需要编译、可直接由浏览器执行的样式表语言，用于描述网页的标准格式，它

微课视频

微课 3-1：

美颜利器——

CSS

42 Web前端开发案例教程（HTML5+CSS3）（项目式微课版）

扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。

样式就是格式，网页显示的文字的大小和颜色、图片位置、网页布局等，都是网页显示

的样式。串联是指当 HTML 文件引用多个 CSS 样式时，如果 CSS 的定义发生冲突，浏览器

就按照 CSS 的样式优先级来应用样式。

CSS 能将样式的定义与 HTML 文件结构分离。对于由几百个网页组成的大型网站来说，

要使所有的网页样式风格统一，可以定义一个 CSS 文件，让几百个网页都调用这个文件。如

果要修改网页的样式，只需修改 CSS 文件就可以了。CSS 已经从 CSS1 发展到现在的 CSS3，

我们现在所学习的就是 CSS3 版本。

3.2.2 引入 CSS 样式

要想使用 CSS 样式修饰网页，就需要在 HTML 文档中引入 CSS 样式。CSS

主要提供了以下 3 种引入方式。

1．行内样式

行内样式也称为内联样式，是通过标记的 style 属性设置的元素样式。其基本语法格

式如下。

<标记 style=\"属性:属性值; 属性:属性值；...\">内容</标记>

例 3-1 在 HBuilderX 中新建项目，项目名称为 chapter03，选择模板类型为“基本

HTML 项目”，该项目包含 css、img 和 js 目录，分别用于存放样式表文件、图像文件和

脚本文件。在项目内新建网页文件，使用行内样式定义元素样式，文件名为

example01.html，代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset=\"utf-8\">

<title>行内样式</title>

</head>

<body>

<h1 style=\"text-align:center; color:#F00;\">未来信息学院</h1>

</body>

</html>

说明 （1）该格式中的 style 是标记的属性，实际上，任何 HTML 标记都拥有 style

属性，通过该属性可以设置标记的样式。

（2）引号内的属性指的是 CSS 属性，不同于 HTML 标记的属性。属性和属

性值书写时不区分大小写，按照书写习惯一般采用小写字母形式。

（3）引号内的属性和属性值之间用英文状态下的冒号分隔，多个属性之间必

须用英文状态下的分号隔开，最后一个属性值后的分号可以省略。

其中，（2）和（3）对于内部样式表和外部样式表中的样式同样适用。

微课视频

微课 3-2：引

入 CSS 样式