Advanced text formatting

在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 additional 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 additional background information.</dd>
</dl>

 浏览器的默认样式会将描述列表的描述部分（description description）渲染成和描述术语（description terms）之间有一些缩进。MDN也将非常严格地遵循这一惯例，同时也鼓励关于术语的其他更多的定义（but also embolden the terms for extra definition）。

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.

请注意：单个术语（single term ）可以同时有多个描述（multiple descriptions），比如说：

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 additional background information.

In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)

主动学习: 标记一组定义（definitions）

现在是时候尝试一下描述列表了; 在输入区域的原始文本里添加相应的元素，使得它在输出区域是以描述列表的形式出现。如果你喜欢，你也可以使用你自己的术语（description terms）和描述（description description）。

如果在这其中犯了错误，你可以使用复位（Reset button）按钮恢复，如果你实在不知道怎么做，你可以按下显示解决方案按钮（Show solution button）看答案。

<h2>Input</h2>
<textarea id="code" class="input">Bacon
The glue that binds the world together.
Eggs
The glue that binds the cake together.
Coffee
The drink that gets the world running in the morning.
A light brown color.</textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}
.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}
button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
function drawOutput() {
  output.innerHTML = textarea.value;
}
reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});
solution.addEventListener("click", function() {
textarea.value = '<dl>\n  <dt>Bacon</dt>\n  <dd>The glue that binds the world together.</dd>\n  <dt>Eggs</dt>\n  <dd>The glue that binds the cake together.</dd>\n  <dt>Coffee</dt>\n  <dd>The drink that gets the world running in the morning.</dd>\n  <dd>A light brown color.</dd>\n</dl>';
  drawOutput();
});
textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

引用（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是这样做的，但是也增加了额外的样式：

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

行内引用

行内元素用同样的方式工作，除了使用<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属性的内容顶听起来很有用，但不幸的是，浏览器、屏幕阅读器等等不会真的关心它，没有方法让浏览器显示city的内容，你不能使用JavaScript或CSS来解决你的问题。如果你想要确保引用的资源在页面上是可用的，更好的方法是把<cite>元素放到引用元素旁边。这就意味着包含引用资源的名称——即引用的书的名字，或人的名字——但并不表示你不可以用同样的方式把要链接的文本放到<city>元素中：

<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中参看代码。

主动学习：谁说了它？

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

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

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

如果你做错了，你总可以使用Reset按钮重置。如果你真的不会了，按下Show solution按钮来看答案。

<h2>Input</h2>
<textarea id="code" class="input"><p>Hello and welcome to my motivation page. As Confucius once said:</p>
<p>It does not matter how slowly you go as long as you do not stop.</p>
<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk
(as mentioned in Affirmations for Positive Thinking.)</p></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}
.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}
button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
function drawOutput() {
  output.innerHTML = textarea.value;
}
reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});
solution.addEventListener("click", function() {
textarea.value = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n  <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
  drawOutput();
});
textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

缩略语

另一个你在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>

These will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over):

这些代码看起来就像下面（当光标移动到项目上的时提示会出现）：

We use HTML to structure our web documents.

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

Active learning: marking up an abbreviation

For this simple active learning assignment, we'd like you to simply mark up an abbreviation. You can use our sample below, or replace it with one of your own. 

<h2>Input</h2>
<textarea id="code" class="input"><p>NASA sure does some exciting work.</p></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}
.input, .output {
  width: 90%;
  height: 5em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}
button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
function drawOutput() {
  output.innerHTML = textarea.value;
}
reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});
solution.addEventListener("click", function() {
textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>';
  drawOutput();
});
textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

标记联系地址

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 element reference (从 Inline text semantics 部分开始会是一个好的选择) 。在下一篇文章中我们将会学习用来组织 HTML 文档不同部分的 HTML 元素。