文本微调技巧

一：文本微调的的各类文本的含义（待补充）

1、＜span＞ 元素

＜span＞元素是＜div＞元素的一位表亲。它同样是一个没有语义值的通用元素，主要用于 组织行内元素。所以，如果你有一个句子或者一段文本需要组织，可以使用＜span＞元素。 下例中的＜span＞元素用于指出对于一位“发明者”（inventor）的描述内容。它包含了一个

<strong>元素以及一些文本内容。

<div class=nfootnotesn>

<h2>Footnotes</h2>

<p><span class=ninventorn><strong>l</strong> The World Wide Web was invented by Tim Berners-Lee</span></p>

<p><strong>2</strong> The W3C is the World Wide Web Consortium which maintains many Web standards</p>

</div>

就其自身而言，<span>元素对文档的视觉效果没有任何影响，但它却通过将相关元素 组织到一起，给内容标记增加了更多语义。在使用CSS规则向这些元素附加特定的样式时 尤其有用。

2、<em> 元素

<em>元素的内容是文档中有意强调的重点，其内容通常会使用斜体文本显示。有意强 调的美型类似于下例句子中的“must”（必须）一词：

<p>You <em>must</em> remember to close elements in HTML.</p>

应该只有在需要为某个词添加强调语气时使用该元素，而不只为得到斜体字效果而使 用。如果仅为显示风格原因需要斜体字效果——而非需要添加强调语气——则可以要么使 用<i>元素，要么最好使用CSSo

3、〈strong〉元素

<strong>元素用于有意强烈着重的内容——程度强于<em>元素。与<em>元素相同， 〈strong〉元素应仅用于文档中需强烈着重的部分。多数视觉浏览器以粗体字显示强烈着重 的内容。

<p><em>Always</em> look at burning magnesium through protective colored glass as it <strong>can cause blindness</strong>.</p>

图2-1展示了 Firefox浏览器中<em>元素与<strong>元素的不同效果（ch02_eg01.html）。 需要谨记的是，这些元素的展现效果（无论斜体或是粗体）本身并不重要。这些元素应 当用于对于词句的着重，并以此增强文档的语义，而非用于控制视觉效果。在第7章中你 将了解到，使用CSS修改这些元素的视觉呈现非常简单——例如可以将<em>元素的内容 背景设置为黄色，并将斜体变为粗体，以达到高亮的效果。

The following sentence uses a <dfii> element for the important term HTML

This book teaches you how mark up your documents for the web using HTML

图2-1

3、<b> 元素

<b>元素中的任何内容都会以粗体显示，如下例中的bold这个词：

The following word uses a <b>bold</b> typeface.

如对印刷方面感兴趣的话，则需要注意，浏览器未必使用对应字体的粗体版本显示<b> 元素。一些浏览器的算法是将正常版本字体的线形加粗，从而得到粗体效果。

4、<i> 元素

<i>元素的内容会以斜体显示，如下例中的italic这个词：

The following word uses an <i>italic</i> typeface.

浏览器未必使用对应字体的斜体版本显示其内容。大多数浏览器会通过将文字线形倾 斜的算法来模拟斜体效果。

1. <strong>^0<b> 以及 <em> 和 <i>

你可能很好奇为什么不同元素在浏览器中显示时会以同样的方式呈现，以及你应该选 择哪一个。总体上，因为强烈语气与内容强调未必一定与打印方式相关联，所以更推荐使 用<strong>和<em>而不是<b>和<i>。这意味着<strong>和<em>更易于在屏幕阅读器或者其 他不依赖于特定风格类型的呈现手段中使用。

5、<small> 元素

<small>元素用于打印“条纹细则”(fine print)o免责声明、警告以及版权信息等都是 典型的<small>元素用例。

<small id=HcopyrightH>© Rob Larsen 2012</small>

6、<cite> 元素

在引用文本时，可以通过将来源信息置于开标签<cite>与闭标签</cite>之间对其进行指 定。类似于纸质出版物，<cite>元素中的来源信息默认会以斜体字渲染(ch02_eg02.html)o

This chapter is taken from <cite>Beginning Web Development</cite>.

如果是引用在线资源，应该将<cite>元素置于<必元素中。第3章将会介绍，这样做可 以创建一条指向相关文档的链接。

有一些可能会利用<cite>元素的潜在应用。例如，一个搜索应用可以使用<cite>标签寻 找参考了特定成果的文档；或者浏览器可以通过收集<cite>元素的内容，生成给定文档的 参考文献目录。不过，到目前为止该元素的使用尚未广泛到足以支撑这两项功能。

7、<q> 元素

当在语句内想要添加引用时可以使用<q>元素，而不要将其独自作为整段缩进文本块

(ch02_eg03 .html):

<p>As Dylan Thomas said, <q>Somebody* s boring me. I think it1s me</q>.</p>

在HTML建议中提到，<q>元素中的文本应该以双引号开始及结束。Firefox浏览器会 自动为你插入引号，而IE系列中直到IE8才开始支持<q>元素。因此，如果页面中有引用 内容，需要注意IE7以及更早版本并不会自动显示引号。而如果需要这些浏览器的支持， 也可以使用CSS解决，这样做虽然不完美但有胜于无。

<q>元素同样可以带有cite特性。它的值应该是指向引用源的URL地址。

8、<dfn> 元素

<dfh>元素用于指明文档中引入的特殊术语。这一用法类似于本书行文中介绍重要新概 念时使用的斜体记录形式。

<dfh>元素的典型用法是在且只在第一次引入某关键术语时对其使用。多数现代浏览器 使用斜体字渲染<dfii>元素中的内容。

例如，可以指定下例句子中的术语“HTML”很重要，并应该进行相应的标记：

This book teaches you how to mark up your documents for the Web using <dfn>HTML</dfn>.

图2-2展示了<dfii>元素的使用效果(ch02_eg04.html)o

The following sentence uses a element for the important term HTML

This book teaches you how mark 叩 your documents for the web using HTML.

图2-2

9、<abbr> 元素

可以通过在<abbr>开标签与</abbr>闭标签之间放置缩写信息，以在使用缩略形式或首 字母缩写时进行指定。

可能的话，可以考虑同时使用title特性，并为其赋予缩写形式的完整含义。例如，指 定“HTML”为“HyperText Markup Languagev的缩写形式，则可以使用<abbr>元素进行 如下标记：

This book teaches you how to mark up your documents for the Web using <dfn> <abbr title=nHyperText Markup LanguageH>HTML</abbrX/dfn>

如对英语之外的语言进行缩写标记，还可以使用lang特性指定所用的语言。

10、<time> 元素

可以使用<time>元素及与其关联的datetime特性，标记以不同形式展示时间的文本。 这种用法包括<time>元素以及一个可选的datetime特性。<time>元素的内容用于在浏览器

中实际显示，而datetime特性则使用计算机可识别的格式记录相同的日期和时间。如省略 datetime特性，则<time>元素的内容必须符合datetime的有效格式，如表2-1所示。

表2-1 datetime特性的可选格式

格 式	示 例
有效的“月”日期字符串	<time>2013-l</time>
有效的日期字符串	<time>2013-1-1 </time>
有效的"月日"日期字符串	<time> 1-1 </time>
有效的时间字符串	<time>l 1:1 l</time>
有效的本地日期和时间字符串	<time>2013・ 1 ・ 1T11:11 </time>
有效的时区偏移字符串	<time>+0000</time> <time>-0800</time>
有效的全球日期和时间字符串	<time>2013-1-1T14:54+0000</time> <time>2013-1-1 T06:54-0800</time> <time>2013- M T06:54:39-0800</time>
有效的周字符串	<time>2013-W1 </time>
有效的非负整数年份字符串	<time>2013</time>
有效的持续时间字符串	<time>2h 3m 38s</time>

使用datetime特性使得能以友好的格式向用户展现日期时间，同时又可以保留计算机 可识别的格式供其加以利用（参见表2-1）。下例中是一个以人类可读形式展现有效日期字符 串的例子：

<time datetime=H2013-l-ln>New Year1s Day 2013</time>

<time datetime=H2004-10-27T20:25H>On a late October night</time>z the Boston Red Sox played in the decisive game four of the 2004 World Series

The world marathon record now sits at <time datetime=n2h 3m 38sH>

just over two hours</time>

11、<code> 元素

可以使用<mark>元素在文档中高亮显示文本。<mark>元素的设计初衷是可以将读者的 注意力吸引到文档中原作者着重内容之外的部分。其使用方式类似于在纸质书中使用高亮 笔标注内容。在一些网站中，<mark>元素被普遍用于凸显文本块中匹配到搜索字眼的内容。 下例中展示了在文本块中使用<mark>元素高亮显示“HTML5” 一词：

<p> This book focuses on the latest version of the language, popularly referred to as <mark>HTML5</mark>. There are two other versions you might encounter.

These are HTML 4.01, the last major versions of the language from December 1999 and a stricter version from 2000 called XHTML (Extensible Hypertext Markup Language) . XHTML is still very popular in some applications so important differences between it and <mark>HTML5</mark> will be called out in the text. </p>

12、<sub>元素

sup>元素的内容会以下角标形式显示。其显示位置比普通字符低半个字符的高度， 并比周围文本的字体小一些。

The EPR paradox₂ was devised by Einstein, Podolsky, and Rosen.

<sub>元素在创建脚注时特别有用。

13、<mark> 元素

<sup>元素的内容会以上角标形式显示。其显示位置比普通字符高出半个字符的高度， 并且经常比周围文本的字体小一些。

Written on the 31^st February.

<sup>元素对于在等式中添加指数值，以及在如日期等数字后添加St、nd、rd以及th 后缀时特别有用。但需要注意的是，在一些浏览器中，上角标可能造成其所在行与上一行 的行间距加大。

14、<sub> 元素

如果在描述有关计算机的话题时，希望读者输入一些文本，则可以使用<kbd>元素指 明需要输入的内容，如下例所示(chO2_egO8.html)：

<p>To force quit an application in Windowsr hold down the <kbd>ctrl</kbd>r <kbd>alt</kbd> and <kbd>delete</kbd> keys together.</p>

<kbd>元素的内容通常以等宽字体显示，这一点与<code>元素的内容很类似。图2-5 展示了浏览器中的效果。

The <kbd> Element for Keyboard Instructions

To force quit an application in Windows, hold down the Ctrl, alt and delece keys together

图2-5

15、<sup> 元素

<samp>元素用于指明来自程序、脚本等的示例输出。该元素与前述元素类似，都是用 于记录编程的相关内容，例如(ch02_eg07.html)：

<p>The following line uses the <samp> element to indicate the output from a script or program.</p>

<p><samp>This is the output from our test script.</samp></p>

这类内容倾向于以等宽字体显示，如图2-4中所示。

The <samp> Element for Sample Program Output

The fbllowing Hne uses the <samp> element to indicate the output from a scr^)t or program

This is the output from our cest script.

图2-4

16、<kbd> 元素

<var>元素是另一个为帮助程序员而添加的元素。通常将它与<pre>和<code>元素共同 使用，用来指明其内容是一个可由用户提供的变量(ch02_eg06.html)。

<p><code>console.log( n<var>user-name</var>n )</code></p>

<var>元素内容的典型形式是斜体。第10章"学习JavaScript"中将对变量的概念进行 介绍。

17、<samp> 元素

可以使用<figure>元素以及与其相关联的<figcaption>元素对图表或插图进行标记和声 明，以指明这些图表或插图可能在文档中被引用，但并非文档主体流的一部分。下例中使 用一小段<code>元素展示如何利用<figure>元素展现本书中的一段代码。

<figure id=n14n>

<figcaption> using the code element to represent an hl element and its content in HTML</figcaption>

<code><hl>This is a primary heading</hl></code>

</figure>

18、<var> 元素

如果页面中包含任何程序代码（这种情况在Web中并不罕见），那么下面将要介绍的4 个元素将在这方面非常有帮助。必须将任何希望在网页上显示的代码放置于<code>元素 内。通常<code>元素中的内容会以等宽字体显示，类似在大多数编程类书籍中所使用的方 式（包括本书在内）。

警告：在尝试于Web页面上显示代码时(例如，创建一个介绍网页编程的 页面)，如需要包含尖括号，你不能在内容中直接使用开闭尖括号，因为浏览 器会将其错误理解为HTML标记。正确的做法是使用<取代左尖括号(<), 使用>取代右尖括号(>)。这类替代字符集合被称作“转义码"(escape code). 附录F中提供了完整列表。

下例中展示了在<code>元素内展现HTML中<hl>元素及其内容的方式 (ch02_eg05 .html):

<p><code><;hl>;This is a primary heading</hl></code></p>

图2-3展示了浏览器中的显示效果。

The <code> Element For Adding Code to Your Web Pages

The following line appears inside a <code> element

<hl>Thxs is a primary headmg</hl>

图2-3

<code>元素还经常与<pre>元素一同使用，从而保持代码格式。

〈figure〉及 <figcaption> 元素

二：特殊字符的表示