Web 高级文本格式

由 yzh277804528 创建,youj 最后一次修改 2017-05-15
在HTML中有许多其他元素用于格式化文本,这是我们在HTML文本基础文章中没有涉及到的。在这篇文章中所描述的元素虽然不怎么常见,但了解它们还是很有用的(而这仍然不是一个完整的列表)。在这里你将了解标记引用,描述列表,计算机代码和其他相关文本,下标和上标,联系信息等。


前提: 熟悉基础HTML,参阅 HTML入门。了解HTML文本格式,参阅 HTML文本基础
目的: 要学习如何使用不太常见的HTML元素来标记高级语义特性。

描述列表(Description lists)

在HTML文本基础章节中,我们详细介绍了如何在HTML中标记基本列表,但我们没有提到你偶尔会遇到的第三种类型的列表 - 描述列表这些列表的目的是标记一组项目及其相关描述,例如术语和定义,或问题和答案。让我们看看下面这一组术语和定义的例子:

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 addtional background information

描述列表使用的是与其他列表类型不同的闭合标签:<dl>;此外,每个描述列表的术语都封装在一个<dt>(description term)元素中,并且每个描述列表的描述都封装在一个<dd>(description description)元素中。让我们完成下面的标记例子:

<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 addtional background information.</dd>
</dl>

浏览器的默认样式将显示描述列表,其中的描述部分(description description)与术语有些缩进。MDN也非常严格地遵循这一惯例,但也鼓励关于术语的其他更多的定义。

自言自语
在戏剧中,一个角色对自己说话,表达自己内心的想法或感受,并将其传达给观众(而不是其他角色)。
独白
在戏剧中,一个角色大声说出他们的想法,与观众和其他人物分享。
旁白
在戏剧中,一个角色只与观众分享一个意见,以表达幽默或戏剧性的效果。这通常是一种感觉,想法或一些附加背景信息。

请注意,单个术语可以同时有多个描述,例如:

旁白
在戏剧中,一个角色只与观众分享一个意见,以表达幽默或戏剧性的效果。这通常是一种感觉,想法或一些附加背景信息。
在书面上,是指与当前主题相关的一部分内容,但不适合直接用于主线内容,因此会被呈现在附近(通常在一个方框内)。

主动学习:标记一组定义

现在是时候尝试一下描述列表了;请在Input字段的原始文本里添加相应的元素,使得它在Output字段是以描述列表的形式出现。如果你喜欢,你也可以使用你自己的术语和描述。

如果发生错误,你可以随时使用Reset按钮重置。如果你卡住了,请按Show solution按钮查看答案。



引用(Quotations)

HTML也有用于标记引用的特性;至于使用哪个元素标记,取决于你是标记块还是内联引用。

块引用

如果一个块级内容(一个段落,多个段落,一个列表等)是从其他地方被引用,你应该把它用<blockquote>元素封装起来表示,并且在cite属性里用URL来指向块引用的资源。例如,下面的例子就是引用MDN的<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 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>

浏览器默认会给块引用以缩进段落的样式,作为引用的一个指示符;MDN是这样做的,但也增加了额外的样式:

HTML<blockquote> 元素(或HTML块引用元素)表示包含的文本是扩展引用。

内联引用

内联引用的工作方式也是一样的,只是它们是使用<q>元素。例如,下面的标记位包含来自MDN<q> 页面的引用:

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

浏览器默认样式将会将其作为普通文本放入引号中以表示引用,如下:

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

引文

cite属性的内容听起来很有用,但不幸的是,对浏览器、屏幕阅读器等来说没有太多用处。还没有办法让浏览器显示 cite 的内容,而无需使用JavaScript或CSS来编写你自己的解决方案。如果你想要确保引用的资源在页面上是可用的,更好的方法是把<cite>元素放到引用元素旁边。这就意味着包含引用资源的名称——即引用的书的名称,或人的名字——但并不表示你不能以某种方式将<cite>中的文本链接到引用资源:

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</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>

<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> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

引文默认的字体样式为斜体。你可以在quotations.html中参看代码。

主动学习:是谁说的?

到了另一个主动学习的例子!在这个例子中我们想要你做:

  1. 把中间的段落变成块引用,它要包含cite属性。
  2. 把第三个段落的一部分变成内联引用,它要包含cite属性。
  3. 每一个引用都要包含<cite>元素。

可以在线寻找合适的引用资源。

如果发生错误,你可以使用Reset按钮重置。如果你卡住了,请按Show solution按钮查看答案。



缩写词

另一个你在web上看到的相当常见的元素是<abbr>——它常被用来封装一个缩写词或首字母缩略词,并且提供缩写的完整阐述(包含在title属性中)。让我们看看下面两个例子:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

这些代码呈现出来的会是这样(当鼠标悬停在缩写词上时,将在工具提示中出现缩写词的完整阐述):

We use HTML to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.


注意:还有另一个元素<acronym>,它基本与<abbr> 相同,专门用于首字母缩略词而不是缩写词。然而它已经被废弃 - 它在浏览器以及<abbr>中也不被支持,而且没有必要存在两个具有类似功能的元素。只需要使用<abbr>即可。

主动学习:标记缩写词

对于这个简单的主动学习任务,我们希望你简单地标记一个缩写词。你可以使用下面的示例,或着用你自己的替换它。



标记联系信息

HTML有个用于标记联系细信息的元素<address>它只是简单的封装你的联系方式,例如:

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

但要记住的一点是,<address> 元素为了标记编写HTML文档的人的联系信息,而不是任何其他的地址。因此,如果这是Chris写的文档,上面的标记内容是可以的。注意,下面的内容也是可以的:

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

上标和下标

当你标记日期、化学公式和数学方程式时会偶尔使用上标和下标,以使它们具有正确的含义。<sup><sub>元素可以解决这样的问题。例如:

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

此代码的输出如下所示:

My birthday is on the 25th of May 2001.

Caffeine's chemical formula is C8H10N4O2.

If x2 is 9, x must equal 3 or -3.


表示计算机代码

HTML有许多的元素可以用来标记计算机代码:

  • <code>用于标记计算机通用代码。
  • <pre>用于标记固定宽度的文本块,其中保留空格(通常是代码块)。
  • <var>用于标记具体变量名。
  • <kbd>用于标记输入计算机的键盘(或其他类型)输入。
  • <samp>用于标记计算机程序的输出。

让我们来看几个例子。你应该尝试运行一下(尝试运行一下other-semantics.html示例文件):

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

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



标记时间和日期

HTML提供<time>元素用于以机器可识别格式标记时间和日期。例如:

<time datetime="2016-01-20">20 January 2016</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日
  • And so on

但是这些不同的形式不容易被计算机轻易识别 - 如果你想自动获取页面中所有事件的日期,并将它们插入到日历中怎么办?<time>元素允许你附上清晰的、机器可识别的时间/日期来实现这种需求。

上述基本的例子仅仅提供了一个简单的可被机器识别的日期格式,但还有很多其他支持的格式,例如:

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

总结

到这里你就完成了HTML文本语义的学习。但要记住,你在本课程中学到的并不是HTML文本元素的详细列表 - 我们想要尽量覆盖主要的、常见的、或者至少是有趣的基本元素。如果你想找到更多的HTML元素,可以看我们的 HTML元素参考(从内嵌文本语义部分开始会是一个不错的选择)。在 下一篇文章我们将会学习用来构造HTML文档不同部分的HTML元素。

以上内容是否对您有帮助:
二维码
建议反馈
二维码