Web 高级文本格式

2018-08-31 14:19 更新

在HTML中有许多其他元素用于格式化文本，这是我们在HTML文本基础文章中没有涉及到的。在这篇文章中所描述的元素虽然不怎么常见，但了解它们还是很有用的（而这仍然不是一个完整的列表）。在这里你将了解标记引用，描述列表，计算机代码和其他相关文本，下标和上标，联系信息等。

前提：	熟悉基础HTML，参阅 HTML入门。了解HTML文本格式，参阅 HTML文本基础。
目的：	要学习如何使用不太常见的HTML元素来标记高级语义特性。

描述列表（Description lists）

在HTML文本基础章节中，我们详细介绍了如何在HTML中标记基本列表，但我们没有提到你偶尔会遇到的第三种类型的列表 - 描述列表。这些列表的目的是标记一组项目及其相关描述，例如术语和定义，或问题和答案。让我们看看下面这一组术语和定义的例子：

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information

描述列表使用的是与其他列表类型不同的闭合标签：<dl>；此外，每个描述列表的术语都封装在一个<dt>（description term）元素中，并且每个描述列表的描述都封装在一个<dd>（description description）元素中。让我们完成下面的标记例子：

<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd>
</dl>

浏览器的默认样式将显示描述列表，其中的描述部分（description description）与术语有些缩进。MDN也非常严格地遵循这一惯例，但也鼓励关于术语的其他更多的定义。

自言自语: 在戏剧中，一个角色对自己说话，表达自己内心的想法或感受，并将其传达给观众（而不是其他角色）。
独白: 在戏剧中，一个角色大声说出他们的想法，与观众和其他人物分享。
旁白: 在戏剧中，一个角色只与观众分享一个意见，以表达幽默或戏剧性的效果。这通常是一种感觉，想法或一些附加背景信息。

请注意，单个术语可以同时有多个描述，例如：

旁白: 在戏剧中，一个角色只与观众分享一个意见，以表达幽默或戏剧性的效果。这通常是一种感觉，想法或一些附加背景信息。; 在书面上，是指与当前主题相关的一部分内容，但不适合直接用于主线内容，因此会被呈现在附近（通常在一个方框内）。

主动学习：标记一组定义

现在是时候尝试一下描述列表了；请在Input字段的原始文本里添加相应的元素，使得它在Output字段是以描述列表的形式出现。如果你喜欢，你也可以使用你自己的术语和描述。

如果发生错误，你可以随时使用Reset按钮重置。如果你卡住了，请按Show solution按钮查看答案。

引用（Quotations）

HTML也有用于标记引用的特性；至于使用哪个元素标记，取决于你是标记块还是内联引用。

块引用

如果一个块级内容（一个段落，多个段落，一个列表等）是从其他地方被引用，你应该把它用<blockquote>元素封装起来表示，并且在cite属性里用URL来指向块引用的资源。例如，下面的例子就是引用MDN的<blockquote> 元素页面：

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

要把这些转换为块引用，我们要这样做：

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

浏览器默认会给块引用以缩进段落的样式，作为引用的一个指示符；MDN是这样做的，但也增加了额外的样式：

HTML<blockquote> 元素（或HTML块引用元素）表示包含的文本是扩展引用。

内联引用

内联引用的工作方式也是一样的，只是它们是使用<q>元素。例如，下面的标记位包含来自MDN<q> 页面的引用：

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

浏览器默认样式将会将其作为普通文本放入引号中以表示引用，如下：

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

引文

cite属性的内容听起来很有用，但不幸的是，对浏览器、屏幕阅读器等来说没有太多用处。还没有办法让浏览器显示 cite 的内容，而无需使用JavaScript或CSS来编写你自己的解决方案。如果你想要确保引用的资源在页面上是可用的，更好的方法是把<cite>元素放到引用元素旁边。这就意味着包含引用资源的名称——即引用的书的名称，或人的名字——但并不表示你不能以某种方式将<cite>中的文本链接到引用资源：

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

引文默认的字体样式为斜体。你可以在quotations.html中参看代码。

主动学习：是谁说的？

到了另一个主动学习的例子！在这个例子中我们想要你做：

把中间的段落变成块引用，它要包含cite属性。
把第三个段落的一部分变成内联引用，它要包含cite属性。
每一个引用都要包含<cite>元素。

可以在线寻找合适的引用资源。

如果发生错误，你可以使用Reset按钮重置。如果你卡住了，请按Show solution按钮查看答案。

缩写词

另一个你在web上看到的相当常见的元素是<abbr>——它常被用来封装一个缩写词或首字母缩略词，并且提供缩写的完整阐述（包含在title属性中）。让我们看看下面两个例子：

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

这些代码呈现出来的会是这样（当鼠标悬停在缩写词上时，将在工具提示中出现缩写词的完整阐述）：

We use HTML to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.

注意：还有另一个元素<acronym>，它基本与<abbr> 相同，专门用于首字母缩略词而不是缩写词。然而它已经被废弃 - 它在浏览器以及<abbr>中也不被支持，而且没有必要存在两个具有类似功能的元素。只需要使用<abbr>即可。

主动学习：标记缩写词

对于这个简单的主动学习任务，我们希望你简单地标记一个缩写词。你可以使用下面的示例，或着用你自己的替换它。

标记联系信息

HTML有个用于标记联系细信息的元素<address>。它只是简单的封装你的联系方式，例如：

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

但要记住的一点是，<address> 元素为了标记编写HTML文档的人的联系信息，而不是任何其他的地址。因此，如果这是Chris写的文档，上面的标记内容是可以的。注意，下面的内容也是可以的：

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

上标和下标

当你标记日期、化学公式和数学方程式时会偶尔使用上标和下标，以使它们具有正确的含义。<sup>和<sub>元素可以解决这样的问题。例如：

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

此代码的输出如下所示：

My birthday is on the 25^th of May 2001.

Caffeine's chemical formula is C₈H₁₀N₄O₂.

If x² is 9, x must equal 3 or -3.

表示计算机代码

HTML有许多的元素可以用来标记计算机代码：

<code>：用于标记计算机通用代码。
<pre>：用于标记固定宽度的文本块，其中保留空格（通常是代码块）。
<var>：用于标记具体变量名。
<kbd>：用于标记输入计算机的键盘（或其他类型）输入。
<samp>：用于标记计算机程序的输出。

让我们来看几个例子。你应该尝试运行一下（尝试运行一下other-semantics.html示例文件）：

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

上面的代码看起来像这样：

标记时间和日期

HTML提供<time>元素，用于以机器可识别格式标记时间和日期。例如：

<time datetime="2016-01-20">20 January 2016</time>

为什么这很有用？因为人类写下日期有许多不同的方式。上述日期可写为：

20 January 2016
20th January 2016
Jan 20 2016
20/06/16
06/20/16
The 20th of next month
20e Janvier 2016
2016年1月20日
And so on

但是这些不同的形式不容易被计算机轻易识别 - 如果你想自动获取页面中所有事件的日期，并将它们插入到日历中怎么办？<time>元素允许你附上清晰的、机器可识别的时间/日期来实现这种需求。

上述基本的例子仅仅提供了一个简单的可被机器识别的日期格式，但还有很多其他支持的格式，例如：

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

总结

到这里你就完成了HTML文本语义的学习。但要记住，你在本课程中学到的并不是HTML文本元素的详细列表 - 我们想要尽量覆盖主要的、常见的、或者至少是有趣的基本元素。如果你想找到更多的HTML元素，可以看我们的 HTML元素参考（从内嵌文本语义部分开始会是一个不错的选择）。在下一篇文章我们将会学习用来构造HTML文档不同部分的HTML元素。

以上内容是否对您有帮助：