第3章格式化文本与段落
本章学习目标
网页内容的排版包括文本格式化、段落格式化和整个页面的格式化，这是设计一个网页的基础。文本格式化标记分为字体标记、文字修饰标记。字体标记和文字修饰标记包括对于字体样式的一些特殊修改。段落格式化标记分为段落标记、换行标记、水平分隔线标记等。
通过对文本与段落格式化知识的学习，读者能够掌握页面内容的初步设计，理解并掌握HTML标题字标记、空格及特殊符号的使用； 理解格式化标记中的文本修饰标记、计算机输出标记、引用和术语标记以及字体font标记的语法和使用； 理解段落与排版标记的语法，学会编写简易的Web页面代码。
Web前端开发工程师应知应会以下内容：
掌握标题字(h1~h6)标记的语法及属性设置方法。
理解文本格式化标记的类型与作用，并学会使用各种样式。
学会使用字体font标记。
学会使用段落与排版标记。
学会使用各类格式化标记设计简易的Web页面。
3．1Web页面初步设计
Web页面设计需要遵循简洁、一致性、有好的对比度的设计原则。简洁是指以满足人们的实际需求为目标，要求简练，准确。一致性是指网站中的各个页面使用相同的页边距，页面中的每个元素与整个页面以及站点的色彩和风格保持一致。对比度在于强调、突出关键内容，以吸引浏览者，鼓励他们去发掘更深层次的内容。
3．1．1向Web页面中添加文字信息
在HTML文件中，主体内容被包含在<body></body>标记之间，并且body标记有很多自身的属性，例如设置页面背景、设置页面边界等。
1. 基本语法
<body>向这里添加内容</body>
2. 语法说明
body标记定义文档的主体。
body标记包含文档的所有内容(例如文本、超链接、图像、表格和列表等)。
一个简单的HTML文档必须包含最基本的必备的标记。
3．1．2标题字标记
标题字标记由h1~h6共6种标记组成。标记中的字母h是英语Heading的简称。作为标题字，h1标记定义最大的标题字，h6标记定义最小的标题字。h1标记到h6标记属于块级标记，它们必须在HTML中首尾成对出现。浏览器会自动地在标题的前后添加空行。
1. 基本语法
<h1 align="left|center|right|justify">1号标题文字</h1>
<h2 align="left|center|right|justify">2号标题文字</h2>
<h3 align="left|center|right|justify">3号标题文字</h3>
<h4 align="left|center|right|justify">4号标题文字</h4>
<h5 align="left|center|right|justify">5号标题文字</h5>
<h6 align="left|center|right|justify">6号标题文字</h6>
2. 语法说明
h后面的数字越小，标题字越大。标题字标记的align属性用来定义标题字的对齐方式，对齐方式有4种，分别是left、center、right、justify。但是一般推荐设计者使用CSS样式表来定义对齐方式。
标题文字的大小由它们的重要性决定，等级越高的标题字号越大。在设计时要对各级标题有所规划。
【例311】标题字标记的应用。
其代码如下，页面效果如图31所示。
1<!--edu_3_1_1.html-->
2<!doctype html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<title>直接插入内容和标题字标记的应用</title>
7</head>
8<body>
9<!-- 不使用标记，直接插入内容 -->
10不使用任何标记，直接插入内容。
11<!-- 使用h1-h6标题字标记，并分别应用对齐方式 -->
12<h1 align="center">Web前端开发技术</h1>
13<h2 align="left" >Web前端开发技术</h2>
14<h3 align="center">Web前端开发技术</h3>
15<h4 align="right">Web前端开发技术</h4>
16<h5 align="justify">Web前端开发技术</h5>
17<h6 align="center">Web前端开发技术</h6>
18</body>
19</html>
图31直接插入内容和标题字应用
3．1．3添加空格与特殊符号
在HTML文档中，添加空格的方式与在其他文档中添加空格的方式不同，在网页中通过代码控制来添加空格，而在其他编辑器中通过键盘空格键来输入空格。
1. 基本语法
<body>
<®×
</body>
2. 语法说明
在网页中添加空格使用“ ”，其中“nbsp”是指Non Breaking Space，空格数量与“ ”的个数相同。
在网页中插入特殊字符与插入空格符号的方式相同。特殊字符如表31所示。
表31特殊字符对应的符号代码
显 示 结 果说明符 号 代 码
显示一个空格
<小于<
>大于>
&&符号&
"双引号"
版权©
注册商标®
×乘号×
÷除号÷
对于HTML文档中特殊字符对应的代码，浏览器解释后会显示对应的特殊符号。
【例312】插入特殊符号的应用。
其代码如下，页面效果如图32所示。
1<!-- edu_3_1_2.html -->
2<!DOCTYPE html>
3<html>
4<head>
5<meta charset="utf-8">
6<title>插入特殊符号</title>
7</head>
8<body>
9 目前在IT公司中,前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系地传授前端课程，众多培训机构也将前端知识作为主流课程，也有越来越多的同学加入前端学习的行列中，作为前端工程师或者前端的学习者，我们有必要去了解前端的发展史。<br> 那么首先让我们来了解一下浏览器的发展历程。
10<hr color="blue">
11<p align="center">版权所有©Web前端技术大讲堂</p>
12</body>
13</html>
代码中第9行有两处插入4个特殊符号-空格和<br>换行，第10行插入蓝色的水平分隔线，第11行插入版权特殊符号“©”。
图32空格与特殊符号的应用
3．2格式化文本标记
HTML中提供了很多格式化文本的标记，例如文字加粗、斜体、下画线、底纹、上/下标等。
3．2．1文本修饰标记
对于文本修饰标记，各类浏览器均支持，在各类网页开发工具中仍然有这类标记。常见的文本修饰标记如表32所示。
表32常见的文本修饰标记
标记说明
<b>软件工程专业！</b>定义粗体
<i>软件工程专业！</i>定义斜体
<u>软件工程专业！</u>定义下画线
<del>软件工程专业！</del>定义删除线
<sup>软件工程专业！</sup>定义上标
<sub>软件工程专业！</sub>定义下标
<strong>软件工程专业！</strong>定义着重文字，与<b></b>的效果相同
<em>软件工程专业！</em>定义加重语气，与<i></i>的效果相同
<small>软件工程专业！</small>变小字号
<big>软件工程专业！</big>变大字号
【例321】文本修饰标记的应用。
其代码如下，页面效果如图33所示。
1<!-- edu_3_2_1.html -->
2<!doctype html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<title>文本修饰标记应用</title>
7<style type="text/css">
8 *{text-align:center; /*所有标记的内容居中显示*/}
9</style>
10</head>
11<body>
12<h3 align="center">文本修饰标记应用</h3>
13<hr size="2" color="red">
14<！--修饰标记应用-->
15<b>软件工程专业全国就业最好!</b><br>
16<i>软件工程专业全国就业最好!</i><br>
17<u>软件工程专业全国就业最好!</u><br>
18<del>软件工程专业全国就业最好!</del><br>
19 X<sup>2</sup>+2X+5=0<br>
20 X<sub>1</sub>=2<br>
21<small>软件工程专业全国就业最好!</small><br>
22<big>软件工程专业全国就业最好!</big><br>
23<strong>软件工程!</strong>
24<em>软件工程!</em>
25</body>
26</html>
图33文本修饰标记的应用
上述代码中第12行是标题字标记的应用； 第14行是注释标记的应用； 第15~24行定义不同的文本修饰标记。
3．2．2字体标记
在不指定任何样式的情况下，浏览器会把字体显示为16px、黑色、宋体，因此在设计网页时要根据需要更改不同段落的字体。在HTML5中可以使用CSS中的字体属性替代。
字体标记（font）规定文本的字体系列、字体尺寸、字体颜色，所有浏览器均支持font标记。
1. 基本语法
<font face=""size=""color="" >…</font>
2. 属性说明
字体标记（font）的属性、取值及说明如表33所示。
表33字体标记（font）的属性、取值及说明
属性取值说明
size+1~+7、1~7、-1~-7正数字越大字号越大，负数字越大字号越小。“+”表示字号比原来的字号大一些，“-”表示字号比原来的字号小一些
colorrgb(r,g,b)、rgb(r%,g%,b%)
#rrggbb或#rgb
colorname规定文本的颜色。可以使用rgb（）函数、十六进制数、颜色的英文名称来表达
face字体1，字体2，…，字体nface属性可以有多个值，用逗号分隔。字体使用方式为从左向右依次选用。如果前面的字体不存在，则使用后一个字体。若都不存在，则默认使用“宋体”
【例322】网页字体样式的应用。
其代码如下，页面效果如图34所示。
1<!-- edu_3_2_2.html -->
2<!doctype html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<title>文字样式</title>
7 </head>
8 <body>
9<strong>文字样式为黑体、颜色#000FFF、大小从-1到-7:</strong>
10<font face="黑体" size="-1" color="#000FFF">-1字</font>
11<font face="黑体" size="-3" color="#000FFF">-3字</font>
12<font face="黑体" size="-5" color="#000FFF">-5字</font>
13<font face="黑体" size="-7" color="#000FFF">-7字</font><br>
14<strong>文字样式为宋体、颜色#FF0066、大小从1到7:</strong>
15<font face="宋体" size="2" color="#FF0066">2字</font>
16<font face="宋体" size="4" color="#FF0066">4字</font>
17<font face="宋体" size="6" color="#FF0066">6字</font><br>
18<strong>文字样式为隶书、颜色#FF0066、大小从+1到+7： </strong>
19<font face="黑体" size="+1" color="#FF0066">1字</font>
20<font face="黑体" size="+3" color="#FF0066">3字</font>
21<font face="黑体" size="+5" color="#FF0066">5字</font>
22<font face="黑体" size="+7" color="#FF0066">7字</font>
23</body>
24</html>
代码中第10~13行设置字体为黑体、颜色为#000FFF、大小为-1~-7； 第15~17行设置字体为宋体、颜色为#FF0066、大小为1~7； 第19~22行设置字体为“黑体、颜色为#FF0066、大小为+1~+7。
图34网页字体样式的应用
3．3段落与排版标记
网页的外观是否美观，在很大程度上取决于其排版。当页面中出现大段的文字时，通常采用分段进行规划，对换行也有极其严格的划分。本节从段落的细节设置入手，利用段落与排版标记处理大段的文字。
3．3．1段落标记
在HTML文档中，合理地使用段落会使文字的显示更加美观、表达更加清晰。段落标记p用来开始一个段落，它是一个块级标记，该标记中不能再包含其他的任何块级标记。
基本语法
<p align="left|center|right|justify">段落正文内容</p>
p标记会自动在其前后创建一些空白。浏览器会自动添加这些空间。段落p标记的align属性有4个可选值，分别表示左对齐、居中对齐、右对齐、两端对齐。
3．3．2换行标记
在HTML文档中插入换行标记br的作用和在普通文档中插入回车符的作用一样，都表示强制性换行。
基本语法
<br>或<br/>
在HTML文档中，换行br标记属于单标记，表示插入换行符。
3．3．3水平分隔线标记
水平分隔线标记hr用一条线将页面区域按照功能进行分隔。hr标记是单标记。
基本语法
<hr width="" size="" color="" align="" noshade>
水平分隔线标记hr的属性、取值及说明如表34所示。
表34hr标记的属性、取值及说明
属性取值说明
width像素(px)或百分比设置水平分隔线的宽度
size整数，单位为px设置水平分隔线的高度
colorrgb（）函数、十六进制数、颜色的英文名称设置水平分隔线的颜色
alignleft|center|right设置水平分隔线的对齐方式
【例331】段落、换行与水平分隔线标记的应用。
其代码如下，页面效果如图35所示。
1<!-- edu_3_3_1.html -->
2<!doctype html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<title>段落、换行与水平分隔线标记的应用</title>
7</head>
8<body>
9<h5 align="center">段落p标记对齐方式</h5>
10<hr color="blue">
11<p align="left">网页的外观是否美观，很大程度上取决于其排版。</p>
12<p align="center">网页的外观是否美观，很大程度上取决于其排版。</p>
13<p align="right">网页的外观是否美观，很大程度上取决于其排版。</p>
14<h4>换行与水平分隔线标记的应用</h4>
15<p><em>大小为3、宽度为60%、居中</em></p>
16<hr size="3" width="60%" color="#330099" align="center">
17<strong>宽度为600px、大小为5、绿色、居右对齐</strong><br><br>
18<hr width="600px" size="5" color="#00ee99" align="right">
19</body>
20</html>
图35段落与水平分隔线应用
代码中第11~13行定义3个p标记，分别应用对齐属性； 第16行插入一条“大小为3、宽度为60%、居中”的水平分隔线； 第18行插入一条“大小为5、宽度为600px、居右对齐”的水平分隔线。
3．3．4拼音/音标注释标记
图36ruby标记的
应用
ruby标记定义ruby注释(中文注音或字符)。ruby标记与rt标记一同使用。ruby标记由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt标记组成，还包括可选的rp标记，定义当浏览器不支持ruby标记时显示的内容。其效果如图36所示。
ruby标记用来将需要注释或注音标的文字内容包围住。
rt标记中放置音标或注释，这个标记要跟在需要注释的文本的后面。
rp标记是防备那些不支持ruby标记的浏览器，主要用来放置括号。对于支持这个标记的浏览器，rp标记的CSS样式是{display:none;}，也就是不可见。
基本语法
<ruby>
中<rp>(</rp><rt>zhong</rt><rp>)</rp>
国<rp>(</rp><rt>guo</rt><rp>)</rp>
</ruby>
3．3．5段落缩进标记
段落缩进标记blockquote是块级标记，常称为块引用标记。该标记引用的内容能够向右缩进5个英文字符的位置，并在其内容的周围增加外边距。
基本语法
<blockquote>引用的内容</blockquote>
【例332】预格式化的应用。
其代码如下，页面效果如图37所示。
1<!-- edu_3_3_2.html -->
2<!doctype html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<title>注释、块引用和预格式化标记的应用</title>
7<style type="text/css">
8ruby {font-size: 42px;font-family: 黑体;text-align: right;}
9</style>
10</head>
11<body>
12<h5>注释ruby标记-标注读音</h5>
13<p align="center">
14<ruby>
15智<rp>(</rp> <rt>zhì</rt> <rp>)</rp>
16慧<rp>(</rp> <rt>huì</rt> <rp>)</rp>
17地<rp>(</rp> <rt>dì</rt> <rp>)</rp>
18球<rp>(</rp> <rt>qiú</rt> <rp>)</rp>
19</ruby>
20</p>
21<h5>段落缩进标记的应用</h5>
22<hr color="green">
23<p>这段文字没有缩进。段落缩进blockquote标记是块级标记，常称为块引用标记。该标记引用的内容能够向右缩进5个英文字符的位置，并在其内容的周围增加了外边距。</p>
24<blockquote>这段文字行首缩进5个字符位置。段落缩进blockquote标记是块级标记，常称为块引用标记。该标记引用的内容能够向右缩进5个英文字符的位置，并在其内容的周围增加了外边距。</blockquote>
25<!-- pre标记：原样输出 -->
26<h3>
27<pre>
28 春 晓
29
30 孟浩然
31 春眠不觉晓，
32处处闻啼鸟。
33 夜来风雨声，
34花落知多少。
35 </pre>
36</h3>
37</body>
38</html>
图37预格式化
代码中第14~19行设置ruby标记标注汉语拼音； 第23行的文字没有设置块引用，没有缩进； 第24行设置块引用，这段文字行首缩进5个字符位置； 第27~35行设置预格式化标记，所有内容原样输出在页面上。
3．3．6预格式化标记
在HTML中利用成对的<pre></pre>标记对网页中的文字段落进行预格式化，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。
基本语法
<pre>预格式化文本</pre>
【例333】预格式化的应用。
其代码如下，页面效果如图38所示。
1<!-- edu_3_3_4.html -->
2<!doctype html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<title>预格式化</title>
7</head>
8<body>
9 <h1><pre>
10春 晓
11
12孟浩然
13春眠不觉晓，
14处处闻啼鸟。
15夜来风雨声，
16花落知多少。
17</pre></h1>
18</body>
19</html>
代码中第4~7行是HTML的头部，包含元信息、页面标题； 第8~18行是HTML的主体，其中第9~17行对文字段落进行预格式化。
图38预格式化的应用
3．4思政案例3——公民基本道德规范
以“公民基本道德规范二十字”为主题，参照给定的HTML代码完成Web网页的设计,页面效果如图39所示。
图39“公民基本道德规范”页面
HTML代码如下：
1<!-- edu_3_4_1.html -->
2<!doctype html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<title>公民基本道德规范</title>
7<style type="text/css">
8h2{background: #FE0000;line-height: 50px;color: white;}
9img{float: left;margin: 20px;}
10blockquote,p{font-size: 18px;}
11</style>
12</head>
13<body>
14<h2 align="center">公民基本道德规范</h2>
15<hr width="100%" size="3" color="red">
16<img src="image-3-4-1.jpg">
17<h3>公民基本道德规范二十字</h3>
18<pre>
19爱国守法，明礼诚信，团结友善，勤俭自强，敬业奉献。
20</pre>
21<h3>公民基本道德规范诠释</h3>
22<p> 爱国指对祖国的忠诚和热爱，守法指人们按照法律规范进行活动。明礼就是对社会交往规则、仪式和习惯的正确理解和运用，诚信通常指诚实守信。团结指人们为了实现共同的利益和目标而在思想和行动上相互一致，友善指人与人之间相互友好帮助共求进步。勤俭即勤劳节俭，自强指人对自己的能力和行为所具有的自信和进取意识。敬业指要有正确的职业观念，热爱本职工作和对技术精益求精，奉献指为国家和人民的利益贡献自己的力量，不计个人得失。这些基本行为准则，在同一道德体系中具有内容的广延性和层次的多样性，既包括社会主义的公民所必须共同遵守的最重要的行为准则，又涵盖了家庭、职业、公共生活等各个领域所应遵守的最基本的道德准则，适用于不同社会群体，与不同社会领域的具体道德规范融为一体，贯穿公民道德建设的全过程。
23</p>
24<blockquote>公民基本道德规范是指公民应当遵守的基本道德规范。</blockquote>
25<hr width="100%" size="3" color="red">
26<p align="center">Copyright© 中共中央《公民道德建设实施纲要》</p>
27</body>
28</html>
上述代码中第4~12行是HTML的头部,其中第8行定义h2标记样式： 背景颜色为#FE0000、行高为50px、文字颜色为白色； 第9行定义img标记样式： 向左浮动、边界为20px； 第10行定义blockquote、p标记样式： 字体大小为18px。第13~27行是HTML的主体，其中第14行应用标题字h2标记； 第15行、第25行定义两条水平分隔线； 第16行应用图像img标记，加载图像image341．jpg； 第17行和第21行应用标题字h3标记； 第18~20行应用预格式化标记； 第22行和第26行定义两个段落，分别应用空格和特殊符号； 第24行应用段落缩进标记。
本章小结
本章主要介绍了格式化文字与段落的各种标记，包括标题字标记、字体标记、文本修饰标记以及与段落相关的标记。<h1>~<h6>是标题字标记，通过align属性设置标题字的对齐方式。空格与特殊字符都需要通过代码控制来添加。字体标记主要用于改变文字的字体、颜色和大小。文本修饰标记主要是对文本进行一些特殊的修饰。
段落与排版标记会使网页文字显得更加清晰，本章介绍了段落p标记、换行br标记、水平分隔线hr标记、注释ruby标记、段落缩进blockquote标记的使用方法。
在网页设计中对网页的文字进行必要的布局并添加页面效果，从而使网页更加美观和丰富，要合理地使用本节介绍的各种文本和段落标记。
练习3
1. 选择题
(1) 下列属性中不是字体标记的属性的是（）。
A. align B. size C. color D. face
(2) 关于标题字标记的对齐方式，下列标记属性的取值不正确的是（）。
A. 居中对齐： <h1 align="middle">…</h1>
B. 右对齐： <h2 align="right">…</h2>
C. 左对齐： <h4 align="left">…</h4>
D. 两端对齐： <h6 align="justify">…</h6>
(3) 下列选项中表示字体标记的是（）。
A. <boby></body>B. <font></font>
C. <br>D. <p></p>
(4) 下列选项中表示段落标记的是()。
A. <html></html>B. <boby></body>
C. <p></p>D. <pre></pre>
(5) 在HTML中，<h3></h3>是（）标记。
A. 标题字 B. 预格式化
C. 换行D. 随意显示信息
(6) 在下列标记中，设置页面标题的标记是（）。
A. <title></title>B. <caption></caption>
C. <head> </head>D. <html></html>
(7) 下列标记中表示单标记的是（）。
A. body标记 B. br标记
C. html标记D. title标记
(8) <title></title>标记放在（）标记内。
A. <pre></pre> B. <head></head>
C. <body></body> D. </head> <body>
(9) 下列选项中表示版权符号的是（）。
A. < B. > C. ® D. ©
(10) HTML中<hr>的作用是（）。
A. 插入一条水平分隔线 B. 换行
C. 插入一个空格 D. 加粗字体
2. 填空题
(1) HTML网页文件的主体标记是，设置页面标题的标记是。
(2) HTML文档的开始标记是，结束标记是。
(3) 设置文档标题以及其他不在Web网页上显示的信息的开始标记是，结束标记是。
(4) 网页中可显示的信息包含在以为开始标记，以为结束标记之间。
(5) 网页标题会显示在浏览器的标题栏中，则网页标题可使用标记来定义。
(6) 与<b></b>标记功能相同的标记是； 与<i></i>标记功能相同的标记是。
(7) 标记由一个或多个需要解释/发音的字符和一个提供该信息的标记组成，还包括可选的标记，定义当浏览器不支持ruby标记时显示的内容。
3. 简答题
(1) 试比较段落标记与块引用标记的相同点与不同点。
(2) 简述有哪些段落与排版标记，并说明其作用。
实验3
1． 编写代码实现如图310所示的页面效果。要求如下：
(1) body标记： 设置左右空白200px、背景图像为imageex31．png、字体大小为18px。
(2) 标题： h3、居中。
(3) hr标记： 粗细为1px、颜色为#000FFF、宽度为100%。
(4) 其余可以使用p标记或不使用标记，使用空格和换行标记来实现效果。
图310“自荐信”页面
注： 在head标记中插入style标记。内容如下：
1<style type="text/css">
2body {background: url(image-ex-3-1.png) no-repeat left center;font-size: 18px;}
3</style>
2． 按要求设计Web页面，效果如图311所示。要求如下：
图311标题字标记及文本标记的应用
(1) body标记： 设置背景颜色为#F2FFC1。
(2) h2标记： 内容为“数学方程式”，样式采用style标记定义，颜色为红色、文本居中对齐。
(3) hr标记： 宽度为80%、大小为2px、颜色为蓝色。
(4) p标记： 文本居中显示，通过style标记定义字体大小为36px，将两个方程式插入其中。方程式分别为2x2+3x=9、x1+x2=10。
注： 在head标记中插入style标记。内容如下：
1<style type="text/css">
2h2{color:red;text-align:center;}
3p{font-size: 36px;}
4</style>