Advanced text formatting

 

HTML中还有许多其他用于格式化文本的元素,我们在HTML文本基础知识文章中没有涉及到. 本文中描述的元素鲜为人知,但对于了解这些元素仍然很有用(无论如何,它仍然不是完整的列表). 在这里,您将了解有关标记报价单,描述列表,计算机代码和其他相关文本,下标和上标,联系信息等的信息.

Prerequisites: 基本的HTML熟悉程度,如HTML入门中所述 . HTML文本格式,如HTML文本基础知识所述 .
Objective: 了解如何使用鲜为人知的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 additional background information

说明列表与其他列表类型使用不同的包装器- <dl> ; 另外,每个术语都包装在<dt> (描述术语)元素中,每个描述都包装在<dd> (描述定义)元素中. 让我们结束标记示例:

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

浏览器的默认样式将显示描述列表,其中描述与术语有所不同. MDN的样式非常遵循此约定,但也增加了术语的定义.

soliloquy
在戏剧中,角色在对自己说话,代表他们的内在思想或感情,并在此过程中将其传达给观众(但不传达给其他角色).
monologue
在戏剧中,角色大声说出自己的想法,与观众和在场的任何其他角色分享.
aside
在戏剧中,角色仅与观众分享幽默或戏剧效果的评论. 这通常是一种感觉,想法或其他背景信息.

请注意,允许使用带有多个描述的单个术语,例如:

aside
在戏剧中,角色仅与观众分享幽默或戏剧效果的评论. 这通常是一种感觉,想法或其他背景信息.
在写作中,与当前主题相关但不直接适合主要内容流的一部分内容在附近显示(通常在侧面的框中).

Active learning: Marking up a set of definitions

是时候尝试一下描述列表了; 在" 输入"字段中将元素添加到原始文本,以使其在" 输出"字段中显示为描述列表. 如果愿意,您可以尝试使用自己的术语和描述.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the 显示解决方案 button to see the answer.

Quotations

HTML还具有可用于标记报价的功能. 使用哪个元素取决于是标记块引用还是内联引用.

Blockquotes

如果某段块级内容(包括一个段落,多个段落,列表等)被其他地方引用,则应将其包装在<blockquote>元素中以表示这一点,并包括指向源的URL. cite属性中的引号. 例如,以下标记来自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 Block Quotation Element )指示所包含的文本是扩展引号.

Inline quotations

内联引用的工作方式完全相同,不同之处在于它们使用<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>

浏览器的默认样式会将其呈现为引号中的普通文本以表示引号,如下所示:

quote元素- <q> - 用于不需要段落分隔符的短引号.

Citations

The content of the cite attribute sounds useful, but unfortunately browsers, screenreaders, etc. don't really do much with it. There is no way to get the browser to display the contents of cite, without writing your own solution using JavaScript or CSS. If you want to make the source of the quotation available on the page you need to make it available in the text via a link or some other appropriate way.

有一个<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示例中看到此代码.

Active learning: Who said that?

是时候为另一个积极的学习实例了! 在此示例中,我们希望您:

  1. 将中间段落变成一个带有cite属性的引号.
  2. 将第三段的一部分变成内联引号,其中包括cite属性.
  3. 在每个链接中都包含一个<cite>元素,以说明引用源的标题是什么.

您需要的引用来源是:

  • http://www.brainyquote.com/quotes/authors/c/confucius.html以获取孔子的报价
  • http://www.affirmationsforpositivethinking.com/index.htm,以了解"消除负面自我谈话的需要".

如果输入有误,可以随时使用" 重置"按钮将其重置 . 如果确实遇到问题,请按" 显示解决方案"按钮以查看答案.

Abbreviations

在网上浏览时,您会遇到的另一个相当常见的元素是<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>

这些将看起来像这样(当术语悬停时,扩展将出现在工具提示中):

我们使用HTML来构造我们的Web文档.

我想格林牧师用电锯在厨房里做到了.

注意 :还有另一个元素<acronym> ,它与<abbr>基本上具有相同的作用,并且专门用于首字母缩写词而不是缩写词. 但是,此方法已被废弃-在浏览器和<abbr>不受支持,并且具有类似的功能,因此认为两者都没<abbr> . 只需使用<abbr> .

Active learning: marking up an abbreviation

对于此简单的主动学习任务,我们希望您简单地标记一个缩写. 您可以在下面使用我们的示例,也可以用自己的一个替换.

Marking up contact details

HTML具有用于标记联系人详细信息的元素- <address> . 这只是将您的联系方式包括在内,例如:

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</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>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Superscript and subscript

在标记日期,化学式和数学方程式等项目时,有时会需要使用上标和下标,以便它们具有正确的含义. <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>

此代码的输出如下所示:

我的生日是2001年5月25 .

咖啡因的化学式为C 8 H 10 N 4 O 2 .

如果x 2为9,则x必须等于3或-3.

Representing computer code

有许多元素可用于使用HTML标记计算机代码:

  • <code> :用于标记通用的计算机代码.
  • <pre> :用于保留空格(通常是代码块)-如果在文本中使用缩进或多余的空格,浏览器将忽略它,并且在呈现的页面上将看不到它. 但是,如果将文本包装在<pre></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>

上面的代码如下所示:

Marking up times and dates

HTML还提供了<time>元素,用于以机器可读的格式标记时间和日期. 例如:

<time datetime="2016-01-20">20 January 2016</time>

为什么这有用? 嗯,人类写下日期的方式有很多. 以上日期可以写为:

  • 2016年1月20日
  • 2016年1月20日
  • 2016年1月20日
  • 20/01/16
  • 01/20/16
  • 下个月20日
  • 2016年1月20日
  • 2016年1月20日
  • 等等

但是这些不同的形式不能被计算机轻易识别-如果您想自动获取页面中所有事件的日期并将其插入日历中怎么办? <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>

Test your skills!

您已经到了本文的结尾,但是您还记得最重要的信息吗? 在继续进行之前,您可以找到一些其他测试来验证您是否保留了此信息—请参阅测试您的技能:高级HTML文本 .

Summary

这标志着我们对HTML文本语义学的研究结束. 请记住,您在本课程中看到的内容并不是详尽的HTML文本元素列表-我们想尝试介绍基本知识,以及您将在野外看到的一些更常见的知识,或者至少可能会发现有趣的内容. 要找到更多HTML元素,可以看一下我们的HTML元素参考 (" 内联文本语义"部分将是一个不错的起点.)在下一篇文章中,我们将研究用于构造HTML元素的HTML元素. HTML文档的不同部分.

In this module