第3章 HTML文字与段落_新手学ASP动态网页开发-QQ阅读男生玄幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第3章 HTML文字与段落

本章导读

文字是一个HTML文档最基本的组成元素，可以说只要是网页就会包含文字。HTML标准提供了文字和段落相应的标签，本章将向读者详细介绍这些标签的使用方法。

3.1 文字标签

HTML中有关文字的标签，包括标题标签、字体标签、格式变化标签等；此外，还有一些表示特殊符号的转义序列。

3.1.1 标题标签

一般文章都有标题、副标题、章节等结构，HTML中也提供了相应的标题标签<Hx>，其中x为标题的等级。HTML提供6个等级的标题，即<H1>～<H6>，x越小，标题字号就越大。用法如下：

      <Hx> text </Hx>

使用标题标签时会将字体变粗，并且自成一行。示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>标题标签演示</TITLE>
       </HEAD>
       <BODY>
        正文内容
        <H1>一级标题</H1>
        <H2>二级标题</H2>
        <H3>三级标题</H3>
        <H4>四级标题</H4>
        <H5>五级标题</H5>
        <H6>六级标题</H6>
       </BODY>
      </HTML>

示例代码的执行效果如图3-1所示。

图3-1 标题标签演示

3.1.2 字体标签

字体标签通常用来设置正文文字的大小、颜色和字型，用法如下：

      <FONT  SIZE="size"  COLOR="color"  FACE="fontface"> text </FONT>

属性说明：

● SIZE，指定字体大小，从“1”到“7”共7种。

● COLOR，指定字体颜色，可以使用颜色名称或颜色代码，如“White”、“#FFFFFF”等。

● FACE，指定字体字型，即系统中字体的名称，如“宋体”、“Arial”、“隶书”等。还可以指定一个字型列表，如果浏览器不支持第一种字型，就会依次使用第二、第三等后续字型显示页面内容，如“宋体、仿宋体、隶书”。

字体大小的预设值为“3”，字体大小的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>字体标签演示</TITLE>
       </HEAD>
       <BODY>
        正文字体<BR>     <!-- 通过SIZE属性显示一号至七号字体 -->
        <FONT SIZE="1">一号字体</FONT><BR>
        <FONT SIZE="2">二号字体</FONT><BR>
        <FONT SIZE="3">三号字体</FONT><BR>
        <FONT SIZE="4">四号字体</FONT><BR>
        <FONT SIZE="5">五号字体</FONT><BR>
        <FONT SIZE="6">六号字体</FONT><BR>
        <FONT SIZE="7">七号字体</FONT><BR>
       </BODY>
      </HTML>

示例代码中，从一号字体到七号字体依次增大，且正文字体与三号字体相当，演示效果如图3-2所示。

图3-2 字体大小演示

字体的大小还可以用另外一种形式表示，即使用相对大小。如果字体大小的预设值为“+0”，则字体的大小范围从“-2”到“+4”，“-2”表示比预设字体小两级，“+4”表示比预设字体大四级，其他的以次类推。使用这种形式的示例代码如下：

      <BODY>
        正文字体<BR>
        <FONT SIZE="-2">一号字体</FONT><BR>
        <FONT SIZE="-1">二号字体</FONT><BR>
        <FONT SIZE="+0">三号字体</FONT><BR>
        <FONT SIZE="+1">四号字体</FONT><BR>
        <FONT SIZE="+2">五号字体</FONT><BR>
        <FONT SIZE="+3">六号字体</FONT><BR>
        <FONT SIZE="+4">七号字体</FONT><BR>
       </BODY>

示例代码的执行效果，如图3-2所示。

字体颜色的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>字体标签演示</TITLE>
       </HEAD>
       <BODY>
        默认字体<BR>
        <FONT COLOR="red">红色字体</FONT><BR>
        <FONT COLOR="#FFFF00">黄色字体</FONT><BR>
        <FONT COLOR="#0080FF">淡蓝色字体</FONT><BR>
        <FONT COLOR="#c0c0c0">灰色字体</FONT><BR>
       </BODY>
      </HTML>

默认情况下，字体颜色为黑色，示例代码的执行效果如图3-3所示。

图3-3 字体颜色演示

字体字型的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>字体标签演示</TITLE>
       </HEAD>
       <BODY TEXT="#0080FF">
        <FONT SIZE="5">默认字体</FONT><BR>
        <FONT SIZE="5" FACE="楷体_GB2312">“楷体”字体</FONT><BR>
        <FONT SIZE="5" FACE="方正舒体">“方正舒体”字体</FONT><BR>
        <FONT SIZE="5" FACE="宋体">“宋体”字体</FONT><BR>
       </BODY>
      </HTML>

默认的字体为“宋体”，示例代码的执行效果如图3-4所示。

图3-4 字体字形演示

3.1.3 样式标签

在HTML中有一类标签，用来指定文字的样式，常见的有粗体标签、斜体标签、下划线标签、上标标签、下标标签、打字机标签<TT>、闪烁标签<BLINK>、强调标签、加强标签、样本标签<SAMP>、代码标签<CODE>、变量标签<VAR>、定义标签<DFN>、引用标签<CITE>、地址标签<ADDRESS>等，用法如下：

      <B> text </B>
      <I> text </I>
      <U> text </U>
      <SUP> text </SUP>
      <SUB> text </SUB>
      <TT> text </TT>
      <BLINK> text </BLINK>
      <EM> text </EM>
      <STRONG> text </STRONG>
      <SAMP> text </SAMP>
      <CODE> text </CODE>
      <VAR> text </VAR>
      <DFN> text </DFN>
      <CITE> text </CITE>
      <ADDRESS> text </ADDRESS>

文字样式标签的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>样式标签演示</TITLE>
       </HEAD>
       <BODY>
      <TABLE BORDER="1">
       <TR>
          <TH>样式标签</TH>
          <TH>示例文本</TH>
          <TH>样式标签</TH>
          <TH>示例文本</TH>
       </TR>
       <TR>
          <TH>&lt;B&gt;</TH>                     <!-- 粗体 -->
          <TD><B>文本Text 123</B></TD>
          <TH>&lt;I&gt;</TH>                     <!-- 斜体 -->
          <TD><I>文本Text 123</I></TD>
       </TR>
       <TR>
          <TH>&lt;U&gt;</TH>                     <!-- 下划线 -->
          <TD><U>文本Text 123</U></TD>
          <TH>&lt;SUP&gt;</TH>                   <!-- 上标 -->
          <TD><SUP>文本Text 123</SUP></TD>
       </TR>
       <TR>
          <TH>&lt;SUB&gt;</TH>                   <!-- 下标 -->
          <TD><SUB>文本Text 123</SUB></TD>
          <TH>&lt;TT&gt;</TH>                    <!-- 打字机 -->
          <TD><TT>文本Text 123</TT></TD>
       </TR>
       <TR>
          <TH>&lt;BLINK&gt;</TH>                 <!-- 闪烁 -->
          <TD><BLINK>文本Text 123</BLINK></TD>
          <TH>&lt;EM&gt;</TH>                    <!-- 强调 -->
          <TD><EM>文本Text 123</EM></TD>
       </TR>
       <TR>
          <TH>&lt;STRONG&gt;</TH>                <!-- 加强 -->
          <TD><STRONG>文本Text 123</STRONG></TD>
          <TH>&lt;SAMP&gt;</TH>                  <!-- 样本 -->
          <TD><SAMP>文本Text 123</SAMP></TD>
       </TR>
       <TR>
          <TH>&lt;CODE&gt;</TH>                  <!-- 代码 -->
          <TD><CODE>文本Text 123</CODE></TD>
          <TH>&lt;VAR&gt;</TH>                   <!-- 变量 -->
          <TD><VAR>文本Text 123</VAR></TD>
       </TR>
       <TR>
          <TH>&lt;DFN&gt;</TH>                   <!-- 定义 -->
          <TD><DFN>文本Text 123</DFN></TD>
          <TH>&lt;CITE&gt;</TH>                  <!-- 引用 -->
          <TD><CITE>文本Text 123</CITE></TD>
      </TR>
      <TR>
          <TH>&lt;ADDRESS&gt;</TH>               <!-- 地址 -->
          <TD><ADDRESS>文本Text 123</ADDRESS></TD>
          <TH>&nbsp;</TH>
          <TD>&nbsp;</TD>
      </TR>
      </TABLE>
      </BODY>
      </HTML>

示例代码利用表格的形式，在示例文本【文本Text 123】上直观地显示了各种文字样式，示例代码的执行效果如图3-5所示。

图3-5 样式标签演示

3.1.4 特殊符号

在HTML页面中有很多特殊的符号是无法直接显示的，如符号“<”和“>”，浏览器会将其当作标签进行处理；还有些符号是不方便直接输入的，如符号“©”和“®”。要显示这些特殊符号，必须使用该符号对应的转义序列（Escape Sequences），例如，要显示符号“<”必须使用“<”，而要显示符号“©”必须使用“©”。

常用的特殊符号参见以下示例代码：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>特殊符号演示</TITLE>
       </HEAD>
       <BODY>
       <TABLE BORDER=1>
       <TR>
          <TH>名称</TH>
          <TH>符号</TH>
      </TR>
      <TR>
          <TD>左尖括号</TD>
          <TD align=center>&lt;</TD>
      </TR>
      <TR>
          <TD>右尖括号</TD>
          <TD align=center>&gt;</TD>
      </TR>
      <TR>
          <TD>引号</TD>
          <TD align=center>&quot;</TD>
      </TR>
      <TR>
          <TD>空格</TD>
          <TD align=center>&nbsp;</TD>
      </TR>
      <TR>
          <TD>连接符</TD>
          <TD align=center>&amp;</TD>
      </TR>
      <TR>
          <TD>版权符</TD>
          <TD align=center>&copy;</TD>
      </TR>
      <TR>
          <TD>商标符</TD>
          <TD align=center>&reg;</TD>
      </TR>
      <TR>
          <TD>公司符</TD>
          <TD align=center>&trade;</TD>
      </TR>
      </TABLE>
      </BODY>
      </HTML>

示例代码的执行效果如图3-6所示。

图3-6 特殊符号演示

★ 注意 ★

转义序列是区分大小写的，这一点不同于HTML的其他标签部分。例如，不能用“&LT;’代替‘<”。

3.2 排版标签

HTML中有关段落的标签，包括强制换行标签、强制分段标签、分割线标签、居中对齐标签、块引用标签、预设格式标签等。

3.2.1 强制换行标签

强制换行标签 用于文本内容的强制换行，用法如下：

      <BR>

强制换行标签的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>强制换行标签演示</TITLE>
       </HEAD>
       <BODY>
       <!-- 未使用强制换行标签 -->
       <FONT COLOR="gray">
       我以傲慢欣赏世人的荒诞
       我以放纵惩罚世人的平凡
       我以笑容嘲弄世人的经典
       我以本色填补世人的缺憾
       我以忠诚面对世人的善变
       我以天真容忍世人的欺骗
       我以自由躲避世人的圈点
       我以沉默回答世人的抱怨
       </FONT>
       <!-- 使用了强制换行标签 -->
       <BR><BR>
       <FONT COLOR="#0080FF">
       我以傲慢欣赏世人的荒诞<BR>
       我以放纵惩罚世人的平凡<BR>
       我以笑容嘲弄世人的经典<BR>
       我以本色填补世人的缺憾<BR>
       我以忠诚面对世人的善变<BR>
       我以天真容忍世人的欺骗<BR>
       我以自由躲避世人的圈点<BR>
       我以沉默回答世人的抱怨<BR>
      </FONT>
      </BODY>
       </HTML>

示例代码的执行效果如图3-7所示。

图3-7 强制换行标签演示

3.2.2 强制分段标签

强制分段标签用于文本内容的强制分段，用法如下：

      <P> paragraph </P>
      或
      <P  ALIGN="align"> paragraph </P>

属性说明：

● ALIGN，指定段落的对齐方式，可能的取值如下：

Left左对齐，默认值。

Center居中对齐。

Right右对齐。

强制分段标签的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>强制分段标签演示</TITLE>
       </HEAD>
       <BODY>
       <!-- 未使用强制分段标签 -->
       <FONT COLOR="gray">
       随着软件应用领域越来越广泛，其质量的优劣也日益受到人们的重视。软件测试是软件生命周期中一项非常重要
      且非常复杂的工作，对软件可靠性保证具有极其重要的意义。
       在软件测试过程中应该应用各种测试方法，如黑盒测试、白盒测试、功能测试、系统测试、压力测试、安装卸载
      测试、兼容性测试、α测试、β测试等。
       </FONT>
       <!-- 使用了强制分段标签 -->
      <FONT COLOR="#0080FF">
      <P ALIGN="center">
      随着软件应用领域越来越广泛，其质量的优劣也日益受到人们的重视。软件测试是软件生命周期中一项非常重要
      且非常复杂的工作，对软件可靠性保证具有极其重要的意义。
      </P>
      <P>
      在软件测试过程中应该应用各种测试方法，如黑盒测试、白盒测试、功能测试、系统测试、压力测试、安装卸载
      测试、兼容性测试、α测试、β测试等。
      </P>
      </FONT>
      </BODY>
       </HTML>

示例代码的执行效果如图3-8所示。

图3-8 强制分段标签演示

3.2.3 分割线标签

分隔线标签<HR>显示为一条水平线段，用于分隔上下两段页面内容，用法如下：

      <HR  COLOR="color"  WIDTH="width"  SIZE="size"  ALIGN="align"  NOSHADE>

属性说明：

● COLOR：指定分割线的颜色，可以为颜色名称或颜色代码。

● WIDTH：指定分割线的宽度，可以为百分比宽度或像素宽度。

● SIZE：指定分割线的尺寸（粗细）。

● ALIGN：指定分割线的对齐方式，可能的取值如下：

Left左对齐

Center居中对齐，默认值

Right右对齐

● NOSHADE：指定分割线无阴影。

分隔线标签的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <HEAD>
       <TITLE>分割线标签演示</TITLE>
      </HEAD>
      <BODY><FONT SIZE="-1">
      普通的分隔线：<HR>
      宽度为1/4窗口的分隔线：<HR WIDTH="25%">
      宽度为250像素的分隔线：<HR WIDTH="250px">
      厚度为15的淡蓝色分隔线：<HR COLOR="#0080FF" SIZE="15">
      厚度为0的红色分割线：<HR SIZE="0" COLOR="RED">
      右对齐、1/2窗口宽的蓝色分隔线：<HR WIDTH="50%" COLOR="Blue" ALIGN="Right">
      左对齐、1/2窗口宽的蓝色分隔线：<HR WIDTH="50%" COLOR="Blue" ALIGN="Left">
      无阴影的分隔线：<HR NOSHADE>
      </FONT>
      </BODY>
       </HTML>

示例代码的执行效果如图3-9所示。

图3-9 分割线标签演示

3.2.4 居中对齐标签

居中对齐标签<CENTER>用于将文本、图片、表格等页面元素设置为居中对齐，用法如下：

      <CENTER>
       element
      </CENTER>

居中对齐标签的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>居中对齐标签演示</TITLE>
       </HEAD>
       <BODY>
       <CENTER>
       <FONT SIZE="2" COLOR="#123456">&nbsp;&nbsp;&nbsp;&nbsp;软件测试在软件生命周期中占据重要
      的地位，在传统的瀑布模型中软件测试学仅处于运行维护阶段之前，是软件产品交付用户使用之前保证软件质量的重要
      手段。</FONT><BR>
       <IMG SRC="../images/fish.jpg"><BR>
       <FONT SIZE="2" COLOR="#654321">&nbsp;&nbsp;&nbsp;&nbsp;近来，软件工程界趋向于一种新的观
      点，即认为软件生命周期每一阶段中都应包含测试，从而检验本阶段的成果是否接近预期的目标，尽可能早地发现错误
      并加以修正。如果不在早期阶段进行测试，错误的延时扩散常常会导致最后成品测试的巨大困难。</FONT>
       </CENTER>
       </BODY>
      </HTML>

示例代码的执行效果如图3-10所示。

图3-10 居中对齐标签演示

3.2.5 块引用标签

块引用标签<BLOCKQUOTE>会用分离的块显示大段的引用，用法如下：

      <BLOCKQUOTE> text </BLOCKQUOTE>

通常，一组块引用标签往右缩排一个单位，两组（嵌套使用的）块引用标签往右缩排两个单位，依此类推。块引用标签的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>块引用标签演示</TITLE>
       </HEAD>
       <BODY>
       正常的文本块
       <BLOCKQUOTE>缩排一个单位的文本块</BLOCKQUOTE>
       <BLOCKQUOTE>
      <BLOCKQUOTE>
      <BLOCKQUOTE>缩排三个单位的文本块</BLOCKQUOTE>
      </BLOCKQUOTE>
      </BLOCKQUOTE>
      </BODY>
       </HTML>

示例代码的执行效果如图3-11所示。

图3-11 块引用标签演示

3.2.6 预设格式标签

预设格式（preformat）标签<PRE>用于显示页面文本，并且不改变原有的排版和格式，即空格、新行和制表符均保持原样，用法如下：

      <PRE>
       paragraph
      </PRE>

预设格式标签的示例代码如下：

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
       <HEAD>
        <TITLE>预设格式标签演示</TITLE>
       </HEAD>
       <BODY>
       <!-- 未使用预设格式标签 -->
       <FONT COLOR="gray">
       中华好儿孙 落地就生根
              脚踏三山和五岳 手托日月和星辰
                            来带一腔血 去带清白身
            活着给祖先争口气 誓不留悔恨
       </FONT>
       <!-- 使用了预设格式标签 -->
       <PRE><FONT COLOR="#0080FF">
       中华好儿孙 落地就生根
              脚踏三山和五岳 手托日月和星辰
                            来带一腔血 去带清白身
            活着给祖先争口气 誓不留悔恨
       </FONT>
      </PRE>
      </BODY>
       </HTML>

示例代码的执行效果如图3-12所示。

图3-12 预设格式标签演示

3.3 本章小结

通过对本章的学习，读者应当掌握以下内容：

● HTML文字标签的使用

● HTML段落标签的使用