Web 高级文本格式
在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><blockquote></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><blockquote></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><q></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><blockquote></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><q></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 25th of May 2001.
Caffeine's chemical formula is C8H10N4O2.
If x2 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><font></code> and <code><center></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元素。