掌握 HTML 时间表示

介绍

HTML 提供了一个 time 标签，允许开发者表示人类可读的时间或日期，同时也可以让搜索引擎以机器可读的格式读取。在这个实验中，我们将学习如何在 HTML 中使用 time 标签来创建日期和时间戳。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签来预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70868{{"HTML 时间表示"}} html/head_elems -.-> lab-70868{{"HTML 时间表示"}} html/charset -.-> lab-70868{{"HTML 时间表示"}} html/lang_decl -.-> lab-70868{{"HTML 时间表示"}} html/inter_elems -.-> lab-70868{{"HTML 时间表示"}} html/custom_attr -.-> lab-70868{{"HTML 时间表示"}} end

添加 HTML 模板

要创建一个 HTML 文件，我们需要从 HTML 模板开始。将以下代码复制并粘贴到 index.html 文件中。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Time Tag Lab</title>
  </head>
  <body></body>
</html>

定义日期和时间

要定义日期和时间，我们需要使用带有 datetime 属性的 time 标签。datetime 属性以机器可读的格式指定日期和时间。将以下代码添加到 body 标签内以定义日期和时间：

<p>
  The current date and time is
  <time datetime="2022-07-23T18:30-05:00">23 July 2022, 6:30 PM</time>.
</p>

添加有效的时间段

time 标签也可以用于表示有效的时间段。我们可以使用 datetime 属性为 time 标签添加一个有效的时间段。将以下代码添加到 body 标签内以定义时间段：

<p>
  The total duration of the project was
  <time datetime="PT10M">10 minutes</time>.
</p>

保存 index.html 文件并在浏览器中打开，查看使用 time 标签创建的日期和时间戳。

总结

在这个实验中，我们学习了如何在 HTML 中使用 time 标签来创建日期和时间戳。我们还了解了如何使用相同的标签定义有效的时间段。time 标签是一个强大的工具，开发者可以用它来创建人类和机器均可读的时间和日期表示。