19. 标记 mark 与时间 time

mark：高亮文本

<mark> 标签把文字标记为高亮，就像用荧光笔划过一样。默认背景是黄色。

<p>搜索结果中包含<mark>HTML5</mark>的相关内容。</p>

它最常见的场景是搜索结果页——把匹配搜索词的关键词高亮显示。

mark 不是改变样式的

<mark> 有语义：表示与用户当前操作相关的文本。不只是”让它变黄”。

<p>这段文字中<mark>这个部分</mark>需要你特别关注。</p>

如果你只是想改文字颜色，用 CSS。<mark> 用在这里表示”当前上下文中的相关性”。

mark {
  background-color: yellow;
  color: black;
}

time：标注时间

<time> 标签告诉浏览器：“这是一个时间或日期”。

<p>今天的日期是<time>2026年7月28日</time>。</p>

默认情况下，浏览器不会给 <time> 加特殊样式。它的作用是机器可读。

datetime 属性

datetime 属性提供时间的标准化格式，方便机器解析。

<p>活动日期：<time datetime="2026-07-28">7月28日</time></p>

显示给用户的是”7月28日”，机器读到的是 ISO 8601 格式的”2026-07-28”。

各种时间格式

只有日期：

<time datetime="2026-07-28">2026年7月28日</time>

日期加时间：

<time datetime="2026-07-28T14:30">7月28日下午2:30</time>

T 是日期和时间之间的分隔符。

带时区：

<time datetime="2026-07-28T14:30+08:00">北京时间下午2:30</time>

时间段：

<time datetime="PT2H30M">两个半小时</time>

PT2H30M 表示 Period Time：2小时30分钟。

time 的实际用途

搜索引擎利用 <time> 判断文章发布时间、活动日期等信息。

<p>发布于<time datetime="2026-07-28">2026年7月28日</time></p>
<p>活动截止：<time datetime="2026-08-15T23:59">8月15日23:59</time></p>

日历应用可以读取 datetime 属性，一键添加到日历。

完整的文章信息示例

<article>
  <h2>HTML 标题标签详解</h2>
  <p>
    作者：张三<br>
    发布于：<time datetime="2026-07-28">2026年7月28日</time><br>
    更新于：<time datetime="2026-07-30">2026年7月30日</time>
  </p>
  <p>正文内容……</p>
</article>

小结

• <mark> 高亮文本，表示与当前操作相关
• <mark> 默认黄色背景，可以用 CSS 改
• <time> 标注时间或日期
• datetime 属性提供标准化的机器可读格式
• 搜索引擎和日历应用会利用这些信息
• 显示格式和机器格式可以不同