HTML与CSS前台页面设计 - 万水书苑-出版资源网

全文

(1)第 4 章 HTML 网页主体与内容标记. 本章主要介绍 HTML 语言的标题与段落标记、文本格式中的常用标记以及<div>与<span> 标记的使用方法，简要介绍了 HTML 语言中特殊字符的组成结构和使用方法。网页主体与内容标记是 HTML 网页中的基础内容，需要重点掌握。.    . 标题与段落标记的使用文本格式标记的使用 <div>与<span>标记的使用 HTML 中特殊字符的使用. 4.1. 标题与段落标记的使用. 4.1.1 h1、h2、h3、h4、h5 与 h6 一般文章都有标题、副标题、章和节等结构，HTML 中也提供了相应的标题标记<hn>，其中 n 为标题的等级，HTML 总共提供 6 个等级的标题，n 越小，标题字号就越大。 <hn>标记的一般格式为： <hn color=属性值 align=属性值>标题</hn> （n=1，…，6）. 说明：<hn>的属性有 color、align，分别标识标题的颜色和位置（左、右、中间）。例 4-1 显示 6 个等级的标题。 01 02 03 04 05 06 07 08 09 10 11 12 13.  <html> <head><title>标题示例</title></head> <body> 这是一行普通文字<P> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>. 运行结果如图 4-1 所示。.

(2) 第4章. 图 4-1. HTML 网页主体与内容标记. 标题示例. 从例 4-1 可以看出，每遇到一个标题时，当前段落就会被终止，标题前后会自动留出一定的空白，文本自动从下一行开始。由于 h 元素拥有确切的语义，请慎重选择恰当的标记层级来构建文档的结构。因此，请不要利用标题标记来改变同一行中的字体大小。相反，应当使用层叠样式表定义来达到漂亮的显示效果。 4.1.2 p 为了排列的整齐、清晰，文字段落之间常用<p></p>来作标记。<p>是 HTML 格式中特有的段落元素。在 HTML 格式里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉，它会根据窗口的宽度自动转折到下一行。因此，在原始文件中的<p>指出在这里告一段落，下面的文字另起一段。如果没有遇到<p>这个符号，它就会把所有的文字都挤在一个段落里，不遇到窗口边界是不会换行的。段落标记里面可以加入文字、列表、表格等。文件段落的开始由<p>来标记，段落的结束由</p>来标记，</p>是可以省略的，因为下一个<p>的开始就意味着上一个<p>的结束。 <p>标记的一般格式为： <p align=属性值>文本</p>. 说明：<p>标记有一个常用属性 align，用来指明字符显示时的对齐方式，其值一般有 left （左）、center（中）、right（右）三种。例 4-2 文件段落标记示例。 01 02 03 04 05 06 07 08 09 10 11.  <html> <head> <title>我的个人主页</title> </head> <body> <p center >我的个人主页</p> <P> My Homepage </body> </html>. 运行结果如图 4-2 所示。. 31.

(3) 32. HTML 与 CSS 前台页面设计. 图 4-2. 文件段落标记示例. 在 HTML 中，有一个与<p>功能类似的标记<br>，但<br>标记只用来标识一个换行动作，相当于字处理文件中的按回车键的功能。 <br>标记的格式为：文本<br>. 4.1.3 blockquote <blockquote>标记可定义一个块引用。<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。 <blockquote>标记的一般格式为： < blockquote cite=URL>文本</ blockquote >. 说明：属性 cite 的值是被引用内容的 URL。例 4-3 块引用示例。 01 02 03 04 05 06 07 08.  <html> <body> < blockquote cite=http://www.dreamdu.com/xhtml/> <p>学习标准网页设计</p> </ blockquote> </body> </html>. 4.1.4 address <address>可以定义一个地址（比如电子邮件地址），用它来定义地址、签名或文档的作者身份。不论创建的文档是简短扼要还是冗长完整，都应该确保每个文档都附加了一个地址，这样做不仅为读者提供了反馈的渠道，还可以增加文档的可信度。 <address>标记的一般格式为： <address>文本</address>. 例 4-4 假设作为某个公司用户服务的工作人员，其地址在源代码中通常如下所示，其中包括一个特殊的"mailto:"： 01 02 03 04.  <html> <head> <title>示例</title>.

(4) 第4章 05 06 07 08 09 10 11 12 13. HTML 网页主体与内容标记. </head> <body> <address> <a href="mailto:[email protected]">用户服务信箱</a><br /> 武汉 xxxx 有限公司<br /> 东湖开发区 168 号<br /> </address> </body> </html>. 说明：认为大多数文档都应该把它们作者的地址包含在某个便于读者阅读的地方，通常是放在末尾。最起码，这个地址应该是作者或者网管的电子邮件地址或指向他们主页的链接。街道地址和电话号码是可选的，而出于隐私权方面的考虑，通常不会包括个人地址。 4.1.5 pre <pre>标记可定义预格式化的文本。被包围在<pre>标记中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。<pre>标记的一个常见应用就是用来表示计算机的源代码。 <pre>标记的一般格式为： <pre > 文本块 </pre >. 说明：（1）一般情况下，HTML 文件中的文本是基于 HTML 标记重新格式化的，文本中任何额外的空白字符（空格、制表符、回车符等）都被浏览器忽略。但若使用<pre>…</pre>标记，任何被该标记括起来的空白字符都可出现在窗口的输出中，即文本可按照原始码的排列方式显示。（2）可以导致段落断开的标记（如标题、<p>和<address> 标记）最好不要包含在<pre> 所定义的块里。尽管有些浏览器会把段落结束标记解释为简单的换行，但是这种行为在所有浏览器上并不都是一样的。（3）<pre>标记中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标记（如<a>标记）放到<pre>块中时，就像放在 HTML 文档的其他部分中一样即可。例 4-5 预格式文本。 01 02 03 04 05 06 07 08 09 10 11 12 13 14.  <html> <body> <pre> 这是预格式文本。它保留了空格和换行。 </pre> <p>pre 标记很适合显示计算机代码：</p> <pre> for i = 1 to 10 print i next i </pre>. 33.

(5) 34. HTML 与 CSS 前台页面设计 15 16. </body> </html>. 上面这段代码的显示效果如下：这是预格式文本。它保留了空格和换行。 pre 标记很适合显示计算机代码： for i = 1 to 10 print i next i. 4.2. 文本格式标记的使用. 4.2.1 em 标记<em>用来表示强调，其文本默认样式为斜体。 <em>标记的一般格式为： <em>文本</em >. 例 4-6 <em>标记示例。 01 02 03 04 05 06 07.  <html> <head><title> em 标记示例</title></head> <body> <p>事业是<em>干</em>出来的，不是<em>吹</em>出来的。</p> </body> </html>. 上面这段代码的显示效果如下：事业是干出来的，不是吹出来的。. 4.2.2 strong 标记<strong>把文本定义为语气更强的强调的内容，其文本默认样式为粗体。 <strong>标记的一般格式为： < strong >文本</ strong >. 例 4-7 <strong>标记示例。 01 02 03 04 05 06 07.  <html> <head><title> strong 标记示例</title></head> <body> 在< strong >学校 strong >学习。 </body> </html>. 4.2.3 cite 标记<cite>定义引用，可使用该标记对参考文献的引用进行定义，比如书籍或杂志的标题。 <cite>标记的一般格式为： <cite. cite=属性值>文本</ cite >.

(6) 第4章. HTML 网页主体与内容标记. 说明：<cite>属性值表示引用的 URI。例 4-8 <cite>标记示例。 01 02 03 04 05 06 07.  <html> <head><title> cite 标记示例</title></head> <body> <cite cite =”http://www.dreamdu.com/xhtml/>一步步的教我学 HTML 与 XHTML</cite > </body> </html>. 4.2.4 i 与 b <i>与<b>标记均是字体样式元素。<i>显示斜体文本效果，<b>呈现粗体文本效果。 <i>与<b>标记的一般格式为： <i>文本</i> <b>文本</b>. 例 4-9 <i>与<b>标记示例。 01. . 02 03. <html> <head><title>字体样式</title></head>. 04 05. <body> <b>黑体字</b>. 06. <i>斜体字</i>. 07. </body>. 08. </html>. 4.2.5 big 与 small <big>与<small>标记也是字体样式元素。<big>呈现大号字体效果，<small>呈现小号字体效果。 <big>与<small>标记的一般格式为： <big>文本</big> <small>文本</small>. 例 4-10 <big>与<small>标记示例。 01. . 02 03. <html> <head><title>字体样式</title></head>. 04. <body>. 05. <big>大号字体</big>. 06. < small >小号字体</ small >. 07. </body>. 08. </html>. 4.2.6 tt <tt>标记呈现类似打字机或者等宽的文本效果。 <tt>标记的一般格式为： <tt>文本</ tt >. 35.

(7) 36. HTML 与 CSS 前台页面设计. 例 4-11 <tt>标记示例。 01 02 03 04 05 06.  <html> <body> <tt>文本字体</tt> </body> </html>. 4.2.7 sup 与 sub <sup>与<sub>标记均是用于数学公式、科学符号和化学公式中的标记。<sup>标记可定义上标文本，<sub>标记可定义下标文本。 <sup>与<sub>标记的一般格式为： < sup >文本</ sup > <sub >文本</ sub >. 说明：<sup>与<sub>标记中的文本内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。<sup>标记中的文本出现在当前文本流的上方，而<sub>标记中的文本出现在当前文本流的下方。例 4-12 <sup>与<sub>标记示例。 01 02 03 04 05 06 07.  <html> <body> <p>X<sup>2</sup>+2X+1=0</p> <p>H<sub>2</sub>O</p> </body> </html>. 上面这段代码的显示效果如下： X2+2X+1=0 H2O. 4.2.8 q <q>标记可定义一个短块的引用。 <q>标记的一般格式为： <q>文本</q>. 说明：<q>与<blockquote>的区别，<q>标记在本质上与<blockquote>是一样的。不同之处在于它们的显示和应用。<q>标记用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用<blockquote>标记。例 4-13 <q>与<blockquote>标记示例。 01 02 03 04 05 06 07 08 09 10.  <html> <body> 这是长的引用： <blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote> 这是短的引用： <q> 这是短的引用。.

(8) 第4章 11 12 13 14 15 16. HTML 网页主体与内容标记. </q> <p> 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 </p> </body> </html>. 程序运行结果如图 4-3 所示。. 图 4-3. <q>与<blockquote>标记示例. 4.2.9 dfn <dfn>标记定义一个项目，可标记那些对特殊术语或短语的定义。现在流行的浏览器通常用斜体来显示<dfn>中的文本。 <dfn>标记的一般格式为： <dfn>文本</dfn>. 例 4-14 <dfn>标记示例。 01 02 03 04 05 06.  <html> <body> <dfn>北京</dfn>是一个地名，更是一种向往! </body> </html>. 上面这段代码的显示效果如下：北京是一个地名，更是一种向往!. 4.2.10 abbr 与 acronym <abbr>标记表示一个缩写形式，用于表示 Web 页面上的简称。<abbr>标记最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的简写形式。浏览器可能会根据这个信息改变对这些文本的显示方式或者用其他文本代替。 <abbr>标记的一般格式为： < abbr title="文本">文本简称</abbr>. 说明：title 属性值为“文本”用来指出“文本简称”的原词或原短语。title 属性与<title> 标记不同（<title>标记在文档中只能出现一次），它可以为文档中任意多个标记指定参考信息。例如：. 37.

(9) 38. HTML 与 CSS 前台页面设计 <abbr title="etcetera">etc.</abbr>. <acronym>标记可定义只取首字母缩写，比如"Cascading Style Sheets"。首字母缩写成 “CSS”。 <acronym>标记的一般格式为： < acronym title="文本">文本首字母缩写</ acronym>. 说明：title 属性用来为文本首字母缩写提供说明信息，即通过 title 属性来给出缩写的完整名称，只需要在程序运行时把鼠标放在缩写词上就会显示完整的意思。例如 Cascading Style Sheets 缩写成 CSS： <acronym title=" Cascading Style Sheets "> CSS </acronym>. <abbr>与<acronym>标记的区别是：<abbr>是指任何缩写的词，例如 Auguest 缩写成 Agu；而<acronym>则是专门指首字母缩写。 4.2.11 del 与 ins <del>标记定义文档中已被删除的文本。 <del>标记的一般格式为： <del >文本</del>. <ins>标记定义已经被插入文档中的文本。 <ins>标记的一般格式为： <ins>文本</ins>. 说明：<del>与<ins>标记配合使用来描述文档中的更新和修正。例 4-15 带有已删除部分和新插入部分的文本。 01 02 03 04 05 06.  <html> <body> 没有了牛，的日子还要怎么<DEL>过下去</DEL> <INS>活下去</INS>? </body> </html>. 上面这段代码的显示效果如下：没有了牛，的日子还要怎么过下去活下去?. 注意：如果想通过标记来显示文档编辑样式，<ins>和<del>刚好可以用到。就像它们的名字，<ins>通过一个下划线来突出那些被添加进文档的内容，而<del>则通过删除线来显示那些从中删除的文字。 4.2.12 bdo <bdo>标记可重新定义文字显示方向。 <bdo>标记的一般格式为： <bdo dir=属性值>文本</bdo>. 说明：dir 属性有两个值：ltr 为从左到右；rtl 为从右到左。例 4-16 bdo 标记示例。 01 02 03 04 05.  <html> <body> <p> 如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；.

(10) 第4章 06 07 08 09 10 11 12 13. HTML 网页主体与内容标记. </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html>. 上面这段代码的显示效果如下：如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)； txet werbeH emos si ereH. 4.2.13 code、kbd、samp 与 var <code>、<kbd>、<samp>与<var>标记常用于显示计算机编程代码。这几个标记不只是让用户更容易理解和浏览文档，而且将来某些自动系统还可以利用这些恰当的标记从文档中提取信息以及文档中提到的有用参数。提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。 1．<code> <code>标记定义计算机代码文本，用于表示计算机源代码或者其他机器可以阅读的文本内容。包含在该<code>标记内的文本将用等宽、类似电传打字机样式的字体显示出来。 <code>标记的一般格式为： <code >计算机源代码</code>. 例如： <code>Computer code</code>. 2．<kbd> <kbd>标记定义键盘文本，它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 <kbd>标记的一般格式为： < kbd >计算机源代码</ kbd >. 例如，键入<kbd>quit</kbd>来退出程序，或者键入<kbd>menu</kbd>来返回主菜单。 3．<samp> <samp>标记定义样本文本，表示一段用户应该对其没有什么其他解释的文本字符，要从正常的上下文抽取这些字符时，通常要用到这个标记。 <samp>标记的一般格式为： <samp>文本</samp>. 例如： 01 02 03. <p>新手接触网络，有时不连网就尝试打开浏览器，这时浏览器会显示： <samp>Internet Explorer 无法显示该网页</samp> </p>. <samp>并不经常使用，只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标记。 4．<var> <var>标记定义变量，可以将此标记与<pre>及<code>标记结合使用，用来显示计算机编程代码范例及类似方面的特定元素。用<var>标记的文本通常显示为斜体。. 39.

(11) 40. HTML 与 CSS 前台页面设计. <var>标记的一般格式为： <var>文本</var>. 例如： <var>Computer variable</var>. 4.2.14 hr <hr>标记在 HTML 页面中创建一条水平线，可以在视觉上将文档分隔成各个部分。 <hr>标记的一般格式为： <hr 属性="属性值">. 在 HTML 中，除了标准通用属性之外，<hr>标记的几个常用属性如表 4-1 所示。表 4-1 <hr>标记的常用属性属性名. 意义. align. 设定线条置放位置，可选择 left、right、center 三种设定值. size. 设定线条厚度，以像素为单位，默认为 2. color. 设定线条颜色，默认为黑色. width. 设定线条长度，可以是绝对值（以像素为单位）或相对值，默认为 100%. noshade. 设定线条为平面显示还是立体显示，当属性值设置为 true 时，水平线呈现为纯色（2D 效果）；当属性值设置为 false 时，水平线显示为双色凹槽（3D 效果）. 例 4-17 被水平线分隔的标题和段落。 01 02 03 04 05 06 07 08 09 10 11 12.  <html> <head> <title>水平线分隔的标题和段落</title> </head> <body> <h1 align="CENTER">这是文章标题</h1> <hr align="CENTER" width="60%"> <p align="CENTER">这是文章段落</p> <hr align="LEFT" size="2" color="#0000FF" noshade ="false"> </body> </html>. 程序运行结果如图 4-4 所示。. 图 4-4. <hr>标记示例.

(12) 第4章. HTML 网页主体与内容标记. 4.2.15 marquee 滚动字幕的使用使得整个网页更有动感，显得很有生气。用 HTML 的<marquee>滚动字幕标记所需的代码最少，能够以较少的下载时间换来较好的效果。 <marquee>标记的一般格式为： <marquee 属性="属性值">滚动字幕</marquee>. 标记属性的语法为： <marquee aligh=left|center|right|top|bottom bgcolor=#n direction=left|right|up|down behavior=type height＝n hspace＝n scrollamount=n Scrolldelay=n width=n VSpace=n loop＝n>. 下面解释一下各参数的含义。（1）align：是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（align=top）和靠下（align=bottom）两种位置。（2）bgcolor：用于设定活动字幕的背景颜色，一般是十六进制数。（3）direction：用于设定活动字幕的滚动方向是向左、向右、向上还是向下。（4）behavior：用于设定滚动的方式，主要由三种方式：behavior="scroll"，表示由一端滚动到另一端；behavior="slide"，表示由一端快速滑动到另一端，且不再重复；behavior= "alternate"，表示在两端之间来回滚动。（5）height：用于设定滚动字幕的高度。（6）width：设定滚动字幕的宽度。（7）hspace 和 vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。（8）scrollamount：用于设定活动字幕的滚动距离。（9）scrolldelay：用于设定滚动两次之间的延迟时间。（10）loop：用于设定滚动的次数，当 loop=-1 时，表示一直滚动下去，直到页面更新。 <marquee>标记的默认情况是向左滚动无限次，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前位置的宽度。例 4-18 文字水平滚动。 01 02 03 04 05 06 07 08 09 10.  <html> <head> <title>文字水平滚动</title> </head> <body> <marquee>欢迎光临！</marquee> <marquee width="200">滚动字幕的宽度是 200 像素</marquee> </body> </html>. 41.

(13) 42. HTML 与 CSS 前台页面设计. 例 4-19 文字垂直滚动。 01 02 03 04 05 06 07 08 09.  <html> <head> <title>文字垂直滚动</title> </head> <body> <marquee direction="up" >欢迎光临</marquee> </body> </html>. <marquee>标记的参数较多，在应用中要把握一个原则，能用默认值就不要再设置参数值，用什么参数就设置该参数的值，其他参数就不要再设置，以把代码控制在最少的范围内。. 4.3. 内容（多用途）标记. 4.3.1 div div 是 division 的简写，division 意为分割、区域。<div>标记在 HTML 中表示一个块，<div> 标记可以把文档分割为独立的、不同的部分，因而该标记被称为区隔标记。可以将它用作 Web 页面的组织工具，设定页面文字、图形、图像、表格等的摆放位置。可以通过 CSS 样式（style）为其赋予不同的表现。 <div>标记的一般格式为： <div 属性="属性值">文档</div>. 在 HTML 中，<div>标记中常用的属性如下：（1）class 或 id 属性：用于标识一个 div 块元素。这两者的主要差异是，class 用于元素组（类似的元素或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。（2）position 属性：用于定位一个 div 块元素。其属性值为 absolute|relative，当 position 属性值为 absolute 时，div 块元素位置固定；为 relative 时，div 块元素位置会随着内容的实际情况进行浮动。（3）display 属性：用于是否显示一个 div 块元素。其属性值为 block|none，当 display 属性值为 block 时，表示显示（这是默认状态）；为 none 时，div 块元素隐藏。（4）z-index:n 属性：是一个 div 块元素的优先属性。 z-index 可以理解为 z 轴的坐标（x、y 轴控制左右、上下方位，z 轴控制层叠 div 的前后方位），n 表示一个整数（正负均可），有多个 div 块元素时，n 越大，则越靠前显示。只有用绝对定位（position:absolute）时，属性 z-index 才起作用。如采用绝对定位方式定义一个 div 块元素： <div id="Layer" style="position:absolute; left:57px;top:27px;width:231px;height:108px; z-index:1; "></div>. 这里<div>元素用来定义一个层。id 用来定义块的名称。style 说明了它属于一种绝对的定位，并且列出了该层相对其父级左上角位置的上、下、左、右的距离，单位是像素。z-index 代表 z 轴，用来定义层的排列顺序。未设置绝对定位（position:absolute）的 div，其 z-index 永远为 0。未设定优先属性（z-index）的<div>，按照声明的顺序层叠，后声明的盖住先声明的，如果有两个<div>属于父子关系，则.

(14) 第4章. HTML 网页主体与内容标记. 子<div>覆盖父<div>。（5）style 属性：用于为一个<div>块元素指定样式。说明：  <div>是一个块级元素，浏览器通常会在<div>元素前后放置一个换行符。实际上，换行是<div>固有的唯一格式表现。  <div>可以视为一个包装标记，通过<div>的 class 或 id 应用额外的样式，把不同的风格用于标记之间的所有内容，包括图像在内。<div>给予了网页设计者另一层 Web 页组织手段。例 4-20 设置一个宽和高均为 200 像素的块。 01 02 03 04 05 06 07 08 09.  <html> <head> <title>设置一个块</title> </head> <body> <div style="width:200px;height:200px; background-color:Black;"></div> </body> </html>. 这里 height 设置 div 的高度，width 设置 div 的宽度，background-color 设置背景颜色。例 4-21 创建一个 div 块元素，指定样式显示苏轼的《水调歌头》。 01 02 03 04 05 06 07 08 09 10 11 12 13.  <html> <body> <div style="text-align:left; text-indent:30px; color:Blue; font-size:28px; font-family:宋体; background-color:Yellow"> <pre> 明月几时有？把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。 </pre> </div> </body> </html>. 这里 text-align 指定文本水平对齐方式，text-indent 设置文本的缩进格式，color 指定文本颜色，font-size 指定文本字符的大小，font-family 设置文本要用的字体名称。 4.3.2 span <span>标记在 HTML 中表示一个组合文档中的行内元素，<span>标记可以把一行文档中的某部分分割为独立的区域，从而实现某种特定效果，因而该标记被称为行内区隔标记。 <span>标记的一般格式为： < span 属性="属性值">文档</ span >. 在 HTML 中，<span>标记中常用的属性如下：（1）class 或 id 属性：用于标识一个 span 块元素。这两者的主要差异是，class 用于元素组（类似的元素或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。. 43.

(15) 44. HTML 与 CSS 前台页面设计. （2）style 属性：用于为一个 span 块元素指定样式。说明：span 是一个行内元素，不会引起换行。例 4-22 使用 span 元素创建一个内嵌文本容器，将包含的文本颜色变成蓝色。 01 02 03 04 05 06.  <html> <body> < p >本段包含了单独的<span style="color: blue">蓝色</span >单词</ p > </body> </html>. 例 4-23 span 元素的使用。 01 02 03 04 05 06 07 08 09 10 11 12.  <html> <head> <title>SPAN 元素的使用</title> <style> span.span1{color:#bbbbbb} </style> </head> <body> 大家好！我是新生，来自<span class="span1">湖北</span> </body> </html>. 从以上例子可知，HTML 中的 span 元素的作用就是让可以在一段字符中将样式作用于定义在 span 元素中的字符。 span 和 div 这两个 HTML 元素对于网页设计是很重要的，span 和 div 元素用于组织和结构化文档。若结合 class 和 id 属性一起使用，可通过 CSS 样式（style）为其赋予不同的表现，使网页更加丰富多彩。. 4.4. 特殊字符. 特殊字符是指在 HTML 中具有特别含义的字符，比如小于号<就表示 HTML 标记的开始，这个小于号不会显示在最终看到的网页里面。那如果希望在网页中显示一个小于号，该怎么办呢？这时就需要使用一些特殊的代码组合来替代。在 HTML 中特殊字符是不能直接使用的。要使用特殊字符，应使用它们的转义序列。在超文本标记语言里，一个特殊字符有两种表达方式，即字符转义序列或数字转义序列。所谓字符转义序列，实际上就是用有意义的名称来表示特殊字符，通常由前缀“&”加上字符对应的名称，再加上后缀“;”而组成。其表达方式如下： &name;. 其中 name 是一个用于表示字符的名称，它是区分大小写的。例如： & lt; font &lgt;. 显示为<font>，若直接写为<font>则被认为是一个标记。所谓数字转义序列，就是用数字来表示文档中的特殊字符，通常由前缀“&#”加上数值，再加上后缀“;”而组成。其表达方式如下： &#D;. 其中 D 是一个十进制数值。.

(16) 第4章. HTML 网页主体与内容标记. 例如： ©. 显示特殊字符为“©”。说明：（1）转义序列各字符间不能有空格。（2）转义序列必须以“;”结束。（3）单独的&不被认为是转义开始。使用字符转义序列比数字转义序列要容易记忆得多。例如“©”来表示版权符号“©”，用“®”来表示注册商标符号“®”，很显然，这样表示的语义更加明确。但遗憾的是，不是所有的浏览器都能够正确认出采用实体参考方式的特殊字符，但是它们都能够识别出采用数字参考方式的特殊字符，如果可能，对于一些特别不常见的字符应该使用数字参考方式。常用的特殊字符如表 4-2 所示。表 4-2 常用的特殊字符字符转义序列. 数字转义序列. 显示结果. 描述. <. <. <. 小于号或显示标记. >. &#62. >. 大于号或显示标记. &. &#38. &. 可用于显示其他特殊字符. ". ". ". 引号. ®. ®. ®. 已注册. ©. ©. ©. 版权.  .  . 不断行的空白. 例 4-24 将<pre>标记中的特殊符号转换为符号实体，显示一个 HTML 的源程序。 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22.  <html> <head> <title>pre 元素的使用</title> </head> <body> <pre> <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html> </pre> </body> </html>. 45.

(17) 46. HTML 与 CSS 前台页面设计. 上面这段代码的显示效果如图 4-5 所示。. 图 4-5. 特殊符号转换为符号实体示例. 说明：（1）制表符（tab）在<pre>标记定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用<pre> 标记格式化的文档段中使用空格，可以确保文本正确的水平位置。（2）如果您希望使用<pre>标记来定义计算机源代码，比如 HTML 源代码，请使用字符转义序列或数字转义序列来表示特殊字符，比如"<"代表"<"，">"代表">"，"&"代表"&"。. 4.5. 综合实例. 本节将结合本章所学的内容来制作一个简单的关于 HTML 文本格式标记的网页。网页内容如图 4-5 所示。. 图 4-5. 文本格式标记示例网页.

(18) 第4章. HTML 网页主体与内容标记. 文本格式标记示例网页源代码如下： <html> <head> <title>HTML 中的文本格式标记</title> </head> <body> <h1 align="CENTER">常见的文本格式标记</h1> <hr align="CENTER" width="60%"> <div align="CENTER"> em 标记用于<em>强调</em>的文本内容 <br> Strong 标记用于<strong>强调语气更强</strong>的文本内容 <br> Big 标记将文本呈现<big>大号字体</big> <br> Small 标记将文本呈现<small>小号字体</small> <br> b 标记将文本呈现为<b>粗体字</b> <br> i 标记将文本呈现为<i>斜体字</i> <br> sub 标记将呈现文本的<sub>下标</sub> <br> sup 标记将呈现文本的<sup>上标</sup> <p>这是文本段落</p> </div> <div style="text-align:left; text-indent:30px; color:Blue; font-size:18px; font-family:宋体"> <pre> 小草，没有花儿那样，绽放惹人喜欢，没有大树那样，高大为人庇荫。有的只是肆意生长，记住，有水分和土壤的地方就有它。退去花儿暂时的美丽，总有一天会凋谢。淡看树木的高大，总有一天会干枯。只有小草，哪个地方都能生存，烧不尽，吹又生。 </pre> </div> <hr> <div align="CENTER"> <address> <a href="mailto:[email protected]">用户服务信箱</a><br/> 武汉 xxxx 有限公司<br /> 东湖开发区 168 号<br /> </address> </div> </body> </html>. 47.

(19) 48. HTML 与 CSS 前台页面设计. 本章小结文本是 HTML 网页中的重要内容之一，编写 HTML 文档时，可以将文本放置在标记之间来设置文本的格式。设置文档中文本的格式内容包括分段与换行、设置段落对齐方式、设置字体、字号和文本颜色以及设置字符样式等。本章学习了 HTML 语言的标题与段落标记、文本格式中的常用标记以及<div>与<span>标记，HTML 语言中特殊字符的组成结构和使用方法。使用这些标记，告诉 Web 浏览器如何对文本进行格式化和显示，如何对网页元素进行分割和标记，以形成文本的布局、文字的格式及美观简洁的版面。. 习题四一、选择题 1．以下标记符中，没有对应的结束标记的是（）。 A．<body> B．<br> C．<html> D．<title> 2．关于文本对齐，源代码设置不正确的一项是（）。 A．居中对齐：<div align="middle">…</div> B．居右对齐：<div align="right">…</div> C．居左对齐：<div align="left">…</div> D．两端对齐：<div align="justify">…</div> 3．下面（）是换行符标记。 A．<body> B．<font> C．<br> D．<p> 4．在 HTML 中，标记<pre>的作用是（）。 A．标题标记 B．预排版标记 C．转行标记 D．文字效果标记 5．若要以标题 2 号字、居中、红色显示“vbscrip”，以下用法中正确的是（）。 A．<h2><div align="center"><color="#ff00000">vbscript</div></h2></font> B．<h2><div align="center"><font color="#ff00000">vbscript</div></h2></font> C．<h2><div align="center"><font color="#ff00000">vbscript<</h2>/div></font> D．<h2><div align="center"><font color="#ff00000">vbscript</font></div></h2> 6．若要以加粗宋体、12 号字显示“vbscript”以下用法中正确的是（）。 A．<b><font size=12>vbscript</b></font> B．<b><font face="宋体" size=12>vbscript</font></b> C．<b><font size="宋体" size=12>vbscript</b></font> D．<b><font size="宋体" fontsize=12>vbscript</b></font> 7．下列不是 HTML 中特殊字符的字符转义序列是（）。 A．& lt; B．&lgt;.

(20) 第4章. C．&top;. HTML 网页主体与内容标记. D． . 二、填空题 1．在 HTML 中，可定义一个地址的标记是________。 2．运行 HTML 文档时，<B>和</B>之间的内容将显示为________文字，<I>和</I>之间的内容将显示为________文字，<U>和</U>之间的内容将显示为________文字。 3．预格式化文本标记<pre></pre>的功能是________。 4．当<p>和</p>标记使用时，可以添加 ALIGN 属性，用以标识段落在浏览器中的________。 ALIGN 属性的参数值为________、________和________之一，分别表示<P></P>标记所括起的段落位于浏览器窗口的左侧、中间和右侧。 5．在页面中实现文字的下标标记是________。 6．创建一个 HTML 文档块元素的开始标记符是________，结束标记符是________。 7．呈现大号字体效果的标记是________，呈现小号字体效果的标记是________。 8．表示创建一条长度为浏览宽度一半的水平线的语句是________。. 实训使用 HTML 中文本格式标记设计一个简单的个人主页，内容包括自己的简介、兴趣爱好、特长、联系方式等。网页中文本的显示风格如下：  文字大小：12px。  颜色：蓝色。  文本对齐：左对齐。  字体：楷体。技术要点：（1）使用<div>块级元素对页面进行合理布局。（2）使用适当标记强调自己的兴趣爱好、特长、联系方式。. 49.

(21)