6、HTML入门——文本格式进阶

最新推荐文章于 2026-08-21 06:30:00 发布

原创最新推荐文章于 2026-08-21 06:30:00 发布 · 181 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

HTML

1. 引用

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

1.1 块引用

如果其他地方引用一个块级内容，比如段落、列表等，你应该把它用<blockquote>元素包裹起来，并且在cite属性里用URL来指向引用的资源。

<p>这是块引用：</p>
<blockquote
	cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
	<p>
		<strong>HTML <code>&lt;blockquote&gt;</code> 元素</strong>(或<em>HTML 块级引用元素</em>)表示所附文本为扩展引用。
	</p>
</blockquote>

在这里插入图片描述
浏览器的默认样式会将其渲染为缩进的段落，以表明这是一个引用。

1.2 行内引用

除了使用<q>元素以外，行内元素用同样的方式工作。

<p>
	引用元素 <code>&lt;q&gt;</code> 是<q
		cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q">用于不需要段落分隔的短引用。</q>
</p>

在这里插入图片描述
浏览器默认将其作为普通文本放入引号内表示引用。

1.3 引文

cite属性的内容听起来很有用，但不幸的是，浏览器、屏幕阅读器并没有充分利用它。如果不使用JavaScript或CSS编写自己的解决方案，就没有办法让浏览器显示cite的内容。如果你想在页面上提供引文的来源，你需要在文本中通过链接或其他适当的方式来提供它。
<cite>元素是为了包含所引用资源的标题。

<p>
  根据<a href="/zh-CN/docs/Web/HTML/Element/blockquote"><cite>MDN 块引用页</cite></a>：
</p>

<blockquote
  cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
  <p>
    <strong>HTML <code>&lt;blockquote&gt;</code> 元素</strong>（或<em>HTML 块级引用元素</em>）表示所附文本为扩展引用。
  </p>
</blockquote>

<p>
  引用元素 <code>&lt;q&gt;</code> 是<q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q">用于不需要段落分隔的短引用。</q>——<a href="/zh-CN/docs/Web/HTML/Element/q"> <cite>MDN q 页面</cite></a>
</p>

在这里插入图片描述
引文默认的字体样式为斜体。

2. 缩略语

另一个你在Web上看到的相当常见的元素是<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释。当包括这两种情况时，在第一次使用时提供纯文本的完整扩展，同时用<abbr>来标记缩写。这为用户代理提供了如何公布/显示内容的提示，同时告知用户该缩写的含义。
如果为缩写提供扩展信息的意义不大，而且该缩写或首字母缩写是一个相当简短的术语，则应提供该术语的完整扩展，作为title属性的值。

<p>我们使用 <abbr>HTML</abbr> 超文本标记语言来组织网页文档。</p>

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

在这里插入图片描述

3. 标记联系方式

HTML有个用于标记联系方式的元素——<address>。它仅仅包含联系方式。

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

其中可以包含更复杂的标记和其他形式的联系方式：

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

如果链接的页面包含了联系的信息，像这样也是可以的：

<address>
	由 <a href="../authors/chris-mills/">Chris Mills</a>编写的页面
</address>

在这里插入图片描述

4. 上标和下标

当你使用日期、化学方程式和数学方程式会偶尔使用上标和下标，以确保它们的正确含义。<sup>和<sub>元素可以解决这样的问题：

<p>我的生日是在 2021 年 5 月 25 日（译者注：英文原文为 25<sup>th</sup>）</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>

在这里插入图片描述

5. 展示计算机代码

有大量的HTML元素可以来标记计算机代码：
<code>：用于标记计算机通用代码。
<pre>：用于保留空白字符(通常用于代码块)——如果文本中使用了缩进或多余的空白，浏览器将会忽略它，你将不会在渲染的页面上看到它。但是如果你将文本包裹在<pre></pre>中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>：用于标记具体变量名。
<kbd>：用于标记输入电脑的键盘或其他类型的输入。
<samp>：用于标记计算机程序的输出。

<pre><code>const para = document.querySelector('p');

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

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

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

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

在这里插入图片描述

6. 标记时间和日期

HTML还支持将时间和日期标记为可供机器识别的格式的<time>元素：

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

在这里插入图片描述
为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被不同的格式。但是这些不同的格式不容易被电脑识别——假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，<time>元素允许你附上清晰的、可被机器识别的时间或日期来实现这种需求。

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00"
  >7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>