高级文本格式设置

HTML 中还有许多其他元素用于格式化文本，我们在 HTML 文本基础知识文章中没有涉及到这些元素。本文中描述的元素不太为人所知，但了解它们仍然有用（无论如何，这仍然不是完整的列表）。在这里，你将了解如何标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。

¥There are many other elements in HTML for formatting text, which we didn't get to in the HTML text fundamentals article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.

先决条件：	熟悉基本的 HTML，如 HTML 入门中所述。HTML 文本格式，如 HTML 文本基础知识中所述。
目标：	了解如何使用鲜为人知的 HTML 元素来标记高级语义功能。

描述列表

¥Description lists

在 HTML 文本基础知识中，我们介绍了如何在 HTML 中进行标记基本列表，并且提到了你偶尔会遇到的第三种类型的列表 - 描述列表。这些列表的目的是标记一组项目及其相关描述，例如术语和定义或问题和答案。让我们看一下一组术语和定义的示例：

¥In HTML text fundamentals, we walked through how to mark up basic lists in HTML, and we mentioned the third type of list you'll occasionally come across — description lists. The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. Let's look at an example of a set of terms and definitions:

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>（描述术语）元素中，每个描述都包含在 <dd>（描述定义）元素中。

¥Description lists use a different wrapper than the other list types — <dl>; in addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element.

描述列表示例

¥Description list example

让我们完成示例的标记：

¥Let's finish marking up our example:

html

<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>

浏览器默认样式将显示描述列表，其中描述与术语略有缩进。

¥The browser default styles will display description lists with the descriptions indented somewhat from the terms.

一个术语的多个描述

¥Multiple descriptions for one term

请注意，允许单个术语具有多个描述，例如：

¥Note that it is permitted to have a single term with multiple descriptions, for example:

html

<dl>
  <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>
  <dd>
    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.)
  </dd>
</dl>

主动学习：标记一组定义

¥Active learning: Marking up a set of definitions

是时候尝试一下描述列表了；将元素添加到输入字段中的原始文本，以便其在输出字段中显示为描述列表。如果你愿意，你可以尝试使用自己的术语和描述。

¥It's time to try your hand at description lists; add elements to the raw text in the Input field so that it appears as a description list in the Output field. You could try using your own terms and descriptions if you like.

如果你犯了错误，你可以随时使用“重置”按钮进行重置。如果你确实遇到困难，请按“显示解决方案”按钮查看答案。

¥If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

html

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
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>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

css

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<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>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

语录

¥Quotations

HTML 还具有可用于标记报价的功能；你使用哪个元素取决于你是标记块引用还是内嵌引用。

¥HTML also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation.

块引用

¥Blockquotes

如果从其他地方引用了块级内容的一部分（无论是一个段落、多个段落、一个列表等），你应该将其封装在 <blockquote> 元素内以表示这一点，并包含一个指向该内容来源的 URL cite 属性内的引号。例如，以下标记取自 MDN <blockquote> 元素页面：

¥If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a <blockquote> element to signify this, and include a URL pointing to the source of the quote inside a cite attribute. For example, the following markup is taken from the MDN <blockquote> element page:

html

<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>

要将其转换为块引用，我们只需这样做：

¥To turn this into a block quote, we would just do this:

html

<p>Here is a blockquote:</p>
<blockquote
  cite="https://web.nodejs.cn/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>

浏览器默认样式会将其呈现为缩进段落，作为它是引用的指示符；引文上面的段落就是为了证明这一点。

¥Browser default styling will render this as an indented paragraph, as an indicator that it is a quote; the paragraph above the quotation is there to demonstrate that.

行内报价

¥Inline quotations

内联引用的工作方式完全相同，只是它们使用 <q> 元素。例如，以下标记包含来自 MDN <q> 页面的引用：

¥Inline quotations work in exactly the same way, except that they use the <q> element. For example, the below bit of markup contains a quotation from the MDN <q> page:

html

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

浏览器默认样式会将其呈现为放入引号中的普通文本以指示引用，如下所示：

¥Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:

引文

¥Citations

cite 属性的内容听起来很有用，但不幸的是浏览器、屏幕阅读器等并没有真正用它做太多事情。如果不使用 JavaScript 或 CSS 编写自己的解决方案，则无法让浏览器显示 cite 的内容。如果你想在页面上提供引文的来源，你需要通过链接或其他适当的方式在文本中提供它。

¥The content of the cite attribute sounds useful, but unfortunately browsers, screen readers, etc. don't really do much with it. There is no way to get the browser to display the contents of cite, without writing your own solution using JavaScript or CSS. If you want to make the source of the quotation available on the page you need to make it available in the text via a link or some other appropriate way.

有一个 <cite> 元素，但这意味着包含所引用资源的标题，例如书名。但是，你没有理由不能以某种方式将 <cite> 内的文本链接到引用源：

¥There is a <cite> element, but this is meant to contain the title of the resource being quoted, e.g. the name of the book. There is no reason, however, why you couldn't link the text inside <cite> to the quote source in some way:

html

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

<blockquote
  cite="https://web.nodejs.cn/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://web.nodejs.cn/en-US/docs/Web/HTML/Element/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
  — <a href="/en-US/docs/Web/HTML/Element/q"><cite>MDN q page</cite></a>.
</p>

默认情况下，引文采用斜体样式。

¥Citations are styled in italic font by default.

主动学习：谁说的？

¥Active learning: Who said that?

是时候展示另一个主动学习的例子了！在此示例中，我们希望你：

¥Time for another active learning example! In this example we'd like you to:

将中间段落变成块引用，其中包含 cite 属性。
将第三段中的 "消除消极自言自语的必要性" 转换为内联引号，并包含 cite 属性。
将每个来源的标题包含在 <cite> 标签中，并将每个标签转变为该来源的链接。

你需要的引用来源是：

¥The citation sources you need are:

http://www.brainyquote.com/quotes/authors/c/confucius.html 代表孔子名言
http://example.com/affirmationsforpositivethinking 为 "消除消极自言自语的必要性"。

如果你犯了错误，你可以随时使用“重置”按钮进行重置。如果你确实遇到困难，请按“显示解决方案”按钮查看答案。

¥If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

html

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 150px; width: 95%">
<p>Hello and welcome to my motivation page. As Confucius' quotes site says:</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>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

css

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius\' quotes site</cite></a> says:</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://example.com/affirmationsforpositivethinking">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://example.com/affirmationsforpositivethinking"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

缩写

¥Abbreviations

在网上浏览时你会遇到的另一个相当常见的元素是 <abbr> — 它用于环绕缩写词或首字母缩略词。包含其中任何一个时，请在首次使用时以纯文本形式提供该术语的完整扩展，以及用于标记缩写的 <abbr>。这向用户代理提供了关于如何宣布/显示内容的提示，同时告知所有用户缩写的含义。

¥Another fairly common element you'll meet when looking around the Web is <abbr> — this is used to wrap around an abbreviation or acronym. When including either, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means.

如果除了缩写之外提供扩展没有什么意义，并且缩写或首字母缩略词是相当缩短的术语，请提供术语的完整扩展作为 title 属性的值：

¥If providing the expansion in addition to the abbreviation makes little sense, and the abbreviation or acronym is a fairly shortened term, provide the full expansion of the term as the value of title attribute:

缩写示例

¥Abbreviation example

让我们看一个例子。

¥Let's look at an example.

html

<p>
  We use <abbr>HTML</abbr>, Hypertext Markup Language, 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:

注意：早期版本的 html 还包括对 <acronym> 元素的支持，但它已从 HTML 规范中删除，转而使用 <abbr> 来表示缩写词和首字母缩略词。不应使用 <acronym>。

¥Note: Earlier versions of html also included support for the <acronym> element, but it was removed from the HTML spec in favor of using <abbr> to represent both abbreviations and acronyms. <acronym> should not be used.

主动学习：标记缩写

¥Active learning: marking up an abbreviation

对于这个简单的主动学习作业，我们希望你标记一个缩写。你可以使用下面的示例，或将其替换为你自己的示例。

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

html

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 50px; width: 95%">
<p>NASA, the National Aeronautics and Space Administration, sure does some exciting work.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

css

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<p><abbr>NASA</abbr>, the National Aeronautics and Space Administration, sure does some exciting work.</p>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

标记联系方式

¥Marking up contact details

HTML 有一个用于标记联系方式详细信息的元素 — <address>。这包含你的联系方式，例如：

¥HTML has an element for marking up contact details — <address>. This wraps around your contact details, for example:

html

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

它还可以包括更复杂的标记和其他形式的联系信息，例如：

¥It could also include more complex markup, and other forms of contact information, for example:

html

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

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

请注意，如果链接页面包含联系信息，类似这样的内容也可以：

¥Note that something like this would also be OK, if the linked page contained the contact information:

html

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

注意：<address> 元素只能用于提供最近的 <article> 或 <body> 元素包含的文档的联系信息。正确的做法是在网站的页脚中使用它来包含整个网站的联系信息，或者在文章中使用它来包含作者的联系方式，但不要标记与该内容内容无关的地址列表。页。

¥Note: The <address> element should only be used to provide contact information for the document contained with the nearest <article> or <body> element. It would be correct to use it in the footer of a site to include the contact information of the entire site, or inside an article for the contact details of the author, but not to mark up a list of addresses unrelated to the content of that page.

上标和下标

¥Superscript and subscript

在标记日期、化学式和数学方程等项目时，有时需要使用上标和下标，以便它们具有正确的含义。<sup> 和 <sub> 元素处理这项工作。例如：

¥You will occasionally need to use superscript and subscript when marking up items like dates, chemical formulae, and mathematical equations so they have the correct meaning. The <sup> and <sub> elements handle this job. For example:

html

<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>

该代码的输出如下所示：

¥The output of this code looks like so:

代表计算机代码

¥Representing computer code

有许多元素可用于使用 HTML 标记计算机代码：

¥There are a number of elements available for marking up computer code using HTML:

<code>：用于标记通用计算机代码片段。
<pre>：为了保留空格（通常是代码块） - 如果你在文本中使用缩进或多余的空格，浏览器将忽略它，并且你将不会在渲染的页面上看到它。但是，如果你将文本封装在 <pre></pre> 标记中，则空白的呈现方式将与你在文本编辑器中看到的方式相同。
<var>：用于专门标记变量名称。
<kbd>：用于标记输入到计算机中的键盘（和其他类型）输入。
<samp>：用于标记计算机程序的输出。

让我们看一下这些元素的示例以及如何使用它们来表示计算机代码。如果你想查看完整文件，请查看 other-semantics.html 示例文件。你可以下载该文件并在浏览器中打开它来亲自查看，但这里是代码片段：

¥Let's look at examples of these elements and how they're used to represent computer code. If you want to see the full file, take a look at the other-semantics.html sample file. You can download the file and open it in your browser to see for yourself, but here is a snippet of the code:

html

<pre><code>const 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>

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

¥The above code will look like so:

标记时间和日期

¥Marking up times and dates

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

¥HTML also provides the <time> element for marking up times and dates in a machine-readable format. For example:

html

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

为什么这有用？人类记下日期的方式有很多种。上面的日期可以写成：

¥Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:

2016 年 1 月 20 日
2016 年 1 月 20 日
2016 年 1 月 20 日
20/01/16
01/20/16
下个月 20 号
2016 年 1 月 20 日
2016 年 1 月 20 日
等等

但计算机无法轻松识别这些不同的形式 - 如果你想自动抓取页面中所有事件的日期并将其插入日历中该怎么办？<time> 元素允许你为此目的附加明确的、机器可读的时间/日期。

¥But these different forms cannot be easily recognized by computers — what if you wanted to automatically grab the dates of all events in a page and insert them into a calendar? The <time> element allows you to attach an unambiguous, machine-readable time/date for this purpose.

上面的基本示例仅提供了一个简单的机器可读日期，但还有许多其他可能的选项，例如：

¥The basic example above just provides a simple machine readable date, but there are many other options that are possible, for example:

html

<!-- 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>

测试你的技能！

¥Test your skills!

你已读完本文，但你还记得最重要的信息吗？在继续之前，你可以找到一些进一步的测试来验证你是否已保留此信息 - 请参阅测试你的技能：高级 HTML 文本。

¥You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Advanced HTML text.

概括

¥Summary

这标志着我们对 HTML 文本语义的研究结束了。请记住，你在本课程中看到的并不是 HTML 文本元素的详尽列表 - 我们希望尝试涵盖要点，以及你将在野外看到的一些更常见的元素，或者至少可能会发现有趣的元素。要查找更多 HTML 元素，你可以查看我们的 HTML 元素参考（内联文本语义部分是一个很好的起点）。在下一篇文章中，我们将了解用于构建 HTML 文档的不同部分的 HTML 元素。

¥That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our HTML element reference (the Inline text semantics section would be a great place to start). In the next article, we'll look at the HTML elements you'd use to structure the different parts of an HTML document.