第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样式表来定义对齐方式。
标题文字的大小由它们的重要性决定,等级越高的标题字号越大。在设计时要对各级标题有所规划。





【例311】标题字标记的应用。
其代码如下,页面效果如图31所示。

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>  






图31直接插入内容和标题字应用





3.1.3添加空格与特殊符号
在HTML文档中,添加空格的方式与在其他文档中添加空格的方式不同,在网页中通过代码控制来添加空格,而在其他编辑器中通过键盘空格键来输入空格。
1.  基本语法

<body>

&nbsp;&lt;&reg;&times;

</body>





2.  语法说明
在网页中添加空格使用“&nbsp;”,其中“nbsp”是指Non Breaking Space,空格数量与“&nbsp;”的个数相同。
在网页中插入特殊字符与插入空格符号的方式相同。特殊字符如表31所示。


表31特殊字符对应的符号代码



显 示 结 果说明符 号 代 码


显示一个空格&nbsp;
<小于&lt;
>大于&gt;

&&符号&amp;

"双引号&quot;
版权&copy;
注册商标&reg;
×乘号&times;
÷除号&divide;

对于HTML文档中特殊字符对应的代码,浏览器解释后会显示对应的特殊符号。







【例312】插入特殊符号的应用。
其代码如下,页面效果如图32所示。

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&nbsp;&nbsp;&nbsp;&nbsp;目前在IT公司中,前端的岗位越来越成为不可或缺的,前端的地位也愈见明显,很多学校已经体系地传授前端课程,众多培训机构也将前端知识作为主流课程,也有越来越多的同学加入前端学习的行列中,作为前端工程师或者前端的学习者,我们有必要去了解前端的发展史。<br>&nbsp;&nbsp;&nbsp;&nbsp;那么首先让我们来了解一下浏览器的发展历程。  

10<hr color="blue">  

11<p align="center">版权所有&copy;Web前端技术大讲堂</p>  

12</body>  

13</html>  



代码中第9行有两处插入4个特殊符号-空格和<br>换行,第10行插入蓝色的水平分隔线,第11行插入版权特殊符号“&copy;”。



图32空格与特殊符号的应用


3.2格式化文本标记
HTML中提供了很多格式化文本的标记,例如文字加粗、斜体、下画线、底纹、上/下标等。
3.2.1文本修饰标记
对于文本修饰标记,各类浏览器均支持,在各类网页开发工具中仍然有这类标记。常见的文本修饰标记如表32所示。


表32常见的文本修饰标记




标记说明


<b>软件工程专业!</b>定义粗体
<i>软件工程专业!</i>定义斜体
<u>软件工程专业!</u>定义下画线
<del>软件工程专业!</del>定义删除线
<sup>软件工程专业!</sup>定义上标
<sub>软件工程专业!</sub>定义下标
<strong>软件工程专业!</strong>定义着重文字,与<b></b>的效果相同
<em>软件工程专业!</em>定义加重语气,与<i></i>的效果相同
<small>软件工程专业!</small>变小字号
<big>软件工程专业!</big>变大字号






【例321】文本修饰标记的应用。
其代码如下,页面效果如图33所示。


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>






图33文本修饰标记的应用



上述代码中第12行是标题字标记的应用; 第14行是注释标记的应用; 第15~24行定义不同的文本修饰标记。

3.2.2字体标记
在不指定任何样式的情况下,浏览器会把字体显示为16px、黑色、宋体,因此在设计网页时要根据需要更改不同段落的字体。在HTML5中可以使用CSS中的字体属性替代。
字体标记(font)规定文本的字体系列、字体尺寸、字体颜色,所有浏览器均支持font标记。
1. 基本语法

<font face=""size=""color="" >…</font>




2.  属性说明
字体标记(font)的属性、取值及说明如表33所示。



表33字体标记(font)的属性、取值及说明



属性取值说明


size+1~+7、1~7、-1~-7正数字越大字号越大,负数字越大字号越小。“+”表示字号比原来的字号大一些,“-”表示字号比原来的字号小一些
colorrgb(r,g,b)、rgb(r%,g%,b%)

#rrggbb或#rgb

colorname规定文本的颜色。可以使用rgb()函数、十六进制数、颜色的英文名称来表达
face字体1,字体2,…,字体nface属性可以有多个值,用逗号分隔。字体使用方式为从左向右依次选用。如果前面的字体不存在,则使用后一个字体。若都不存在,则默认使用“宋体”






【例322】网页字体样式的应用。
其代码如下,页面效果如图34所示。

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。 



图34网页字体样式的应用


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的属性、取值及说明如表34所示。



表34hr标记的属性、取值及说明



属性取值说明


width像素(px)或百分比设置水平分隔线的宽度
size整数,单位为px设置水平分隔线的高度
colorrgb()函数、十六进制数、颜色的英文名称设置水平分隔线的颜色
alignleft|center|right设置水平分隔线的对齐方式






【例331】段落、换行与水平分隔线标记的应用。
其代码如下,页面效果如图35所示。

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>  






图35段落与水平分隔线应用


代码中第11~13行定义3个p标记,分别应用对齐属性; 第16行插入一条“大小为3、宽度为60%、居中”的水平分隔线; 第18行插入一条“大小为5、宽度为600px、居右对齐”的水平分隔线。
3.3.4拼音/音标注释标记



图36ruby标记的

应用

ruby标记定义ruby注释(中文注音或字符)。ruby标记与rt标记一同使用。ruby标记由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt标记组成,还包括可选的rp标记,定义当浏览器不支持ruby标记时显示的内容。其效果如图36所示。
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>








【例332】预格式化的应用。
其代码如下,页面效果如图37所示。

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>  






图37预格式化


代码中第14~19行设置ruby标记标注汉语拼音; 第23行的文字没有设置块引用,没有缩进; 第24行设置块引用,这段文字行首缩进5个字符位置; 第27~35行设置预格式化标记,所有内容原样输出在页面上。
3.3.6预格式化标记
在HTML中利用成对的<pre></pre>标记对网页中的文字段落进行预格式化,浏览器会完整保留设计者在源文件中所定义的格式,包括各种空格、缩进以及其他特殊格式。
基本语法

<pre>预格式化文本</pre>




【例333】预格式化的应用。
其代码如下,页面效果如图38所示。

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行对文字段落进行预格式化。



图38预格式化的应用










3.4思政案例3——公民基本道德规范
以“公民基本道德规范二十字”为主题,参照给定的HTML代码完成Web网页的设计,页面效果如图39所示。



图39“公民基本道德规范”页面


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>&nbsp;&nbsp;&nbsp;&nbsp;爱国指对祖国的忠诚和热爱,守法指人们按照法律规范进行活动。明礼就是对社会交往规则、仪式和习惯的正确理解和运用,诚信通常指诚实守信。团结指人们为了实现共同的利益和目标而在思想和行动上相互一致,友善指人与人之间相互友好帮助共求进步。勤俭即勤劳节俭,自强指人对自己的能力和行为所具有的自信和进取意识。敬业指要有正确的职业观念,热爱本职工作和对技术精益求精,奉献指为国家和人民的利益贡献自己的力量,不计个人得失。这些基本行为准则,在同一道德体系中具有内容的广延性和层次的多样性,既包括社会主义的公民所必须共同遵守的最重要的行为准则,又涵盖了家庭、职业、公共生活等各个领域所应遵守的最基本的道德准则,适用于不同社会群体,与不同社会领域的具体道德规范融为一体,贯穿公民道德建设的全过程。

23</p>

24<blockquote>公民基本道德规范是指公民应当遵守的基本道德规范。</blockquote>

25<hr width="100%" size="3" color="red">

26<p align="center">Copyright&copy; 中共中央《公民道德建设实施纲要》</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标记,加载图像image341.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. &lt;     B. &gt;     C. &reg; D. &copy;
(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. 编写代码实现如图310所示的页面效果。要求如下: 
(1) body标记: 设置左右空白200px、背景图像为imageex31.png、字体大小为18px。
(2) 标题: h3、居中。
(3) hr标记: 粗细为1px、颜色为#000FFF、宽度为100%。
(4) 其余可以使用p标记或不使用标记,使用空格和换行标记来实现效果。



图310“自荐信”页面


注: 在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页面,效果如图311所示。要求如下: 



图311标题字标记及文本标记的应用


(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>