HTML语义化增强标签

语义化增强标签为内容添加特定含义，辅助搜索引擎和辅助技术理解页面。

time时间标签

基本用法

<time>2024-01-15</time>

datetime属性

<time datetime="2024-01-15">2024年1月15日</time>
<time datetime="2024-01-15T14:30">下午2:30</time>
<time datetime="14:30">每天14:30</time>
<time datetime="P2D">两天后</time>

格式规范

使用场景

<article>
  <h1>新闻标题</h1>
  <p>发布于<time datetime="2024-01-15">2024年1月15日</time></p>
  <p>活动时间：<time datetime="2024-02-01T09:00+08:00">2月1日上午9点</time></p>
</article>

<dl>
  <dt>营业时间</dt>
  <dd><time datetime="09:00">上午9点</time> 至 <time datetime="18:00">下午6点</time></dd>
</dl>

datetime机器可读，显示文本人类可读，SEO友好。

mark高亮标签

基本用法

<p>搜索结果：<mark>关键词</mark>匹配的内容片段。</p>

• 高亮显示文本片段
• 默认黄色背景
• 表示关注重点或搜索匹配

搜索匹配示例

<article>
  <h1>搜索结果</h1>
  <p>找到包含<mark>HTML</mark>的相关文章：</p>
  <blockquote>
    <mark>HTML</mark>是超文本标记语言，用于构建网页结构...
  </blockquote>
</article>

文章重点标记

<p>请特别注意<mark>截止日期为月底</mark>。</p>

样式定制

mark {
  background: #ffeb3b;
  color: inherit;
  padding: 0 4px;
}

/* 自定义样式 */
mark.highlight {
  background: linear-gradient(120deg, #ff0 0%, #ff0 100%);
}

mark.error {
  background: #ff6b6b;
  color: white;
}

wbr换行机会

基本用法

<p>超长单词：Supercalifragilistic<wbr>expialidocious</p>

• 指定长单词或URL的换行点
• 仅在需要时换行
• 不强制换行，提供换行机会

URL换行

<p>网址：https://www<wbr>.example<wbr>.com<wbr>/path<wbr>/to<wbr>/page</p>

长路径

<p>路径：C:\Users<wbr>\Documents<wbr>\Projects<wbr>\src<wbr>\components</p>

wbr在空间不足时生效，避免长内容撑破布局。

bdi文本隔离

基本用法

<ul>
  <li>用户：<bdi>إبراهيم</bdi></li>
  <li>用户：<bdi>User123</bdi></li>
</ul>

• 隔离双向文本
• 防止相邻文本相互影响
• 适用于不确定文本方向的内容

用户名显示

<p>评论者：<bdi>用户名</bdi>说：很好的文章！</p>

动态内容

<template id="commentTemplate">
  <li>
    <bdi class="username"></bdi>:
    <span class="content"></span>
  </li>
</template>

当插入阿拉伯语等RTL文本时，bdi防止影响周围LTR文本。

bdo文本方向

基本用法

<bdo dir="rtl">从右向左显示</bdo>
<bdo dir="ltr">从左向右显示</bdo>

• 强制指定文本方向
• 覆盖继承的方向
• dir属性必填

使用场景

<!-- 显示RTL语言 -->
<p>阿拉伯语：<bdo dir="rtl">مرحبا</bdo></p>

<!-- 显示希伯来语 -->
<p>希伯来语：<bdo dir="rtl">שלום</bdo></p>

<!-- 特殊排版效果 -->
<p>艺术排版：<bdo dir="rtl">ABCDEF</bdo></p>

与bdi对比

标签速查表

组合使用示例

<article>
  <header>
    <h1>国际会议日程</h1>
    <p>时间：<time datetime="2024-03-15T10:00+08:00">3月15日上午10点</time></p>
  </header>

  <section>
    <h2>参会人员</h2>
    <ul>
      <li><bdi>محمد</bdi> - 演讲者</li>
      <li><bdi>John Smith</bdi> - 主持人</li>
    </ul>
  </section>

  <section>
    <h2>会议纪要</h2>
    <p>请重点关注<mark>决议事项</mark>部分。</p>
    <p>相关资料：https://conference<wbr>.example<wbr>.org<wbr>/documents</p>
  </section>
</article>

要点总结

• time标签标注时间，datetime属性机器可读
• mark高亮搜索匹配或重要内容
• wbr为长单词/URL提供换行机会
• bdi隔离双向文本防止干扰
• bdo强制指定文本显示方向
• 合理使用提升语义化和可访问性