path: root/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.html

---
title: 高阶文字排版
slug: learn/HTML/Introduction_to_HTML/Advanced_text_formatting
tags:
  - 上下标
  - 代码
  - 引文
  - 引用
  - 描述列表
  - 缩略语
translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/文件和网站结构", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">HTML中有许多其他元素可以用于格式化文本，我们没有在<a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字处理基础</a>中提到它们。本文中所描述的元素虽然少有人知，但仍然值得去学习（尽管仍然不是完整的列表）。在这里你将了解标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">预备知识：</th>
   <td>熟悉 HTML 基础（包含在 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a> 中）、HTML 文本格式（包含在 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字处理初步</a> 中）。</td>
  </tr>
  <tr>
   <th scope="row">目标：</th>
   <td>学习一些不常见的 HTML 元素标记来使用高级语义功能。</td>
  </tr>
 </tbody>
</table>

<h2 id="描述列表">描述列表</h2>

<p>在 HTML 基础部分，我们讨论了如何在 HTML 中<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#列表_Lists">标记基本的列表</a>，但是我们没有提到你偶尔会遇到的第三种类型的列表—<strong>描述列表</strong> (description list) <strong>。</strong>这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。让我们看一组术语和定义的示例：</p>

<pre class="notranslate">内心独白
戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
语言独白
戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
旁白
戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</pre>

<p>描述列表使用与其他列表类型不同的闭合标签— {{htmlelement("dl")}}; 此外，每一项都用 {{htmlelement("dt")}} (description term) 元素闭合。每个描述都用 {{htmlelement("dd")}} (description definition) 元素闭合。让我们来完成下面的标记例子:</p>

<pre class="brush: html notranslate">&lt;dl&gt;
  &lt;dt&gt;内心独白&lt;/dt&gt;
    &lt;dd&gt;戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。&lt;/dd&gt;
  &lt;dt&gt;语言独白&lt;/dt&gt;
    &lt;dd&gt;戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。&lt;/dd&gt;
  &lt;dt&gt;旁白&lt;/dt&gt;
    &lt;dd&gt;戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>浏览器的默认样式会在<strong>描述列表的描述部分</strong>（description definition）和<strong>描述术语</strong>（description terms）之间产生缩进。MDN非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义（but also embolden the terms for extra definition）。</p>

<p>下面是前述代码的显示结果：</p>

<dl>
 <dt>内心独白</dt>
 <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
 <dt>语言独白</dt>
 <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
 <dt>旁白</dt>
 <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

<p>请注意：一个术语 <code>&lt;dt&gt;</code> 可以同时有多个描述 <code>&lt;dd&gt;</code>，比如说：</p>

<dl>
 <dt>旁白</dt>
 <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
 <dd>写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其它位置（通常位于主线内容旁边一个文本框内）。</dd>
</dl>

<h3 id="主动学习_标记一组定义">主动学习: 标记一组定义</h3>

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

<p>如果你做错了，你可以随时点击【重置】按钮。如果实在进行不下去，可以点击【显示答案】。</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
      body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; }
      h2 { font-size: 16px; }
      code, textarea { font-family: Consolas, Menlo, monospace; }
      .output { min-height: 160px; }
      .input { min-height: 160px; width: 95%; }
      .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; }
      .controls { width: 96%; text-align: right; }
    &lt;/style&gt;

  &lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;实时输出&lt;/h2&gt;
    &lt;div class="output"&gt;&lt;/div&gt;

    &lt;h2&gt;可编辑代码&lt;/h2&gt;
    &lt;p class="a11y-label"&gt;按 ESC 退出编辑区域，按 Tab 可插入制表符 &lt;code&gt;'\t'&lt;/code&gt; &lt;/p&gt;
    &lt;textarea id="code" class="input"&gt;&lt;/textarea&gt;

    &lt;div class="controls"&gt;
      &lt;button id="btn-reset"&gt;重置&lt;/button&gt;
      &lt;button id="btn-solution"&gt;显示答案&lt;/button&gt;
    &lt;/div&gt;
    &lt;script&gt;
        const btnReset = document.getElementById('btn-reset');
        const btnSolution = document.getElementById('btn-solution');
        const blockOutput = document.querySelector('.output');
        const blockInput = document.querySelector('.input');
        const original =
`培根
整个世界的粘合剂。
鸡蛋
一块蛋糕的粘合剂。
咖啡
一种浅棕色的饮料。
可以在清晨带来活力。`;
        const answer =
`&lt;dl&gt;
  &lt;dt&gt;培根&lt;/dt&gt;
    &lt;dd&gt;整个世界的粘合剂。&lt;/dd&gt;
  &lt;dt&gt;鸡蛋&lt;/dt&gt;
    &lt;dd&gt;一块蛋糕的粘合剂。&lt;/dd&gt;
  &lt;dt&gt;咖啡&lt;/dt&gt;
    &lt;dd&gt;一种浅棕色的饮料。&lt;/dd&gt;
    &lt;dd&gt;可以在清晨带来活力。&lt;/dd&gt;
&lt;/dl&gt;`;
        let userEntry = "";

        init();
        btnReset.addEventListener('click', init);

        btnSolution.addEventListener('click', () =&gt; {
          if (btnSolution.textContent === '显示答案') {
            blockInput.value =
            blockOutput.innerHTML = answer;
            btnSolution.textContent = '隐藏答案';
          } else {
            blockInput.value =
            blockOutput.innerHTML = userEntry;
            btnSolution.textContent = '显示答案';
          }
        });

        blockInput.addEventListener('keydown', (e) =&gt; {
          switch (e.key) {
          case 'Tab':
            e.preventDefault();
            insertAtCursor('\t');
            break;
          case "Escape":
            blockInput.blur();
            break;
          }
        });

        blockInput.addEventListener('keyup', () =&gt; {
          userEntry = blockInput.value;
          blockOutput.innerHTML = blockInput.value;
          if (btnSolution.textContent === '隐藏答案') {
            btnSolution.textContent = '显示答案';
          }
        });

        function init() {
          userEntry =
          blockOutput.innerHTML =
          blockInput.value = original;
          btnSolution.textContent = '显示答案';
        }

        function insertAtCursor(text) {
          const scrollPos = blockInput.scrollTop;
          const cursorPos = blockInput.selectionStart;

          const front = blockInput.value.substring(0, cursorPos);
          const back = blockInput.value.substring(
            blockInput.selectionEnd, blockInput.value.length);

          blockInput.value = front + text + back;
          blockInput.selectionStart =
          blockInput.selectionEnd = cursorPos + text.length;
          blockInput.focus();
          blockInput.scrollTop = scrollPos;
        }
      &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="引用">引用</h2>

<p>HTML也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。</p>

<h3 id="块引用">块引用</h3>

<p>如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用{{htmlelement("blockquote")}}元素包裹起来表示，并且在{{htmlattrxref("cite","blockquote")}}属性里用URL来指向引用的资源。例如，下面的例子就是引用的MDN的<code>&lt;blockquote&gt;</code>元素页面：</p>

<pre class="brush: html notranslate">&lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;</pre>

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

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

<p>浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN是这样做的，但是也增加了额外的样式：</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>

<h3 id="行内引用">行内引用</h3>

<p>行内元素用同样的方式工作，除了使用{{htmlelement("q")}}元素。例如，下面的标记包含了从MDN<code>&lt;q&gt;</code>页面的引用：</p>

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

<p>浏览器默认将其作为普通文本放入引号内表示引用，就像下面：</p>

<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>(&lt;q&gt;元素旨在用于不需要分段的短引用)</p>

<h3 id="引文">引文</h3>

<p>{{htmlattrxref("cite","blockquote")}}属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示<code>cite</code>的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为{{htmlelement("cite")}}元素附上链接：</p>

<pre class="brush: html notranslate">&lt;p&gt;According to the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
&lt;cite&gt;MDN blockquote page&lt;/cite&gt;&lt;/a&gt;:
&lt;/p&gt;

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

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

<p>引文默认的字体样式为斜体。你可以在<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a>中参看代码。</p>

<h3 id="主动学习：是谁说的？">主动学习：是谁说的？</h3>

<p>到了主动学习的时间！在这个例子中我们想要你：</p>

<ol>
 <li>把中间的段落变成块引用，它要包含<code>cite</code>属性</li>
 <li>把第三个段落的一部分变成行内引用，它要包含<code>cite</code>属性</li>
 <li>每一个引用都要包含<code>&lt;cite&gt;</code>元素</li>
</ol>

<p>你需要的引用源：</p>

<ul>
 <li>http://www.brainyquote.com/quotes/authors/c/confucius.html 对应 "孔子曰"。</li>
 <li>http://www.affirmationsforpositivethinking.com/ 对应 "不要说泄气的话"。</li>
</ul>

<p>如果你做错了，你可以随时点击【重置】按钮。如果实在进行不下去，可以点击【显示答案】。</p>

<div class="hidden">
<h6 id="Playable_code_2">Playable code 2</h6>

<pre class="brush: html notranslate"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
      body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; }
      h2 { font-size: 16px; }
      code, textarea { font-family: Consolas, Menlo, monospace; }
      .output { min-height: 160px; }
      .input { min-height: 160px; width: 95%; }
      .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; }
      .controls { width: 96%; text-align: right; }
    &lt;/style&gt;

  &lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;实时输出&lt;/h2&gt;
    &lt;div class="output"&gt;&lt;/div&gt;

    &lt;h2&gt;可编辑代码&lt;/h2&gt;
    &lt;p class="a11y-label"&gt;按 ESC 退出编辑区域，按 Tab 可插入制表符 &lt;code&gt;'\t'&lt;/code&gt; &lt;/p&gt;
    &lt;textarea id="code" class="input"&gt;&lt;/textarea&gt;

    &lt;div class="controls"&gt;
      &lt;button id="btn-reset"&gt;重置&lt;/button&gt;
      &lt;button id="btn-solution"&gt;显示答案&lt;/button&gt;
    &lt;/div&gt;
    &lt;script&gt;
        const btnReset = document.getElementById('btn-reset');
        const btnSolution = document.getElementById('btn-solution');
        const blockOutput = document.querySelector('.output');
        const blockInput = document.querySelector('.input');
        const original =
`&lt;p&gt;你好！欢迎访问我的激励网页！孔子曰：&lt;/p&gt;
&lt;p&gt;譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。&lt;/p&gt;
&lt;p&gt;要保持乐观，不要说泄气的话。（源自 Affirmations for Positive Thinking。）&lt;/p&gt;`;
        const answer =
`&lt;p&gt;你好！欢迎访问我的激励网页！&lt;a href="</code>http://www.brainyquote.com/quotes/authors/c/confucius.html<code>"&gt;&lt;cite&gt;孔子&lt;/cite&gt;&lt;/a&gt;曰：&lt;/p&gt;
&lt;blockquote cite="https://zh.wikipedia.org/zh-hans/孔子"&gt;
  &lt;p&gt;譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;要保持乐观，&lt;q cite="http://www.affirmationsforpositivethinking.com/"&gt;不要说泄气的话&lt;/q&gt;。（源自 &lt;a href="http://www.affirmationsforpositivethinking.com/"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;。）&lt;/p&gt;`;
        let userEntry = "";

        init();
        btnReset.addEventListener('click', init);

        btnSolution.addEventListener('click', () =&gt; {
          if (btnSolution.textContent === '显示答案') {
            blockInput.value =
            blockOutput.innerHTML = answer;
            btnSolution.textContent = '隐藏答案';
          } else {
            blockInput.value =
            blockOutput.innerHTML = userEntry;
            btnSolution.textContent = '显示答案';
          }
        });

        blockInput.addEventListener('keydown', (e) =&gt; {
          switch (e.key) {
          case 'Tab':
            e.preventDefault();
            insertAtCursor('\t');
            break;
          case "Escape":
            blockInput.blur();
            break;
          }
        });

        blockInput.addEventListener('keyup', () =&gt; {
          userEntry = blockInput.value;
          blockOutput.innerHTML = blockInput.value;
          if (btnSolution.textContent === '隐藏答案') {
            btnSolution.textContent = '显示答案';
          }
        });

        function init() {
          userEntry =
          blockOutput.innerHTML =
          blockInput.value = original;
          btnSolution.textContent = '显示答案';
        }

        function insertAtCursor(text) {
          const scrollPos = blockInput.scrollTop;
          const cursorPos = blockInput.selectionStart;

          const front = blockInput.value.substring(0, cursorPos);
          const back = blockInput.value.substring(
            blockInput.selectionEnd, blockInput.value.length);

          blockInput.value = front + text + back;
          blockInput.selectionStart =
          blockInput.selectionEnd = cursorPos + text.length;
          blockInput.focus();
          blockInput.scrollTop = scrollPos;
        }
      &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="缩略语">缩略语</h2>

<p>另一个你在web上看到的相当常见的元素是{{htmlelement("abbr")}}——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在{{htmlattrxref("title")}}属性中）。让我们看看下面两个例子：</p>

<pre class="brush: html notranslate">&lt;p&gt;我们使用 &lt;abbr title="超文本标记语言（Hyper text Markup Language）"&gt;HTML&lt;/abbr&gt; 来组织网页文档。&lt;/p&gt;

&lt;p&gt;第 33 届 &lt;abbr title="夏季奥林匹克运动会"&gt;奥运会&lt;/abbr&gt; 将于 2024 年 8 月在法国巴黎举行。&lt;/p&gt;
</pre>

<p>这些代码的显示效果如下（当光标移动到项目上时会出现提示）：</p>

<p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr> 来组织网页文档。</p>

<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

<div class="note">
<p><strong>Note</strong>: 还有另一个元素&lt;acronym&gt;，它基本上与&lt;abbr&gt;相同，专门用于首字母缩略词而不是缩略语。 然而，这已经被废弃了 - 它在浏览器的支持中不如&lt;abbr&gt;，并且具有类似的功能，所以没有意义。 只需使用&lt;abbr&gt;。</p>
</div>

<h3 id="主动学习：标记一个缩略语">主动学习：标记一个缩略语</h3>

<p>在这个简单的主动学习任务中，我们希望你简单地标记一个缩写。你可以使用下面的示例，或者用自己的示例来替换。</p>

<div class="hidden">
<h6 id="Playable_code_3">Playable code 3</h6>

<pre class="brush: html notranslate"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
      body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; }
      h2 { font-size: 16px; }
      code, textarea { font-family: Consolas, Menlo, monospace; }
      .output { min-height: 100px; }
      .input { min-height: 100px; width: 95%; }
      .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; }
      .controls { width: 96%; text-align: right; }
    &lt;/style&gt;

  &lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;实时输出&lt;/h2&gt;
    &lt;div class="output"&gt;&lt;/div&gt;

    &lt;h2&gt;可编辑代码&lt;/h2&gt;
    &lt;p class="a11y-label"&gt;按 ESC 退出编辑区域，按 Tab 可插入制表符 &lt;code&gt;'\t'&lt;/code&gt; &lt;/p&gt;
    &lt;textarea id="code" class="input"&gt;&lt;/textarea&gt;

    &lt;div class="controls"&gt;
      &lt;button id="btn-reset"&gt;重置&lt;/button&gt;
      &lt;button id="btn-solution"&gt;显示答案&lt;/button&gt;
    &lt;/div&gt;
    &lt;script&gt;
        const btnReset = document.getElementById('btn-reset');
        const btnSolution = document.getElementById('btn-solution');
        const blockOutput = document.querySelector('.output');
        const blockInput = document.querySelector('.input');
        const original = '&lt;p&gt;NASA 做了一些动人心弦的事情。&lt;/p&gt;';
        const answer = '&lt;p&gt;&lt;abbr title="美国国家航空航天局（National Aeronautics and Space Administration）"&gt;NASA&lt;/abbr&gt; 做了一些动人心弦的事情。&lt;/p&gt;';
        let userEntry = "";

        init();
        btnReset.addEventListener('click', init);

        btnSolution.addEventListener('click', () =&gt; {
          if (btnSolution.textContent === '显示答案') {
            blockInput.value =
            blockOutput.innerHTML = answer;
            btnSolution.textContent = '隐藏答案';
          } else {
            blockInput.value =
            blockOutput.innerHTML = userEntry;
            btnSolution.textContent = '显示答案';
          }
        });

        blockInput.addEventListener('keydown', (e) =&gt; {
          switch (e.key) {
          case 'Tab':
            e.preventDefault();
            insertAtCursor('\t');
            break;
          case "Escape":
            blockInput.blur();
            break;
          }
        });

        blockInput.addEventListener('keyup', () =&gt; {
          userEntry = blockInput.value;
          blockOutput.innerHTML = blockInput.value;
          if (btnSolution.textContent === '隐藏答案') {
            btnSolution.textContent = '显示答案';
          }
        });

        function init() {
          userEntry =
          blockOutput.innerHTML =
          blockInput.value = original;
          btnSolution.textContent = '显示答案';
        }

        function insertAtCursor(text) {
          const scrollPos = blockInput.scrollTop;
          const cursorPos = blockInput.selectionStart;

          const front = blockInput.value.substring(0, cursorPos);
          const back = blockInput.value.substring(
            blockInput.selectionEnd, blockInput.value.length);

          blockInput.value = front + text + back;
          blockInput.selectionStart =
          blockInput.selectionEnd = cursorPos + text.length;
          blockInput.focus();
          blockInput.scrollTop = scrollPos;
        }
      &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="标记联系方式">标记联系方式</h2>

<p>HTML有个用于标记联系方式的元素——{{htmlelement("address")}}。它仅仅包含你的联系方式，例如：</p>

<pre class="brush: html notranslate">&lt;address&gt;
  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
&lt;/address&gt;</pre>

<p>但要记住的一点是，<code>&lt;address&gt;</code>元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容。因此，如果这是Chris写的文档，上面的内容将会很好。注意，下面的内容也是可以的：</p>

<pre class="brush: html notranslate">&lt;address&gt;
  &lt;p&gt;Page written by &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
&lt;/address&gt;</pre>

<h2 id="上标和下标">上标和下标</h2>

<p>当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 {{htmlelement("sup")}} 和{{htmlelement("sub")}}元素可以解决这样的问题。例如：</p>

<pre class="brush: html notranslate">&lt;p&gt;咖啡因的化学方程式是 C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;。&lt;/p&gt;
&lt;p&gt;如果 x&lt;sup&gt;2&lt;/sup&gt; 的值为 9，那么 x 的值必为 3 或 -3。&lt;/p&gt;
</pre>

<p>这些代码输出的结果是：</p>

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>

<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

<h2 id="展示计算机代码">展示计算机代码</h2>

<p>有大量的HTML元素可以来标记计算机代码：</p>

<ul>
 <li>{{htmlelement("code")}}: 用于标记计算机通用代码。</li>
 <li>{{htmlelement("pre")}}: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<code>&lt;pre&gt;&lt;/pre&gt;</code>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。</li>
 <li>{{htmlelement("var")}}: 用于标记具体变量名。</li>
 <li>{{htmlelement("kbd")}}: 用于标记输入电脑的键盘（或其他类型）输入。</li>
 <li>{{htmlelement("samp")}}: 用于标记计算机程序的输出。</li>
</ul>

<p>让我们看看一些例子。你应该尝试运行一下（尝试运行一下<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>样例文件的拷贝）：</p>

<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;请不要使用 &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; 、 &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt; 等表象元素。&lt;/p&gt;

&lt;p&gt;在上述的 JavaScript 示例中，&lt;var&gt;para&lt;/var&gt; 表示一个段落元素。&lt;/p&gt;


&lt;p&gt;按 &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt; 选择全部内容。&lt;/p&gt;

&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
&lt;samp&gt;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&lt;/samp&gt;&lt;/pre&gt;
</pre>

<p>上面的代码显示效果如下：</p>

<p>{{ EmbedLiveSample('展示计算机代码','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="标记时间和日期">标记时间和日期</h2>

<p>HTML 还支持将时间和日期标记为可供机器识别的格式的 {{htmlelement("time")}} 元素。例如：</p>

<pre class="brush: html notranslate">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;2016年1月20日&lt;/<span class="pl-ent">time</span>&gt;</pre>

<p>为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被写成：</p>

<ul>
 <li>20 January 2016</li>
 <li>20th January 2016</li>
 <li>Jan 20 2016</li>
 <li>20/06/16</li>
 <li>06/20/16</li>
 <li>The 20th of next month</li>
 <li><span lang="fr">20e Janvier 2016</span></li>
 <li><span lang="ja">2016年1月20日</span></li>
 <li><span lang="ja">And so on</span></li>
</ul>

<p>但是这些不同的格式不容易被电脑识别 — 假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，{{htmlelement("time")}} 元素允许你附上清晰的、可被机器识别的 时间/日期来实现这种需求。</p>

<p>上述基本的例子仅仅提供了一种简单的可被机器识别的日期格式，这里还有许多其他支持的格式，例如：</p>

<pre class="brush: html notranslate">&lt;!-- 标准简单日期 --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- 只包含年份和月份--&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>&gt;January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- 只包含月份和日期 --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 January&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- 只包含时间，小时和分钟数 --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19:30&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- 还可包含秒和毫秒 --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19:30:01.856&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- 日期和时间 --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>&gt;7.30pm, 20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- 含有时区偏移值的日期时间 --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;7.30pm, 20 January 2016 is 8.30pm in France&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- 调用特定的周 --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>&gt;The fourth week of 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>

<h2 id="总结">总结</h2>

<p>到这里你就完成了 HTML 语义文本元素的学习。但要记住，你在本课程中学到的并不是 HTML 文本元素的详细列表 — 我们想要尽量覆盖主要的、通用的、常见的，或者至少是有趣的部分。如果你想找到更多的 HTML 元素，可以看一看我们的<a href="/zh-CN/docs/Web/HTML/Element">HTML 元素参考</a>（从 <a href="/zh-CN/docs/Web/HTML/Element#内联文本语义">内联文本语义</a>部分开始会是一个好的选择） 。在下一篇文章中我们将会学习用来组织 HTML 文档不同部分的 HTML 元素。</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/文件和网站结构", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="本章目录">本章目录</h2>

<ul>
 <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a></li>
 <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">“头”里有什么？HTML 元信息</a></li>
 <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字处理初步</a></li>
 <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a></li>
 <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高级文字格式</a></li>
 <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/文件和网站结构">文档和站点结构</a></li>
 <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 调试</a></li>
 <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">课程测验：为信件排版</a></li>
 <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">课程测验：构建内容丰富的网页</a></li>
</ul>