用标签最稳妥，语义清晰且利于seo与无障碍；css用::after伪元素实现角标，避免布局错位；动态更新时仅js替换文本而非重写html。
HTML里加“最近更新”角标，用<time></time>最稳妥
直接用 <time></time> 标签包裹日期，浏览器和屏幕阅读器都能识别语义，搜索引擎也认。别手痒写 <span class="update">2024-06-12</span> —— 看似省事，但丢掉了时间的机器可读性。
常见错误是把日期写成纯文本或用 <div> 套着，结果爬虫当装饰、读屏器跳过、后续想自动提取更新时间还得正则硬扒。
<ul>
<li>
<code>datetime 属性必须用 ISO 8601 格式（如 2024-06-12 或 2024-06-12T14:30:00+08:00），不能写“昨天”“3天前”
<time datetime="2024-06-12">2024年6月12日更新</time>，语义和可读性兼顾datetime 值是真实构建/发布时的时间戳，不是写死的或 JS 运行时生成的CSS实现右上角小角标，避开定位陷阱
角标视觉上常放在文章标题右上，但别一上来就给标题加 position: relative 再塞 absolute 子元素——容易被父容器 overflow: hidden 截掉，或者在 flex/grid 布局里错位。
更稳的做法：把角标作为标题的 ::after 伪元素，靠 content 注入，用 position: absolute + top/right 微调，且只作用于标题本身，不侵入 DOM 结构。
- 务必设置
position: relative在标题标签上（如<h1></h1>），否则::after的绝对定位会往上层找定位上下文，可能飞到页面左上角 - 角标文字建议用
font-size: 0.75em、line-height: 1控制高度，避免撑开标题行高 - 如果标题有下划线或 border-bottom，角标默认会压在上面；需要它浮在最上层，加
z-index: 1
动态更新时间戳？JS补全比重写 HTML 更安全
有些场景（比如博客列表页）希望“X天前”这种相对时间，但 HTML 本身不支持运行时计算。这时候不要用 JS 去 innerHTML 整段重写标题结构——破坏语义、影响 SEO、还可能触发重复渲染。
推荐方案：HTML 里仍保留标准 <time datetime="..."></time>，JS 只负责读取 datetime 属性，算出“2天前”后，仅替换角标区域的文本内容（比如一个 <span class="update-badge"></span> 里的文字）。
- 用
document.querySelectorAll('time[datetime]')批量获取，避免硬编码 ID - 注意时区：服务端输出的
datetime是 UTC 还是本地时间？JS 的Date解析行为不同，建议统一用带时区的格式（如2024-06-12T06:00:00Z） - 如果页面静态生成，且更新频率低（如每月一次），其实没必要 JS 动态化——固定写“2024年6月12日更新”反而更可靠
SEO 和无障碍要注意的两个细节
角标不是装饰，它是内容的一部分。Google 会抓取 <time></time> 的 datetime 值用于富摘要，NVDA/JAWS 也会朗读它。但这两件事都依赖正确用法。
- 别把更新时间塞进
title属性里（如<span title="2024-06-12">● 更新</span>），title 不是语义时间，且移动端不触发朗读 - 如果角标用了颜色区分（比如红色表示“今日更新”），必须同时提供非颜色线索：加图标（
❗）、文字（“今日”）、或 ARIA label（aria-label="今日更新"） - 同一页面多个文章？每个
<time></time>的datetime必须唯一且准确，混用一个时间戳会让结构化数据校验失败
