HTML Academy · 课时

time、address 和 mark

Q: 「time、address 和 mark」这节课中我会学到什么？

以语义化方式标记日期、联系信息和突出显示的文本 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

以语义化方式标记日期、联系信息和突出显示的文本

time、address 和 mark 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

time 元素

<time> 元素以机器可读的格式标记日期和时间：

<p>Published on <time datetime="2025-01-15">January 15, 2025</time>.</p>
<p>The meeting is at <time datetime="14:30">2:30 PM</time>.</p>
<p>The event runs from
  <time datetime="2025-01-15">Jan 15</time> to
  <time datetime="2025-01-20">Jan 20</time>.
</p>

日期时间属性的格式

datetime 属性必须是有效的日期时间字符串：

<time datetime="2025-01-15">January 15</time>        <!-- date -->
<time datetime="14:30">2:30 PM</time>               <!-- time -->
<time datetime="2025-01-15T14:30">Meeting time</time> <!-- date+time -->
<time datetime="2025-W03">Week 3, 2025</time>        <!-- week -->
<time datetime="2025-01">January 2025</time>         <!-- year-month -->
<time datetime="P3D">3 days</time>                  <!-- duration -->

time 元素为何重要

使用 <time> 的好处：

搜索引擎可以理解内容的日期
浏览器和应用可以将日期添加到日历
屏幕阅读器可以正确读出日期
JavaScript 可以解析日期时间属性，以便格式化显示

动态格式化日期

使用 JavaScript 从日期时间属性中读取并格式化日期：

<time id="event-time" datetime="2025-06-15T10:00">June 15, 2025</time>

<script>
const el = document.getElementById('event-time');
const date = new Date(el.getAttribute('datetime'));
el.textContent = date.toLocaleDateString('en-US', {
  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});
// Output: Sunday, June 15, 2025
</script>

address 元素

<address> 元素用于标记距离最近的 <article> 或 <body> 的联系信息：

<address>
  <p>Jane Smith</p>
  <p><a href="mailto:jane@example.com">jane@example.com</a></p>
  <p><a href="tel:+15555550100">(555) 555-0100</a></p>
  <p>123 Main Street, New York, NY 10001</p>
</address>

文章的联系信息

在文章内部使用 address 标记作者的联系信息：

<article>
  <h2>HTML Guide</h2>
  <address>
    Written by
    <a href="mailto:jane@example.com" rel="author">Jane Smith</a>
  </address>
  <p>Content...</p>
</article>

address 不用于什么

<address> 元素仅用于联系信息，而不是任意地址：

<!-- BAD: address for a location with no contact info -->
<address>
  Empire State Building, New York
</address>

<!-- Better: use p or a structured element -->
<p>Empire State Building, New York</p>

<!-- GOOD: address for contact information -->
<address>
  <a href="mailto:support@example.com">Contact Support</a>
</address>

mark 元素

 元素用于突出显示在当前上下文中相关的文本：

<p>
  Search results for "HTML5":
  The <mark>HTML5</mark> specification was finalized in 2014.
  <mark>HTML5</mark> introduced many new semantic elements.
</p>
<!-- Default styling: yellow background -->
<!-- Semantic use: highlighting search terms, annotations -->
<!-- NOT for general styling — use span for that -->

设置 mark 样式

自定义 mark 默认的黄色突出显示效果：

mark {
  background-color: #fef08a;
  color: inherit;  /* keep text color from parent */
  padding: 0.1em 0.2em;
  border-radius: 3px;
}

/* High contrast mode: */
@media (forced-colors: active) {
  mark {
    background-color: Highlight;
    color: HighlightText;
  }
}

mark、strong 与 em 的区别

如何选择突出显示元素：

 —— 因与当前上下文相关而突出显示（搜索结果）
 —— 始终重要的内容
 —— 会改变含义的强调语气
 —— 纯粹用于视觉样式，没有语义

搜索与突出显示

实际应用：在搜索结果中突出显示搜索词：

function highlightText(text, query) {
  if (!query) return text;
  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escaped})`, 'gi');
  return text.replace(regex, '<mark>$1</mark>');
}
// document.getElementById('result').innerHTML =
//   highlightText(result.title, searchQuery);

快速检查

机器可读的日期时间属性用于什么？

回顾：time、address 与 mark

语义化行内元素：

<time datetime=""> —— 机器可读的日期和时间
<address> —— 最近的文章或页面的联系信息
 —— 与上下文相关的突出内容（搜索词）
datetime 使用 ISO 8601 格式：YYYY-MM-DD、HH:MM
mark 的默认样式：黄色背景；可使用 CSS 自定义

常见问题解答

「time、address 和 mark」课时是免费的吗？

是的 — 「time、address 和 mark」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「time、address 和 mark」这节课中我会学到什么？

以语义化方式标记日期、联系信息和突出显示的文本你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「time、address 和 mark」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy