文本格式进阶
HTML 中有许多其他元素可以用于格式化文本,我们没有在 HTML 文字处理基础中提到它们。本文中所描述的元素虽然少有人知,但仍然值得去学习(尽管仍然不是完整的列表)。在这里你将了解标记引用、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。
前提: | 熟悉 HTML 基础(包含在 开始学习 HTML 中)、HTML 文本格式(包含在 HTML 文字处理基础中)。 |
---|---|
目标: | 学习一些不常见的 HTML 元素标记来使用高级语义功能。 |
描述列表
在 HTML 文本处理基础中,我们讨论了如何在 HTML 中标记基本的列表,并且提到了你偶尔会遇到的第三种列表类型——描述列表(description list)。这种列表的目的是标记一组项目及其相关描述,例如术语和定义,或者是问题和答案等。让我们看一组术语和定义的示例:
内心独白 戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。 语言独白 戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。 旁白 戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。
描述列表使用与其他列表类型不同的闭合标签——<dl>
;此外,每一项都用 <dt>
(description term)元素闭合。每个描述都用 <dd>
(description definition)元素闭合。
描述列表示例
让我们来完成下面的标记例子:
<dl>
<dt>内心独白</dt>
<dd>
戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。
</dd>
<dt>语言独白</dt>
<dd>
戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。
</dd>
<dt>旁白</dt>
<dd>
戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。
</dd>
</dl>
浏览器的默认样式会在描述列表的术语及其定义之间产生缩进。
单个术语的多个描述
请注意:一个术语可以同时有多个描述,比如说:
<dl>
<dt>旁白</dt>
<dd>
戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。
</dd>
<dd>
写作中,指与当前主题相关的一段内容,通常不适于直接置于内容主线中,因此置于附近的其他位置(通常位于主线内容旁边一个文本框内)。
</dd>
</dl>
主动学习:标记一组定义
现在是时候尝试一下描述列表了。在输入区域的原始文本里添加相应的元素,使得它在输出区域是以描述列表的形式出现。如果你喜欢,你也可以使用你自己的描述术语和描述。
如果你做错了,你可以随时点击重置按钮。如果实在进行不下去,可以点击显示答案。
引用
HTML 也有用于标记引用的特性,至于使用哪个元素标记,取决于你引用的是一块还是一行。
块引用
如果一个块级内容(一个段落、多个段落、一个列表等)从其他地方被引用,你应该把它用 <blockquote>
元素包裹起来表示,并且在 cite
属性里用 URL 来指向引用的资源。例如,下面的示例代码就是引用的 MDN 的 <blockquote>
元素页面:
<p>
The <strong>HTML <code><blockquote></code> Element</strong> (or
<em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
extended quotation.
</p>
要把这些转换为块引用,我们要这样做:
<p>Here is a blockquote:</p>
<blockquote
cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
<p>
The <strong>HTML <code><blockquote></code> Element</strong> (or
<em>HTML Block Quotation Element</em>) indicates that the enclosed text is
an extended quotation.
</p>
</blockquote>
浏览器的默认样式会将其呈现为缩进的段落,作为引用的指示;引号上面的段落是为了证明这一点。
行内引用
除了使用 <q>
元素以外,行内元素用同样的方式工作。例如,下面的标记包含了从 MDN <q>
页面的引用:
<p>
The quote element — <code><q></code> — is
<q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
>intended for short quotations that don't require paragraph breaks.</q
>
</p>
浏览器默认将其作为普通文本放入引号内表示引用,就像下面:
引文
cite
属性的内容看起来很有用,但不幸的是,浏览器、屏幕阅读器并没有充分利用它。如果不使用 JavaScript 或 CSS 编写自己的解决方案,就没有办法让浏览器显示 cite
的内容。如果你想在页面上提供引文的来源,你需要在文本中通过链接或其他适当的方式来提供它。
这里有 <cite>
元素,但它是为了包含所引用资源的标题(如书名)。然而,你没有理由不把 <cite>
内的文字以某种方式链接到引用源。
<p>
According to the
<a href="/zh-CN/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a
>:
</p>
<blockquote
cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
<p>
The <strong>HTML <code><blockquote></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><q></code> — is
<q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
>intended for short quotations that don't require paragraph breaks.</q
>
— <a href="/zh-CN/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a
>.
</p>
引文默认的字体样式为斜体。
主动学习:是谁说的?
到了主动学习的时间!在这个例子中我们想要你:
- 把中间的段落变成块引用,它要包含
cite
属性。 - 把第三个段落的一部分变成行内引用,它要包含
cite
属性。 - 将每一个引用源的标题包裹在
<cite>
标签中,并将它们链接到引用源中。
你需要的引用源:
http://www.brainyquote.com/quotes/authors/c/confucius.html
对应“孔子曰”。http://example.com/affirmationsforpositivethinking
对应“不要说泄气的话”。
如果你做错了,你可以随时点击重置按钮。如果实在进行不下去,可以点击显示答案。
缩略语
缩略语示例
让我们一起看一个示例。
<p>
我们使用
<abbr title="超文本标记语言(Hyper text Markup Language)">HTML</abbr>
来组织网页文档。
</p>
<p>
第 33 届<abbr title="夏季奥林匹克运动会">奥运会</abbr>将于 2024 年 8
月在法国巴黎举行。
</p>
这些代码的显示效果如下:
备注:在之前版本的 html 中还包含对另一个元素 <acronym>
的支持,但是它已经从 HTML spec 中移除,因为可以只使用 <abbr>
元素代表缩略语。不应再使用 <acronym>
。
主动学习:标记一个缩略语
在这个简单的主动学习任务中,我们希望你简单地标记一个缩略语。你可以使用下面的示例,或者用自己的示例来替换。
标记联系方式
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>
上标和下标
展示计算机代码
有大量的 HTML 元素可以来标记计算机代码:
<code>
:用于标记计算机通用代码。<pre>
:用于保留空白字符(通常用于代码块)——如果文本中使用了缩进或多余的空白,浏览器将忽略它,你将不会在呈现的页面上看到它。但是,如果你将文本包含在<pre></pre>
标签中,那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。<var>
:用于标记具体变量名。<kbd>
:用于标记输入电脑的键盘(或其他类型)输入。<samp>
:用于标记计算机程序的输出。
让我们看看一些例子。你应该尝试运行一下(尝试运行一下 other-semantics.html 样例文件的拷贝):
<pre><code>const para = document.querySelector('p');
para.onclick = function() {
alert('噢,噢,噢,别点我了。');
}</code></pre>
<p>
请不要使用 <code><font></code> 、
<code><center></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>
上面的代码显示效果如下:
标记时间和日期
HTML 还支持将时间和日期标记为可供机器识别的格式的 <time>
元素,例如:
<time datetime="2016-01-20">2016 年 1 月 20 日</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 日
- 等等
但是这些不同的格式不容易被电脑识别——假如你想自动抓取页面上所有事件的日期并将它们插入到日历中,<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>
技能测试!
你已经到达了本篇文章的末尾,但还能记得多少重要的东西呢?在进行下一步前,你可以找一些测试来验证知识留存的多少——请查看技能测试:高级 HTML 文本。
总结
到这里你就完成了 HTML 语义文本元素的学习。但要记住,你在本课程中学到的并不是 HTML 文本元素的详细列表——我们想要尽量覆盖主要的、通用的、常见的,或者至少是有趣的部分。如果你想找到更多的 HTML 元素,可以看一看我们的 HTML 元素参考(从内联文本语义部分开始会是一个好的选择)。在下一篇文章中我们将会学习用来组织 HTML 文档不同部分的 HTML 元素。