15. 在 HTML 中标记文本内容

作者：mnfrancis · 2008年7月8日

上一篇：为你的 HTML 文档选择适当的文档类型
下一篇：HTML 列表
目录

序言

在本篇文章中，我将向你们讲述以下方面的基础知识：使用 HTML 来描述文档主体内的内容含义。

我们将考察一些常用结构元素如标题、段落，以及嵌入式引用和代码。之后我们将考察内联内容，如简短引用和强调，最后再大致看看已经过时的表现性（presentational）内容。本篇文章的内容目录如下：

空格——最后的边界
块级元素
页面部分的标题
一般段落
引用其它来源
预格式化的文本

内联元素
简短引用
强调
斜体文本

表现性元素——绝不要使用
总结

附注：在每个代码示例后，都有一个“观看实例”的链接，点击该链接将看到源代码在浏览器中实际渲染的效果。这样你们就既可以看到源代码，又可以看到源代码在浏览器中实际渲染的效果了。

空格——最后的边界

在开始讲述文本之前，我想先讲述一个重要内容，那就是空格，确切地说，是词语之间的空格。在写 HTML
时，源文件中包含被称为“空白（white
space）”的用于分隔开文本的字符。一个空格字符（如你用键盘上的空格键打出的空格字符）是最常见的“空白字符”，不过“空白字符”还可包括如文档中
两个单独的行之间（被称为回车或新行）的制表符和换行符等。

在 HTML 中，多个空白字符（几乎）总是被在作为一个空格处理。例如：

<h3>In   the
beginning</h3>

观看实例

在被浏览器解读时，等同于：

<h3>In the beginning</h3>

唯一的例外出现在

pre

元素中，这在本文的后面部分将详细讲述。

在 HTML 中，多个空格被作为一个空格处理，这可能会是第一次编写 HTML
文档的新手搞不清楚的地方，这些新手会为了达到所希望的缩进而试图在文本中加入多余的空格，或试图在句子之间的句号后面加入更多的间距并在两个段落间引入
更多的垂直空格。这里你们要记住一点，那就是网页的外观应由 CSS 样式表控制，而不由 HTML 控制，这在以后的课程中将详细讲述。

块级元素

在这个部分，我将讲述用于格式化文本的一些常用块级元素的语法和用法。

页面部分的标题

一旦页面被划分为逻辑区段，则每个区段都应有适当的标题。关于这一点，在“一个好的网页需要什么”这篇文章中有进一步的讨论。

HTML 定义有6个层次的标题，即

h1

，

h2

，

h3

，

h4

，

h5

，和

h6

。一般而言，

h1

将是整个网页的主标题，然后用

h2

表示区段标题，用

h3

表示区段中的小节标题，依次类推。

使用标题层次来描述文档的区段、分区段、分区段下的分区段，这是很重要的，因为这样可以使屏幕阅读器更容易读懂文档，并便于进行自动处理（如 Google 的网页索引抓取程序）。

以本文档为一个模板，标题结构的示例如下：

<h1>Marking up textual content in HTML</h1>
<h2>Introduction</h2>
<h2>Space—the final frontier</h2>
<h2>Block level elements</h2>
<h3>Page section headings</h3>
<h3>Generic paragraphs</h3>
<h3>Quoting other sources</h3>
<h3>Preformatted text</h3>
<h2>Inline elements</h2>

[…and so on…]

观看实例

一般段落

段落是绝大多数文档的构造块。在 HTML 中，一个段落由

p

元素表示，该元素无特定的属性。例如：

<p>This is a very short paragraph. It only has two sentences.</p>

观看实例

许多文章和书籍中的一个段落可只包含一个句子。尽管在书写的文章中，“段落”一词的含义是相当清楚的，但在网页上，一些短得多的文本常常也被包裹在段落元素中，这是因为编写网页的人认为这样做比使用一个

div

元素更为“语义化”（我们将在后面的一篇被称为“通用容器”的文章中再讲述这方面的内容）。

一个段落包含一个或多个句子，如同报纸和书籍中的段落一样。在网页上，最好将这种意义上的“段落”用段落元素表示，而不用段落元素来表示页面内那些不成句子的任何文本。那些不成句子的由几个词组成的文本，不应被标记为一个段落。

引用其它来源

很多文章、博客文章和参考文档都常常引用其它文章的全部或部分。在 HTML中，这种较长的引用（如引用完整的句子、段落、列表等），是使用

blockquote

元素而被标记的。

一个

blockquote

元素不能包含文本，而是必须在其中有另外一个块级元素。你应当使用与被引用的原文档中所使用的块级元素一样的块级元素，例如，如果你引用的是文本的一个段落，则应使用段落元素；如果你引用的是项目列表，则应使用列表元素，以此类推。

如果引用的内容来自另一个网页，你可以使用

cite

属性，来指明引用的内容是来自另一个网页，如以下所示的那样：

<p>HTML 4.01 is the only version of HTML that you should use
when creating a new web page, as, according to the
specification:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
<p>This document obsoletes previous versions of HTML 4.0,
although W3C will continue to make those specifications and
their DTDs available at the W3C Web site.</p>
</blockquote>

观看实例

如果引语来自小说、杂志或其它形式的离线内容，则不需使用

cite

属性。

预格式化的文本

任何预格式化的文本和其中的空白字符需要按原样保留的文本都应当使用

pre

元素而被标记。

在绝大多数浏览器中，被标记为预格式化的文本将以其在源文件中的原样显示，有时候使用固定宽度（等宽）的字体，给人以文本是用打字机打出来的感觉。为预格式化的文本使用固定宽度的字体，是编程员的习惯做法。

以下这个示例是一个用 perl 编程语言写成的一个代码段：

<pre><code class="language-perl">
# read in the named file in its entirety
sub slurp {
my $filename = shift;
my $file     = new FileHandle $filename;

if ( defined $file ) {
local $/;
return <$file>;
}
return undef;
};
<code></pre>

观看实例

关于

code

元素的使用，将在后面“罕为人知的语义元素”这篇文章中详细讲述。

内联元素

在这个部分，我将讲述用于格式化文本的一些常用内联元素的语法和用法。

简短引用

用于正常的句子或段落之中的简短引用被包含在

q

元素之中。与

blockquote

元素相似，

q

元素可包含一个

cite

属性，用于指明引用的内容来自互联网上的哪个网页。

一般而言，在被显示时，简短引用都应在引号之内。根据 HTML 规范，引号应由“用户代理”插入，这样它们就能被正确地嵌套，并能显示文档中所使用的语言。可用 CSS 来控制所使用的引号，这将在后面“样式化文本”的文章中详细讲述。

以下是一个

q

元素的示例：

<p>This did not end well for me. Oh well,
<q lang="fr">c'est la vie</q> as the French say.</p>

观看实例

强调

HTML 中包含有两种指明文档中的文本是需要向用户强调显示的文本（如提示出现错误的消息、警示或通知等）的方法。
对浏览器来说，这通常意味着为需要强调显示的文本应用不同的颜色、字体，或用粗体或斜体显示文本。对使用屏幕阅读器的用户来说，可能会以不同的声音或其它
听觉效果而知晓这些强调文本。

对需要强调的文本，你使用

em

元素，如以下所示的那样：

<p><em>Please note:</em> the kettle is to be unplugged at night.</p>

观看实例

如果整个句子需要强调，且该句子中还有某一处需要进一步地强调，则你可使用

strong

元素来指明需要比一般强调内容更为明显的强调内容，如以下所示的那样：

<p><em>Please note: the kettle <strong>must</strong> be unplugged every evening, otherwise it will explode -
<strong>killing us all</strong></em>.</p>

观看实例

斜体文本

一般认为，“斜体”不描述文本的含义，因此

i

元素就不应该在 HTML 中使用（也就是说，

i

元素和后面要讲的其它一些表现性元素很类似。

其实不能一概而论，在某些情况下，在 HTML 中将文本内容描述为“斜体文本”是完全正确的。一些词句如船名、电视连续剧、电影和书籍的名称、一些技术术语或其它分类学名称，最好被描述为“斜体文本”，而不必为它们创建一些仅供它们使用的元素。

有观点认为，以斜体显示一小段文本指明了该小段文本是特别的，而它特别在哪里，则由上下文关系指明。实际上，在目前正在起草的 HTML 5 规范中就反映出了这种观点：

i

元素表示一小段语态和语气有所不同的文本。只有在没有更适宜的其它元素可用的情况下，才使用

i

元素。

由于

i

元素可被 CSS 重新样式化为非斜体显示，在以上这段引语中，“斜体”基本上是指“文本有点不同”。就我个人的观点而言，我认为这是不能接受的，不过以这样的方式使用“斜体”这个词已有很多的先例。

表现性元素——绝不要使用

HTML 规范中包含一些被广泛地称为“表现性元素”的一些元素，它们之所以被称为“表现性元素”，是因为它们仅规定包含在它们之中的内容的外观样式，而不是含义。

这些“表现性元素”中的一些，已在 HTML 规范中被注明为“不赞成使用的元素”。这就是说，它们已被能到达同样的样式化文本效果的新方法所取代。

在此我将简要介绍一下这些“表现性元素”，不过你们要注意，这只是在回顾以前的 HTML 编写方法，你们现在写 HTML 文档时绝不应再使用这些“表现性元素”。样式化文本应采用另外的方法，这将在以后的两篇文章即“用 CSS 进行文本样式化”和“罕为人知的语义元素”中详细讲述。

font face="…" size="…"

包含在该元素中的文本应由浏览器以与默认字体不同的一种字体渲染。正确的做法是使用 CSS 来设置字体。

b

包含在该元素之中的文本为粗体，基本上就意味着文本是被强调的文本，因此你们应当使用前面提到的

em

元素或

strong

元素代替它。

s

和

strike

包含在该元素之中的文本为有删除线的文本，如果这只是为了实现一种表现性效果，应使用 CSS 来设置。而在文本确实是被标示为已被删除或不需要的文本时，则应使用

del

元素来标记文本，这在后面的文章中将详细讲述。

u

包含在该元素之中的文本为有下划线的文本，这基本是一种视觉效果，因此正确的做法是使用 CSS 来设置有下划线的文本。

tt

包含在该元素之中的文本以“打字体”或等宽字体显示，这应该通过使用 CSS 来设置，或者使用更为恰当的语义化的元素如

pre

元素。

big

和

small

包含在该元素之中的文本被以大号字体或小号字体显示，这应该通过使用 CSS 来设置。

总结

在本篇文章中，我讲述了一些最常用的标记文本内容的 HTML 元素。在下一篇文章中，你们将学习如何标记另外一种类型的内容，即项目列表。

上一篇：为你的 HTML 文档选择适当的文档类型
下一篇：HTML 列表
目录

作者简介

Mark Norman Francis 早在万维网诞生前，就在从事互联网领域的工作了，一直持续到现在。目前他是全球最大网站 Yahoo! 的前端设计师，负责制定 Web 开发的最佳习惯、代码标准和质量标准。

在加入 Yahoo! 前，他先后在 Formula One Management（F-1管理公司）、Purple Interactive（紫色互动公司）、伦敦城市大学从事过多种工作，包括 Web 开发、后端 CGI 编程和系统架构等。他的博客地址为：http://marknormanfrancis.com/。

适合打印的版本

分类
Opera 中国
Opera 桌面版
Opera Mini

最新blog文章
这是一个开始 （博客开篇词）
更多