高阶文本

相关内容参考：高阶文字排版 - 学习 Web 开发 | MDN (mozilla.org) (opens new window)

引用标签

1. 块引用 <blockquote>

<blockquote cite="https://github.com/yk2012">
    块引用，这是一个块级别的引用，前面有缩进，还很大
</blockquote>

2. 行内引用 <q>

<q cite="https://github.com/yk2012">这是一个行内引用，有个双引号</q>

3. 引文 <cite>

<a href="https://github.com/yk2012"><cite>这是一个行内引用，字体变倾斜了</cite></a>

缩略语标签<abbr>

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

效果：

我们使用 HTML 来组织网页文档。

标记联系方式<address>

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

上标和下标

• 上标<sup></sup>
• 下标<sub></sub>

代码

• <code>: 用于标记计算机通用代码。

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

• <pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。

<pre><code>const para = document.querySelector('p');
para.onclick = function() {
    alert('噢，噢，噢，别点我了。');
}</code></pre>

• <var>: 用于标记具体变量名。

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>

• <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。

<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

• <samp>: 用于标记计算机程序的输出。

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

标记时间和日期 <time>

<time datetime="2016-01-20">2016年1月20日</time>