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