第3章文字与段落 文字不仅是传达网页信息的一种常用方式，也是视觉传达最直接的方式，使用经过精心处理的文字材料可以制作出效果很好的版面。本章详细介绍如何通过对文字与段落属性的设置来提高文字的艺术表现力。 本章重点 对网页中的文字格式化。 对网页中的段落格式化。 视频讲解 3.1文 字 内 容 3.1.1添加文字 文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。在HTML文件中添加文字的方式与在Word、记事本等中添加文字的方式相同，在需要输入文字的地方输入即可，但是需要添加在<body>和</body>标记之间，具体内容包括在浏览器中要显示的文字、空格符、特殊符号以及注释语句。 程序31是一个在网页中添加文字的实例。 <!--程序31--> <html> <head> <title>在网页中添加文字</title> </head> <body> 这是一本介绍HTML、CSS、JAVASCRIPT的专业书籍。 </body> </html> 在该程序中，在<body>和</body>内输入了普通文字，页面效果如图31所示。 图31在网页中添加文字 3.1.2标题字 标题字就是以几种固定的字号显示文字。在HTML中定义了六级标题，从一级到六级，每级标题的字体大小依次递减。 基本语法： <h#align="left|center|right|justify">标题文字</h#> 语法说明： (1) 标题标记本身具有换行的作用，标题总是从新的一行开始。 (2) #用来指定标题文字的大小，#取1~6的整数值，取1时文字最大，取6时文字最小。其详细用法如表31所示。 表31标题字标记 标记描述标记描述 <h1>…</h1>一级标题<h4>…</h4>四级标题 <h2>…</h2>二级标题<h5>…</h5>五级标题 <h3>…</h3>三级标题<h6>…</h6>六级标题 (3) align设置标题字的对齐属性，例如设置<h2 align="left">…</h2>可以使标题字居左，若居中用center，若居右用right，两端对齐用justify(IE5+专有属性)。 程序32给出了一个在网页中添加标题字的实例。 <!--程序32--> <html> <head> <title>网页设计与开发</title> </head> <body> <h1 align="center">第3章 文字与段落</h1> <h2>3.1 文字内容</h2> <h3>3.1.1 添加文字</h3> <h4 align=left >1.基本语法</h4> <h5 align=left>2.语法说明</h5> <h6 align=right>返回</h6> </body> </html> 该程序中表示了6种不同大小的标题字。页面效果如图32所示。 图32在网页中添加标题字 3.1.3添加空格 通常情况下，HTML会自动删除文字内容中的多余空格，不管文字中有多少空格都被视作一个空格。例如，两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，可以明确使用“ ”表示空格。这种使用代码控制的方式与在文本编辑软件中通过输入空格键添加空格的方式不同。 基本语法： 语法说明： 输入一个空格使用一个“ ”表示，输入多少个空格就添加多少个“ ”。 程序33是一个在网页中添加空格的实例。 <!--程序33--> <html> <head> <title>在网页中添加空格</title> </head> <body> 这是一本 介绍HTML、CSS、JAVASCRIPT 的专业书籍。 </body> </html> 该程序中“介绍HTML、CSS、JAVASCRIPT”的前面空了两格，后面也空了两格。页面效果如图33所示。 图33在网页中添加空格 3.1.4添加特殊符号 特殊符号和空格一样，也是通过在HTML文件中输入符号代码来添加的。使用特殊符号可以将键盘上没有的字符输出。 基本语法： <body> & </body> 语法说明： 在需要添加特殊符号的地方添加相应的符号代码即可。常用特殊符号及其对应的符号代码如表32所示。 表32特殊符号 特 殊 符 号 符 号 代 码 特 殊 符 号 符 号 代 码 & & > > © “ " ® · · ￡ £ § § ￥ ¥ ￠ ¢ ± ± € × × TM ™ < < 程序34是一个在网页中添加特殊符号的实例。 <!--程序34--> <html> <head> <title>在网页中添加特殊符号</title> </head> <body> <center> <img src="class.jpg"> <hr> <!--下面的文字中加入了版权符号的符号代码--> 版权所有© 多媒体技术一班 All rights reserved.</h6> </center> </body> </html> 页面效果如图34所示。 图34在网页中添加特殊符号 3.1.5注释语句 用户可以在HTML文档中添加注释，增加代码的可读性，以便于以后维护和修改。访问者在浏览器中是看不见这些注释的，只有在用文本编辑器打开文档源代码时才能看到。 基本语法： <! … > 语法说明： 需要注意的是，注释不可以嵌套在其他注释中。 程序35是一个在网页中添加注释的实例。 <!--程序35--> <html> <head> <title>在网页中添加注释</title> </head> <body> <!--body标记是主体内容--> <center> <pre><!--pre代表原样显示排版格式--> 我们永远的家 ——多媒体专业! </pre> </center> </body> </html> 页面效果如图35所示，注释的内容并不会出现。 图35在网页中添加注释 视频讲解 3.2文 字 样 式 在网页中添加文字之后，可以利用<font>标记及其属性对网页文字的字体、字号、颜色进行定义。 基本语法： <font face=" " size=" " color=" ">…</font> 语法说明： (1) <font>标记的face属性用来定义字体，任何安装在操作系统中的字体都可以显示在浏览器中。用户可以给face属性一次定义多个字体，字体之间使用“,”分隔，浏览器在读取字体时，如果第1种字体在系统中不存在，则显示第2种字体，如果第2种字体在系统中不存在，则显示第3种字体，以此类推，如果这些字体都不存在，则显示计算机系统的默认字体。 (2) size属性用来定义字号，取值范围为+1~+7、-1~-7。 (3) color属性用来定义颜色，其值为该颜色的英文单词或十六进制数值。 程序36是一个设置文字的字体、字号、颜色的实例。 <!--程序36--> <html> <head> <title>设置文字的字体、字号、颜色</title> </head> <body> <center> <font face="黑体" size=6 color="red" > 我们是一个团体，不会丢下谁，不会落下谁。共同奋进!! </font> </center> </body> </html> 该程序中定义了IE中要显示的文字，文字字体为黑体、字号为6号、颜色为红色。页面效果如图36所示。 图36设置文字的字体、字号、颜色 视频讲解 3.3文字的修饰 3.3.1粗体、斜体、下画线 基本语法： <b>…</b> <i>…</i> <u>…</u> 语法说明： (1) <b>标记实现加粗文字显示。 (2) <i>标记实现斜体文字显示。 (3) <u>标记实现给文字添加下画线。 程序37是一个文字加粗、斜体和下画线的实例。 <!--程序37--> <html> <head> <title>文字的加粗、斜体和下画线</title> </head> <body> <center> <font color="#FF0000" size=3><b>这些文字是粗体的</b></font><br> <i>这些文字是斜体的</i> <br> <u>这些文字带有下画线</u> </center> </body> </html> 该程序中分别对三行文字进行了修饰，显示效果分别为粗体、斜体和带下画线。页面效果如图37所示。 图37文字的加粗、斜体和下画线 3.3.2删除线 基本语法： <del>…</del> 语法说明： 将文字放在<del>和</del>之间就可以为文字添加删除线了。 程序38是一个文字添加删除线的实例。 <!--程序38--> <html> <head> <title>给文字添加删除线</title> </head> <body> 作者信箱由<del>junmeihao@gmail.com</del>更改为hongmei@gmail.com <!--添加删除线--> </body> </html> 页面效果如图38所示。 图38给文字添加删除线 3.3.3上标、下标 在数学公式中，上标和下标的使用比较广泛，例如x1、x2、y1、y2等。 基本语法： <sup>…</sup> <sub>…</sub> 语法说明： (1) 将文字放在<sup>和</sup>之间就可以实现上标； (2) 将文字放在<sub>和</sub>之间就可以实现下标。 程序39是一个上标、下标实现的实例。 <!--程序39--> <html> <head> <title>上标、下标的实现</title> </head> <body> <h2>解下面的代数方程式</h2> x<sup>2</sup>-3x+2=0<br> 解： x<sub>1</sub>=2; x<sub>2</sub>=1<br> </body> </html> 该程序中用<sup>标记显示数字表达式的上标，用<sub>标记显示数字表达式的下标。页面效果如图39所示。 图39上标、下标的实现 3.3.4设置地址文字 <address>标记用来表示HTML文档的特定信息，例如Email、地址、签名、作者、文档信息等。 基本语法： <address>…</address> 语法说明： 将内容文字放在<address>和</address>之间，address通常被呈现为斜体。大多数浏览器会在address元素的前后添加一个换行符。 程序310是一个设置地址文字的实例。 <!--程序310--> <html> <head> <title>设置地址文字</title> </head> <body> 给我们写信:<address>wangtao@gmail.com</address> </body> </html> 程序中利用<address>标记突出显示了邮箱地址：wangtao@gmail.com。页面效果如图310所示。 图310设置地址文字 视频讲解 3.4段落 文字的组合就是段落，段落就是格式上统一的文本。下面介绍和段落相关的HTML标记。 3.4.1段落标记 在文本编辑器中输入的回车和额外空格将被HTML忽略，所以要在网页中开始一个段落需要通过使用标记<p>来实现。由<p>标记所标识的文字代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，用于区别文字的不同段落。 基本语法： <p>…</p> 语法说明： <p>是段落标记，利用它可以对文字进行段落的定义。它可以单独使用，也可以成对使用。在单独使用时，下一个<p>的开始意味着上一个<p>的结束，良好的习惯是成对使用。 程序311是一个段落的实例。 <!--程序311--> <html> <head> <title>段落</title> </head> <body> <p> 五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家——多媒体专业。在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。</p> <p> 在不断地碰撞和摩擦中，分子也不断地变化，成长着，最终可走出这个容器，勇敢地面对、挑战外面的世界。不管外面如何复杂、艰难，请大家彼此珍惜这段我们相逢相识相知的日子，在这里我们痛过笑过哭过，不论是苦的还是甜的，这都是我们年轻的见证。</p> </body> </html> 在该程序中用<p>标记定义了两个不同的段落。页面效果如图311所示。 图311段落 3.4.2换行标记 用户可以使用<br>控制段落中文字的换行显示。一般情况下，浏览器会根据窗口的宽度自动将文本进行换行显示，如果想强制浏览器不换行显示，可以使用<nobr>标记。 基本语法： <br> <nobr>…</nobr> 语法说明： (1) <br>是换行标记，它是一个单标记，一次换行使用一个<br>，多次换行可以使用多个<br>。 (2) <nobr>和</nobr>标记之间的内容不换行。 程序312是一个换行实例。 <!--程序312--> <html> <head> <title>换行</title> </head> <body> <p> 无换行标记： 在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。 <br>有换行标记： <br>在这个容器里，<br> 我们碰撞着，<br>摩擦着，<br>产生了各色各样的灵感，<br>活力与情绪。 </p> <nobr>五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家—— 媒体专业。在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力 与情绪。</nobr> </body> </html> 页面效果如图312所示。 图312换行 3.4.3居中标记 如果希望网页中的段落居中显示，可以采用标记<center>。该标记也可以使图片等网页元素居中显示。 基本语法： <center>…</center> 语法说明： 使用该标记可以使标记中间的内容在网页中居中显示。需要注意的是，在HTML 4.01中center元素不被赞成使用。通常，文本居中可以使用CSS textalign属性实现。 程序313是一个居中对齐标记实例。 <!--程序313--> <html> <head> <title>居中对齐标记</title> </head> <body> <center> 《关于我们》 </center> <center> </center> <center> 五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家——多媒体专业。 <!--文字内容自动居中对齐--> </center> <center> </center> </body> </html> 页面效果如图313所示。 图313居中对齐标记 3.4.4水平分隔线 水平线可以作为段落与段落之间的分隔线，使得文档结构清晰、层次分明。 基本语法： <hr width=" " size=" " color=" " align=" "> 语法说明： 在默认情况下，水平线的宽度为100%。水平线的宽度可以使用百分比或像素作为单位，但是水平线的高度必须使用像素作为单位； 水平线的对齐方式可以为居左(left)、居中(center)、居右(right)。水平线的属性见表33。 表33水平线的属性 属性说明属性说明 align水平线的对齐方式color水平线的颜色 width水平线的宽度noshade水平线不出现阴影 size水平线的高度 程序314是一个水平分隔线实例。 <!--程序314--> <html> <head> <title>水平分隔线</title> </head> <body> <center>关于我们</center> <hr size="6" width="10%" align="center" noshade color=red > <p>五十个不同的分子，</p> <p>在不同状态下进入了同一容器，</p> <p>这就组成了我们的家——多媒体专业。</p> <p>在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。</p> <hr> </body> </html> 该程序中以<hr size="6" align="center" noshade color="red">定义的水平线为6个像素、居中、无阴影、红色。页面效果如图314所示。 图314水平分隔线 3.4.5预格式化标记 浏览器在显示HTML页面时通常会将页面中所有的额外空白和回车进行压缩，并根据窗口宽度自动换行。如果想保留原始文字的排版格式，可以通过<pre>标记来实现。 基本语法： <pre>…</pre> 语法说明： 在制作好的文字排版内容前后分别加上始标记<pre>和尾标记</pre>，可以实现预格式化的效果。 程序315是一个原样显示文字标记的实例。 <!--程序315--> <html> <head> <title>原样显示文字标记</title> </head> <body> <pre> 请记住我们是一个团体， 不会丢下谁， 不会落下谁。 共同奋进!! </pre> </body> </html> 页面效果如图315所示，页面中的空格和换行等格式信息并没有被删除，如果去掉了<pre>标记，输出结果就成了一行文字了。 图315原样显示文字标记 3.4.6设置段落缩进 利用段落的缩进可以增加段落的层次效果。 基本语法： <blockquote>…</blockquote> 语法说明： (1) 利用<blockquote>可以实现文字的缩排，一对缩排标记可以缩进5个字符，要实现多次缩排需要使用多次<blockquote>。 (2) 文本和行内元素不应该直接放入标记内，而是应该将内容包围在一个块级标记(如P标记)内，然后再将这个标记放在<blockquote>标记中。 程序316是一个段落缩进实例。 <!--程序316--> <html> <head> <title>段落缩进</title> </head> <body> 关于我们<br> <blockquote > <p>五十个不同的分子，在不同状态下进入了同一容器，</p><!--缩进了5个字符--> </blockquote> <blockquote><blockquote> <p>这就组成了我们的家——083007班。</p> </blockquote></blockquote> <!--缩进了10个字符--> </body> </html> 页面效果如图316所示，第二组内容由于包含在两个嵌套的<blockquote>标记中，所以连续向后缩进了10个字符。 图316段落缩进 视频讲解 3.5小实例 本节给出一个唐诗欣赏页面，其HTML代码如程序317所示，在这个实例中综合运用本章所介绍的标记对普通文字进行格式化。 <!--程序317--> <html> <head> <title>文字网页</title> </head> <body> <h2 align=center>唐诗欣赏</h2> <hr width="100%" size="1" color="#00ffee"> <p align="center"><b><font size="3">静夜思</font></b></p> <p align="center"><font size="2">李白</font></p> <p align="center"><b>床前明月光，<br> 疑是地上霜。<br> 举头望明月，<br> 低头思故乡。</b></p> <p> </p> <hr width="100%" size="1" color="#00ffee"> <p><font class="text"><b>【简析】</b><br> <p> 这是写远客思乡之情的诗，诗以明白如话的语言雕琢出明静醉人的秋夜的意境。它不追求想象的新颖奇特，也摒弃了辞藻的精工华美； <br>它以清新朴素的笔触，抒写了丰富深曲的内容。境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻味。无怪乎有人赞它是"妙绝古今"。 </p> <hr width="400" size="3" color="#00ee99" align="left"> 版权©:版权所有，违者必究 <address>E-mail:limingwei@gmail.com</address> </body> </html> 页面效果如图317所示。 图317文字与段落小实例 小结 本章介绍了文字与段落的格式设置，主要内容包括文字内容标记、文字样式标记、文字修饰标记、段落修饰标记的使用。 (1) 将浏览器中显示的文字内容写在<body>和</body>标记之间，内容包括普通的文字、空格符号、特殊符号以及页面的注释语句，标题字标记<h>在HTML中定义了6级标题。 (2) 通过文字修饰标记可实现网页文字的斜体、加粗、上标、下标、大小字号、下画线、删除线、地址等设置。 (3) 通过段落格式设置可实现段落的对齐方式、换行、预格式化、水平线设置、缩进等设置。 习题 1. 下列选项中，（）是换行符标记。 A. <body>B. <font>C. <br> D. <p> 2. 在HTML中，标记<font>的size属性的最大取值是()。 A. 5B. 6C. 7D. 8 3. 在HTML中,标记<pre>的作用是()。 A. 标题标记B. 预排版标记 C. 转行标记D. 文字效果标记 4. 下面的()表示的是空格。 A. " B. C. & D. © 5. 如果要设置一条1像素粗的水平线，应使用的HTML语句是。 6. 在HTML文件中，版权符号的代码是。 7. 使页面的文字居中的方法有。 8. 标题字的标记是。 实验 1. 采用本章介绍的HTML标记完成如图318所示的文字内容，其中文字修饰标记要求可实现网页文字的标题设置、斜体、加粗、添加颜色； 段落要求能够进行对齐、换行等设置。 2. 采用本章介绍的HTML标记完成如图319所示的新闻内容显示，标题用<h1>标题字，斜体居中显示，新闻来源用4号字居中显示，内容部分使用系统默认，并用段落表现文章的层次。 图318文字实例 图319新闻内容效果图