第 2章 文字版面的编辑
2.1 页面布局
2.2 字体属性
2.1.1 换行标签 br
2.1.2 强制不换行标签 nobr
2.1.3 自动换行标签 wbr
2.1.4 分段控制标签 p
2.1.5 原样显示文字标签 pre
2.1.6 居中对齐标签 center
2.1 页面布局
2.1.7 引文标签 blockquote
2.1.8 水平分隔线标签 hr
2.1.9 署名标签 address
2.1.10 特殊字符
2.1.11 注释标签
2.1.12 设定网页背景和文字的颜色
2.1.1 换行标签 br
换行标签,用于在文档中强制断行，
标记为一个单独的 <BR>。
在 HTML文件中任何位置只要使用了 <br>标签，当
文件显示在浏览器中时，该位置之后的文字将显
示于下一行。
示例,EX2-01.html
?<nobr>标签,把 语句强行放在一行中 。在
<nobr>标签中包含的文本不管有多长，总是放在
一行中进行显示。
?<nobr>主要用于把那些不适于分开的词和短语
放在一行中
?如果一行文本 长度超过一定的限度，可能会突
破右边边框跑到屏幕外面去
?示例,EX2-02.html
2.1.2 强制不换行标签 nobr
?<wbr>是根据屏幕的宽度，选择适当的地
方换行，把其余的文本放到下一行进行显示。
?如果一行内容能够在屏幕上显示完整，
<wbr>就不起作用了，它将被忽略掉。
?示例,EX2-03.HTML
2.1.3 自动换行标签 wbr
?作用：用于将文档划分为段落，
标记为 <P></P>，其中结束标记符
通常可省略。
?效果：在浏览器中，不同段落文字间除了换
行外，还会以一个空白行加以间隔，以便区别
出文字的不同段落。
2.1.4 分段控制标签 p
1．格式,
① <p> 文字 </p>
② 文字 <p>
③ <p align =参数 > 文字 </p>
2．说明,
其中 align属性有 left,center和 right三
个参数，这三个设置值将依次把段落文字的水
平对齐方式设为左对齐、居中对齐和右对齐。
示例,EX2-04.HTML
2.1.4 分段控制标签 p
?<pre>和 </pre>标签：可保留 HTML文件
原始的文件排版方式，直接在浏览器中显
示出来。
?方法是把制作好的那段文本前后分别加
上 <pre>和 </pre>标签。
?示例,EX2-05.HTML
2.1.5 原样显示文字标签 pre
2.1.6 居中对齐标签 center
?文本在页面上中使用 <center>标签进行居
中控制。
?<center>是一个成对标签，在想居中的文
本部分开头处加 <center>，结尾处加
</center>即可。
?示例,EX2-06.HTML
?标签 <blockquote>可以用来建立一个引文，
它特别适合于较长文本的引用。
?引文显示时将会自动右移，左边空出几个
格，以示区别。
示例,EX2-07.HTML
2.1.7 引文标签 blockquote
2.1.8 水平分隔线标签 hr
作用：添加水平线,以将不同的内容信息
分开，使文字看起来清晰、明确。
说明, <hr>标签 是单独使用的标签,它的作用
是 换行并在该行下画一条横线,横线的上下两
端都会留出一定的空白。
属性：见下表
示例,EX2-08.HTML
<hr>标签属性说明
属性 参 数 功 能 单 位 默认值
size 设置水平分隔
线的粗细
Pixel
（像素）
2
width 设置水平分隔
线的宽度
Pixel
（像素）、
百分比
100%
align left、
center、
right
设置水平分隔
线的对齐方式
center
color 设置水平分隔
线的颜色
black
noshade 水平分隔线不
显示 3D阴影
2.1.9 署名标签 address
?作用：在网页的下部给出签名或地址,说明
这个网页是由谁或由哪个公司编写的,以及其
他有关信息。
?署名标签是 <address>，在 <address>标签之
间的文字显示效果是斜体字。
?逻辑字符样式是指标记符本身说明了所修
饰内容的逻辑含义。
示例,EX2-09.HTML
?键盘上没有的字符,在 HTML文件中，有些字
符没办法直接显示出来，比如说,?” 。使用特
殊字符可以将键盘上没有的字符表达出来
?键盘上有但有特殊意义的字符,有些字符在
键盘上虽然可以得到，但在 HTML中有其特殊的
含义，如,>” 等等，也必须用一些代码表示它
们，以免发生混淆。
?空格,在建立 HTML文件时，若您利用键盘上
的空格键，输入数个空格，不论输入的空格有
多少个，都将视为一个。因此，如果您想要输
入多个空格时，必须利用空格符号 。
2.1.10 特殊字符
HTML常见特殊字符及其代码表
特殊或专用字符 数字代码 字符代码
< < <
> > >
& & &
" " "
! !
? © ©; ;
? ® ®
空格
示例,EX2-10.HTML
2.1.11 注释标签
?注释标签：只起注释作用，不显示在页面上
注释标签的格式有两种,
① <！ --注释的内容 -->
② <！注释的内容 >
示例,EX2-11.HTML
2.1.12 设定网页背景和文字的颜色
设置 <body>标签内的属性，可控制整个页面的
显示方式。
1．格式,
<body bgcolor=值 1 background=值 2 text=值 3>?</body>
2．说明,
（ 1） background属性指定网页的背景图像 。
（ 2）通过 bgcolor属性可以改变网页的背景颜色,其
格式如下,
<body bgcolor="#nnnnnn">或
<body bgcolor="颜色名称 ">
（ A） 其中 #nnnnnn代表 六位 十六进制数，
每两位的取值均是从 00～ FF，代表 ASCII码
的 00~255,前两位设置红色的深浅，中间两
位设置绿色的深浅，最后两位设置蓝色的深
浅 。
（ B） 在指定文字的颜色时,也可以直接使
用该颜色对应的英文单词,例如，我们指定
背景的颜色为红色，可以表示为,
<body bgcolor=“Red”>
也可以表示为
<body bgcolor=“#FF0000”> 。
暗蓝绿 (#006666) Teal 白 色 White(#FFFFFF)
紫红色 (#993333) Fuchsia 绿 色 Green(#66FF00)
蓝 色 (#00FFFF) Blue 浅蓝绿 Aqua(#0066FF)
黄 色 (#FFFF00) Yellow 紫 色 Purple(#660000)
橄榄绿 (#336633) Olive 海军蓝 Navy(#0033CC)
银白色 (#CCCCCC) Silver 灰 色 Gray(#999999)
栗 色 (#993300) Maroon 石灰色 Lime(#666666)
红 色 (#FF3300) Red 黑 色 Black(#000000)
颜 色 名 称 颜 色 名 称
（ 3） text属性用于指定网页内文字的颜色 。
示例,EX2-12.HTML
（ C） bgcolor属性的参数值可以是下表所示
16种颜色中的任何一种。
设置网页背景声音
? 在 HEAD中添加,
? <BGSOUND src=“soundfileURL”>
背景声音示例
背景图像示例
2.2.1 标题文字标签 hn
2.2.2 文字格式控制标签 font
2.2.3 特定文字样式标签
2.2 字体属性
<hn>标签用于设置网页中的标题文字，被设置
的文字将以黑体、粗体的方式显示在网页中。
1．格式,
<hn align=参数 > 标题文字 </hn>
2.2.1 标题文字标签 hn
2．说明,
① <hn>标签是成对出现 的，在 <hn>和 </hn>之
间的文字就是文档中的标题。
<hn>标签共分六级,其中 <h1>标签所括
起的文字是第一级标题，最大最粗； <h6>标签
所括起的文字是最后一级标题，最小最细。
② align属性用于设置标题的位置 。 align属
性的参数值为 left,center或 right之一
③ <hn>标签本身具有换行的作用,标题总是
从新一行开始。
④ 使用标题样式时，必须使用结束标记符。
示例,EX2-13.HTML
?font标签 用于控制文字的字体、大小与颜色 。
?控制的方式是 利用属性设置实现 的，各属性
的使用功能说明见下表。
2.2.2 文字格式控制标签 font
控制文字的颜色 color
控制文字的大小 size
控制文字的字体 face
使用功能 属 性
1．格式,
<font face=值 1 size=值 2 color=值 3>文字 </font>
2．说明,
① face属性的格式为,
<font face=字体名称 >文字 </font>
② size属性的取值为 1~7，默认值为 3；
③也可以用,+” 或,-” 来设定字号的相对值。
<FONT size=+1>example</FONT>
④ color属性的格式为,
<font color=#nnnnnn>
或 <font color="颜色名称 ">
示例,EX2-14.HTML
?用来 产生一定的强调、突出、区别以及提
示等效果 的标签。
?HTML中用于这种功能的标签可以分为两类：
物理类型和逻辑类型。
2.2.3 特定文字样式标签
1．物理类型
⑴ 粗体 b标签
放在 <b>与 </b>标签之间的文字将以粗体方式
显示。
⑵ 斜体 i标签
放在 <i>与 </i>标签之间的文字将以斜体方式
显示。
⑶ 下划线 u标签
放在 <u>与 </u>标签之间的文字将以加下划线
的方式显示。
示例,EX2-15.HTML
2．逻辑类型
?逻辑类型,指使用一些标签来改变字体的形
态和式样，以便 产生一些公众习惯的或约定俗
成的显示效果 。
?常用的逻辑类型标签有八种，这些标签 均有
首标签和尾标签,放在首标签和尾标签之间的
文本受其控制,
⑴ <em>（ Emphasis）标签,用于强调的
文本，以区别于其他文本，一般显示斜体字,
与 <I>相似；
⑵ <strong>标签,用于特别强调的文本，
显示粗体字，与 <b>相似；
⑶ <cite>（ Citation）标签,用于引证、
举例，通常是斜体字；
⑷ <code>标签,用来指出这是一组代码；
⑸ <small>标签,规定文本以小号字显示；
⑹ <big>标签,规定文本以大号字显示；
⑺ <samp>（ Sample）标签,显示一段计
算机常用的字体，即 宽度相等的字体 ；
⑻ <kbd>（ Keyboard）标签,由 用户所
输入文本,通常显示较粗的宽体字；
⑼ <var>（ Variable）标签,用来 表示
变量,通常显示斜体字；
⑽ <dfn>（ Definition）标签, 表示一
个定义或说明,通常为斜体字；
⑾ <sub>标签,用来表示带有 下标 的变
量；
⑿ <sup>标签,用来表示带有上标的变
量。
示例,EX2-16.HTML
2.1 页面布局
2.2 字体属性
2.1.1 换行标签 br
2.1.2 强制不换行标签 nobr
2.1.3 自动换行标签 wbr
2.1.4 分段控制标签 p
2.1.5 原样显示文字标签 pre
2.1.6 居中对齐标签 center
2.1 页面布局
2.1.7 引文标签 blockquote
2.1.8 水平分隔线标签 hr
2.1.9 署名标签 address
2.1.10 特殊字符
2.1.11 注释标签
2.1.12 设定网页背景和文字的颜色
2.1.1 换行标签 br
换行标签,用于在文档中强制断行，
标记为一个单独的 <BR>。
在 HTML文件中任何位置只要使用了 <br>标签，当
文件显示在浏览器中时，该位置之后的文字将显
示于下一行。
示例,EX2-01.html
?<nobr>标签,把 语句强行放在一行中 。在
<nobr>标签中包含的文本不管有多长，总是放在
一行中进行显示。
?<nobr>主要用于把那些不适于分开的词和短语
放在一行中
?如果一行文本 长度超过一定的限度，可能会突
破右边边框跑到屏幕外面去
?示例,EX2-02.html
2.1.2 强制不换行标签 nobr
?<wbr>是根据屏幕的宽度，选择适当的地
方换行，把其余的文本放到下一行进行显示。
?如果一行内容能够在屏幕上显示完整，
<wbr>就不起作用了，它将被忽略掉。
?示例,EX2-03.HTML
2.1.3 自动换行标签 wbr
?作用：用于将文档划分为段落，
标记为 <P></P>，其中结束标记符
通常可省略。
?效果：在浏览器中，不同段落文字间除了换
行外，还会以一个空白行加以间隔，以便区别
出文字的不同段落。
2.1.4 分段控制标签 p
1．格式,
① <p> 文字 </p>
② 文字 <p>
③ <p align =参数 > 文字 </p>
2．说明,
其中 align属性有 left,center和 right三
个参数，这三个设置值将依次把段落文字的水
平对齐方式设为左对齐、居中对齐和右对齐。
示例,EX2-04.HTML
2.1.4 分段控制标签 p
?<pre>和 </pre>标签：可保留 HTML文件
原始的文件排版方式，直接在浏览器中显
示出来。
?方法是把制作好的那段文本前后分别加
上 <pre>和 </pre>标签。
?示例,EX2-05.HTML
2.1.5 原样显示文字标签 pre
2.1.6 居中对齐标签 center
?文本在页面上中使用 <center>标签进行居
中控制。
?<center>是一个成对标签，在想居中的文
本部分开头处加 <center>，结尾处加
</center>即可。
?示例,EX2-06.HTML
?标签 <blockquote>可以用来建立一个引文，
它特别适合于较长文本的引用。
?引文显示时将会自动右移，左边空出几个
格，以示区别。
示例,EX2-07.HTML
2.1.7 引文标签 blockquote
2.1.8 水平分隔线标签 hr
作用：添加水平线,以将不同的内容信息
分开，使文字看起来清晰、明确。
说明, <hr>标签 是单独使用的标签,它的作用
是 换行并在该行下画一条横线,横线的上下两
端都会留出一定的空白。
属性：见下表
示例,EX2-08.HTML
<hr>标签属性说明
属性 参 数 功 能 单 位 默认值
size 设置水平分隔
线的粗细
Pixel
（像素）
2
width 设置水平分隔
线的宽度
Pixel
（像素）、
百分比
100%
align left、
center、
right
设置水平分隔
线的对齐方式
center
color 设置水平分隔
线的颜色
black
noshade 水平分隔线不
显示 3D阴影
2.1.9 署名标签 address
?作用：在网页的下部给出签名或地址,说明
这个网页是由谁或由哪个公司编写的,以及其
他有关信息。
?署名标签是 <address>，在 <address>标签之
间的文字显示效果是斜体字。
?逻辑字符样式是指标记符本身说明了所修
饰内容的逻辑含义。
示例,EX2-09.HTML
?键盘上没有的字符,在 HTML文件中，有些字
符没办法直接显示出来，比如说,?” 。使用特
殊字符可以将键盘上没有的字符表达出来
?键盘上有但有特殊意义的字符,有些字符在
键盘上虽然可以得到，但在 HTML中有其特殊的
含义，如,>” 等等，也必须用一些代码表示它
们，以免发生混淆。
?空格,在建立 HTML文件时，若您利用键盘上
的空格键，输入数个空格，不论输入的空格有
多少个，都将视为一个。因此，如果您想要输
入多个空格时，必须利用空格符号 。
2.1.10 特殊字符
HTML常见特殊字符及其代码表
特殊或专用字符 数字代码 字符代码
< < <
> > >
& & &
" " "
! !
? © ©; ;
? ® ®
空格
示例,EX2-10.HTML
2.1.11 注释标签
?注释标签：只起注释作用，不显示在页面上
注释标签的格式有两种,
① <！ --注释的内容 -->
② <！注释的内容 >
示例,EX2-11.HTML
2.1.12 设定网页背景和文字的颜色
设置 <body>标签内的属性，可控制整个页面的
显示方式。
1．格式,
<body bgcolor=值 1 background=值 2 text=值 3>?</body>
2．说明,
（ 1） background属性指定网页的背景图像 。
（ 2）通过 bgcolor属性可以改变网页的背景颜色,其
格式如下,
<body bgcolor="#nnnnnn">或
<body bgcolor="颜色名称 ">
（ A） 其中 #nnnnnn代表 六位 十六进制数，
每两位的取值均是从 00～ FF，代表 ASCII码
的 00~255,前两位设置红色的深浅，中间两
位设置绿色的深浅，最后两位设置蓝色的深
浅 。
（ B） 在指定文字的颜色时,也可以直接使
用该颜色对应的英文单词,例如，我们指定
背景的颜色为红色，可以表示为,
<body bgcolor=“Red”>
也可以表示为
<body bgcolor=“#FF0000”> 。
暗蓝绿 (#006666) Teal 白 色 White(#FFFFFF)
紫红色 (#993333) Fuchsia 绿 色 Green(#66FF00)
蓝 色 (#00FFFF) Blue 浅蓝绿 Aqua(#0066FF)
黄 色 (#FFFF00) Yellow 紫 色 Purple(#660000)
橄榄绿 (#336633) Olive 海军蓝 Navy(#0033CC)
银白色 (#CCCCCC) Silver 灰 色 Gray(#999999)
栗 色 (#993300) Maroon 石灰色 Lime(#666666)
红 色 (#FF3300) Red 黑 色 Black(#000000)
颜 色 名 称 颜 色 名 称
（ 3） text属性用于指定网页内文字的颜色 。
示例,EX2-12.HTML
（ C） bgcolor属性的参数值可以是下表所示
16种颜色中的任何一种。
设置网页背景声音
? 在 HEAD中添加,
? <BGSOUND src=“soundfileURL”>
背景声音示例
背景图像示例
2.2.1 标题文字标签 hn
2.2.2 文字格式控制标签 font
2.2.3 特定文字样式标签
2.2 字体属性
<hn>标签用于设置网页中的标题文字，被设置
的文字将以黑体、粗体的方式显示在网页中。
1．格式,
<hn align=参数 > 标题文字 </hn>
2.2.1 标题文字标签 hn
2．说明,
① <hn>标签是成对出现 的，在 <hn>和 </hn>之
间的文字就是文档中的标题。
<hn>标签共分六级,其中 <h1>标签所括
起的文字是第一级标题，最大最粗； <h6>标签
所括起的文字是最后一级标题，最小最细。
② align属性用于设置标题的位置 。 align属
性的参数值为 left,center或 right之一
③ <hn>标签本身具有换行的作用,标题总是
从新一行开始。
④ 使用标题样式时，必须使用结束标记符。
示例,EX2-13.HTML
?font标签 用于控制文字的字体、大小与颜色 。
?控制的方式是 利用属性设置实现 的，各属性
的使用功能说明见下表。
2.2.2 文字格式控制标签 font
控制文字的颜色 color
控制文字的大小 size
控制文字的字体 face
使用功能 属 性
1．格式,
<font face=值 1 size=值 2 color=值 3>文字 </font>
2．说明,
① face属性的格式为,
<font face=字体名称 >文字 </font>
② size属性的取值为 1~7，默认值为 3；
③也可以用,+” 或,-” 来设定字号的相对值。
<FONT size=+1>example</FONT>
④ color属性的格式为,
<font color=#nnnnnn>
或 <font color="颜色名称 ">
示例,EX2-14.HTML
?用来 产生一定的强调、突出、区别以及提
示等效果 的标签。
?HTML中用于这种功能的标签可以分为两类：
物理类型和逻辑类型。
2.2.3 特定文字样式标签
1．物理类型
⑴ 粗体 b标签
放在 <b>与 </b>标签之间的文字将以粗体方式
显示。
⑵ 斜体 i标签
放在 <i>与 </i>标签之间的文字将以斜体方式
显示。
⑶ 下划线 u标签
放在 <u>与 </u>标签之间的文字将以加下划线
的方式显示。
示例,EX2-15.HTML
2．逻辑类型
?逻辑类型,指使用一些标签来改变字体的形
态和式样，以便 产生一些公众习惯的或约定俗
成的显示效果 。
?常用的逻辑类型标签有八种，这些标签 均有
首标签和尾标签,放在首标签和尾标签之间的
文本受其控制,
⑴ <em>（ Emphasis）标签,用于强调的
文本，以区别于其他文本，一般显示斜体字,
与 <I>相似；
⑵ <strong>标签,用于特别强调的文本，
显示粗体字，与 <b>相似；
⑶ <cite>（ Citation）标签,用于引证、
举例，通常是斜体字；
⑷ <code>标签,用来指出这是一组代码；
⑸ <small>标签,规定文本以小号字显示；
⑹ <big>标签,规定文本以大号字显示；
⑺ <samp>（ Sample）标签,显示一段计
算机常用的字体，即 宽度相等的字体 ；
⑻ <kbd>（ Keyboard）标签,由 用户所
输入文本,通常显示较粗的宽体字；
⑼ <var>（ Variable）标签,用来 表示
变量,通常显示斜体字；
⑽ <dfn>（ Definition）标签, 表示一
个定义或说明,通常为斜体字；
⑾ <sub>标签,用来表示带有 下标 的变
量；
⑿ <sup>标签,用来表示带有上标的变
量。
示例,EX2-16.HTML
