使用 Time 标签实现语义化 HTML | HTML5 时间标签教程

介绍

在本实验中，你将探索语义化的 HTML5 <time> 标签，并学习如何有效地在网页文档中使用它来表示日期和时间。实验的重点是理解 <time> 标签的关键特性，例如在保持人类可读文本的同时提供机器可读的时间数据，并演示其在各种 HTML 上下文中的实现。

通过逐步的方法，你将创建一个 HTML 文件，添加带有 datetime 属性的 <time> 标签，并理解这一语义化元素如何增强网页的可访问性，并提供有关日期和时间的结构化信息。在实验结束时，你将获得使用 <time> 标签来增强网页中时间数据语义化含义的实践经验。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") css/BasicStylingGroup -.-> css/text_styling("Text Styling") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills css/selectors -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} css/properties -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} html/lang_decl -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} css/text_styling -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} html/text_head -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} javascript/dom_select -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} javascript/dom_manip -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} javascript/dom_traverse -.-> lab-451085{{"使用 Time 标签实现语义化 HTML"}} end

理解 Time 标签的基础知识

在这一步中，你将学习 HTML5 的 <time> 标签，这是一个语义化元素，旨在以机器可读的格式表示日期和时间。<time> 标签有助于提高网页的可访问性，并提供有关时间数据的结构化信息。

<time> 标签的关键特性包括：

表示一个特定的时间段
可以包含人类可读的文本
支持机器可读的 datetime 属性
增强网页上日期和时间信息的语义化含义

以下是一个展示 <time> 标签的基本示例：

<p>The conference is scheduled for <time>2023-09-15</time>.</p>

在这个示例中，<time> 标签既允许人类读者看到日期，也允许机器解析确切的日期格式。

另一个展示 <time> 标签不同用法的示例：

<article>
  <h2>Lab Publication</h2>
  <p>Published on <time datetime="2023-06-20">June 20, 2023</time></p>
</article>

datetime 属性提供了标准化的机器可读日期格式，而可见文本仍然保持用户友好。

创建包含 Time 标签的 HTML 文件

在这一步中，你将创建一个 HTML 文件来演示 <time> 标签的用法。你将使用 WebIDE 在 ~/project 目录中创建并编辑一个 HTML 文档。

首先，导航到项目目录并创建一个名为 event-schedule.html 的新 HTML 文件：

cd ~/project

打开 WebIDE 并创建一个名为 event-schedule.html 的新文件。然后，添加以下 HTML 内容：

touch event-schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>The annual tech conference will be held on <time>2023-09-15</time>.</p>
    </article>
  </body>
</html>

在 Web 浏览器中查看时的示例输出：

注意：了解更多关于如何在 WebIDE 中预览 HTML 文件的信息。

此示例展示了如何在段落中使用 <time> 标签来表示特定日期。该标签为日期提供了语义化含义，使浏览器和辅助技术更容易理解时间信息。

为 Time 标签添加 Datetime 属性

在这一步中，你将学习如何通过添加 datetime 属性来增强 <time> 标签的功能。datetime 属性为日期和时间提供了机器可读的格式，使内容更具可访问性和语义化意义。

在 WebIDE 中打开 event-schedule.html 文件，并修改现有的 <time> 标签以包含 datetime 属性：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>
        The annual tech conference will be held on
        <time datetime="2023-09-15">September 15, 2023</time>.
      </p>

      <h3>Session Timing</h3>
      <p>Morning keynote starts at <time datetime="09:00">9:00 AM</time>.</p>
    </article>
  </body>
</html>

datetime 属性提供了以下优势：

提供标准化的、机器可读的日期/时间格式
允许显示文本与实际日期/时间值不同
支持多种格式，如完整日期、时间以及日期时间组合

datetime 属性的示例格式：

完整日期：2023-09-15
时间：09:00
日期时间：2023-09-15T09:00
带时区：2023-09-15T09:00Z

在 Web 浏览器中查看时的示例输出：

Upcoming Tech Conference

Conference Details
The annual tech conference will be held on September 15, 2023.

Session Timing
Morning keynote starts at 9:00 AM.

探索带有 Pubdate 属性的 Time 标签

在这一步中，你将学习 pubdate 属性，这是 <time> 标签的一个特殊布尔属性，用于指示文章或博客的发布日期。尽管它在 HTML5 中已被视为过时，但了解其历史用法有助于深入理解语义化 HTML。

在 WebIDE 中打开 event-schedule.html 文件，并修改内容以包含一个带有 pubdate 属性的博客文章示例：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Blog Post</title>
  </head>
  <body>
    <article>
      <h1>Latest Tech Insights</h1>
      <header>
        <h2>HTML5 Semantic Elements</h2>
        <p>
          Published on
          <time datetime="2023-06-20" pubdate>June 20, 2023</time>
        </p>
      </header>

      <p>In this article, we explore the semantic meaning of HTML5 tags...</p>

      <footer>
        <p>
          Updated on
          <time datetime="2023-06-22">June 22, 2023</time>
        </p>
      </footer>
    </article>
  </body>
</html>

关于 pubdate 属性的关键点：

它是一个布尔属性（不需要值）
用于指示文章的发布日期
在 HTML5 中已被弃用，但仍被许多浏览器支持
通常用于 <article> 标签内

在 Web 浏览器中查看时的示例输出：

Latest Tech Insights

HTML5 Semantic Elements
Published on June 20, 2023

In this article, we explore the semantic meaning of HTML5 tags...

Updated on June 22, 2023

注意：尽管 pubdate 现在被视为过时，但它展示了语义化 HTML 的演变以及提供机器可读日期信息的重要性。

验证 Time 标签的实现

在这最后一步中，你将审查并验证 HTML 文档中 <time> 标签的实现。你将创建一个综合示例，展示如何在不同的上下文和属性中使用 <time> 标签。

在 WebIDE 中打开 event-schedule.html 文件，并使用一个完整的示例更新它：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Event Showcase</title>
  </head>
  <body>
    <article>
      <h1>Web Development Conference</h1>

      <section>
        <h2>Event Details</h2>
        <p>
          Conference Date:
          <time datetime="2023-09-15">September 15, 2023</time>
        </p>
        <p>
          Start Time:
          <time datetime="09:00">9:00 AM</time>
        </p>
      </section>

      <section>
        <h2>Blog Post</h2>
        <article>
          <h3>HTML5 Semantic Elements</h3>
          <p>
            Published on
            <time datetime="2023-06-20" pubdate>June 20, 2023</time>
          </p>
          <p>
            Last Updated:
            <time datetime="2023-06-22">June 22, 2023</time>
          </p>
        </article>
      </section>
    </article>
  </body>
</html>

关键实现检查清单：

在不同上下文中使用多个 <time> 标签
使用 datetime 属性提供机器可读的日期
包含人类可读的日期文本
展示 pubdate 属性
使用 <article> 和 <section> 标签构建语义化 HTML 结构

在 Web 浏览器中查看时的示例输出：

Web Development Conference

Event Details
Conference Date: September 15, 2023
Start Time: 9:00 AM

Blog Post
HTML5 Semantic Elements
Published on June 20, 2023
Last Updated: June 22, 2023

总结

在本实验中，参与者学习了 HTML5 的 <time> 标签，这是一个语义化元素，旨在以机器可读的格式表示日期和时间。实验引导学习者理解该标签的关键特性，包括其能够包含人类可读文本并支持机器可读的 datetime 属性，从而增强网页的可访问性并提供结构化的时间信息。

通过实践练习，参与者创建了一个 HTML 文件，展示了 <time> 标签的实现，并探索了其与 datetime 和 pubdate 等不同属性的用法。他们练习了创建语义化标记，使人类读者和机器都能有效地解释日期和时间信息，进一步强调了在网页开发中使用语义化 HTML 元素的重要性。