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