3.4 文本级语义标签：time, mark, figure 等

3.4 文本级语义标签：time, mark, figure 等

文本级语义标签概述

文本级语义元素（Text-level semantics）用于对行内内容赋予特定含义，这些标签不会在视觉上创建新的内容区块，但能为浏览器、搜索引擎和辅助技术提供额外的语义信息。以下是核心文本级语义标签的详细解析：

1. <time> 时间元素

功能特性：

• 表示机器可读的日期/时间信息
• datetime属性提供标准化格式
• 支持时区偏移量表示

标准用法：

<p>会议时间：<time datetime="2023-12-15T14:30:00+08:00">12月15日下午2:30</time></p>

<p>发布日期：<time datetime="2023-11">2023年11月</time></p>

datetime格式规范：

高级应用：

<time datetime="P3D" title="3天">72小时</time>
<script>
  const eventTime = document.querySelector('time').dateTime;
  // 可进行日期计算
</script>

2. <mark> 标记元素

功能特性：

• 表示需要突出显示的文本片段
• 默认样式为黄色背景（可CSS覆盖）
• 适用于搜索关键词高亮或内容引用

标准用法：

<p>在HTML5中，<mark>语义化</mark>设计是核心特性之一。</p>

<!-- 搜索结果显示 -->
<article>
  <h2>搜索结果</h2>
  <p>...关于<mark>HTML5</mark>的最新研究显示...</p>
</article>

设计建议：

/* 自定义标记样式 */
mark {
  background: linear-gradient(yellow, yellow);
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
}

/* 打印样式优化 */
@media print {
  mark {
    background: none;
    color: black;
    text-decoration: underline;
  }
}

3. <figure> 与 <figcaption>

功能特性：

• <figure>：包裹独立内容（图片、代码、图表等）
• <figcaption>：为内容提供标题/说明
• 可嵌套使用形成复杂结构

标准用法：

<figure>
  <img src="chart.png" alt="季度销售趋势">
  <figcaption>图1：2023年各季度销售额对比（单位：万元）</figcaption>
</figure>

<figure>
  <pre><code>const data = { key: 'value' };</code></pre>
  <figcaption>示例1：JavaScript对象定义</figcaption>
</figure>

多图组合示例：

<figure class="gallery">
  <figure>
    <img src="product-1.jpg" alt="产品A">
    <figcaption>基础型号</figcaption>
  </figure>
  <figure>
    <img src="product-2.jpg" alt="产品B">
    <figcaption>专业型号</figcaption>
  </figure>
  <figcaption class="gallery-caption">产品系列对比</figcaption>
</figure>

其他重要文本级标签

4. <cite> 引用标题元素

功能特性：

• 表示作品标题（书籍、歌曲、电影等）
• 不应用于作者姓名（使用<address>或普通文本）

标准用法：

<p>更多信息请参考<cite>HTML5权威指南</cite>第3章。</p>

<blockquote>
  <p>优秀的代码应该像诗一样优雅。</p>
  <footer>— <cite>Douglas Crockford</cite>, 《JavaScript语言精粹》</footer>
</blockquote>

5. <dfn> 术语定义元素

功能特性：

• 标记术语的定义实例
• 通常与<abbr>配合使用
• 屏幕阅读器会特殊处理

标准用法：

<p><dfn id="def-semantic">语义化</dfn>是指使用恰当的HTML元素来表达内容含义。</p>
<p>如前述<abbr title="语义化">定义</abbr>所示...</p>

6. <small> 附属细则元素

功能特性：

• 表示免责声明、版权声明等小字号内容
• 不应用于主要内容的视觉缩小

标准用法：

<p>产品价格可能随时调整<small>（不含增值税）</small></p>

<footer>
  <small>© 2023 公司名称 保留所有权利</small>
</footer>

语义化文本组合技巧

1. 复合引用结构

<figure>
  <blockquote cite="https://example.com/source">
    <p>设计不仅是外观和感觉，设计是它如何工作。</p>
  </blockquote>
  <figcaption>
    — <cite>Steve Jobs</cite>, 
    <time datetime="2003-05-25">2003年访谈</time>
  </figcaption>
</figure>

2. 术语表实现

<dl>
  <dt><dfn>HTML</dfn></dt>
  <dd>超文本标记语言，网页结构基础</dd>
  
  <dt><dfn>CSS</dfn></dt>
  <dd>层叠样式表，控制视觉呈现</dd>
</dl>

3. 时间线展示

<ul class="timeline">
  <li>
    <time datetime="2023-01">2023年1月</time>
    <p>项目正式启动</p>
  </li>
  <li>
    <time datetime="2023-06">2023年6月</time>
    <p>完成<mark>核心功能</mark>开发</p>
  </li>
</ul>

可访问性增强实践

1. 屏幕阅读器优化

<p>
  截止<time datetime="2023-12-31" aria-label="二零二三年十二月三十一日">2023年底</time>，
  我们已完成<mark aria-label="重要里程碑">关键阶段</mark>目标。
</p>

2. 键盘导航支持

/* 确保所有语义元素可获得焦点 */
time:focus, 
mark:focus,
figure:focus {
  outline: 2px solid #0066cc;
}

3. 打印样式优化

@media print {
  time::after {
    content: " (" attr(datetime) ")";
    font-size: 0.8em;
    color: #666;
  }
}

现代应用案例

1. 新闻文章标记

<article>
  <h2>科技快讯</h2>
  <p>
    在<time datetime="2023-11-20">今日</time>举行的开发者大会上，
    <mark class="highlight">新一代框架</mark>正式发布。
  </p>
  <figure>
    <img src="event.jpg" alt="大会现场照片">
    <figcaption>
      图：<cite>年度开发者大会</cite>现场盛况
      <small>（摄影：张三）</small>
    </figcaption>
  </figure>
</article>

2. 电子商务平台

<div class="product">
  <h3>智能手表</h3>
  <p>上市时间：<time datetime="2023-09">2023年9月</time></p>
  <figure>
    <img src="watch.jpg" alt="智能手表产品图">
    <figcaption>旗舰款<mark>限时优惠</mark></figcaption>
  </figure>
  <p><small>价格有效期至<time datetime="2023-12-31">12月31日</time></small></p>
</div>

3. 学术论文展示

<section>
  <h2>研究方法</h2>
  <p>
    如<cite id="ref1">Smith et al. (2020)</cite>所述，
    我们采用<dfn>双盲实验</dfn>方法...
  </p>
  <figure aria-labelledby="fig2-desc">
    <img src="methodology.png" alt="实验设计流程图">
    <figcaption id="fig2-desc">图2：实验设计流程图</figcaption>
  </figure>
</section>

兼容性与Polyfill方案

1. 旧浏览器时间显示

// 为不支持time元素的浏览器添加polyfill
if (!document.createElement('time').dateTime) {
  document.querySelectorAll('time').forEach(el => {
    el.title = el.getAttribute('datetime');
  });
}

2. 打印样式兼容

<!-- 为打印添加可见的datetime -->
<time datetime="2023-12-25">圣诞节<span class="print-only"> (2023-12-25)</span></time>

<style>
.print-only { display: none; }
@media print {
  .print-only { display: inline; }
}
</style>

通过合理运用这些文本级语义标签，开发者可以创建出机器友好、语义清晰的文档内容。这种细粒度的语义标记不仅有助于SEO和可访问性，也为内容重用和样式控制提供了更好的基础结构。