测试你的技能：高级 HTML 文本

本技能测试的目的是评估你是否了解如何使用 鲜为人知的 HTML 元素来标记高级语义功能。

¥The aim of this skill test is to assess whether you understand how to use lesser-known HTML elements to mark up advanced semantic features.

注意：你可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

¥Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。

¥If you get stuck, you can reach out to us in one of our communication channels.

任务 1

¥Task 1

在此任务中，我们希望你将提供的动物及其定义转换为描述列表。

¥In this task, we want you to turn the provided animals and their definitions into a description list.

完成的示例应如下所示：

¥The finished example should look like this:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.

任务 2

¥Task 2

在此任务中，我们希望你向提供的 HTML 添加一些语义，如下所示：

¥In this task, we want you to add some semantics to the provided HTML as follows:

  • 将第二段变成块级引用，并在语义上表明该引用取自 无障碍。
  • 在语义上将 "HTML" 和 "CSS" 标记为首字母缩略词，提供扩展作为工具提示。
  • 使用下标和上标为化学式和日期提供正确的语义，并使其正确显示。
  • 在语义上将机器可读日期与文本中的日期关联起来。

完成的示例应如下所示：

¥The finished example should look like this:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.