不适合标注“新内容”，因其语义专指缩写，会导致读屏器误读、无障碍体验下降；应使用 （强调重要性）或 （上下文高亮），辅以语义正确的 CSS 样式与服务端时间戳控制。
怎么用 <abbr></abbr> 标注“新内容”最合理
直接说结论：<abbr></abbr> 不适合标“新内容”。它语义是“缩写/首字母缩略词”，浏览器和读屏软件会按缩写处理，比如把 <abbr title="new">new</abbr> 读作“n-e-w”，而不是“新”。用户根本感知不到这是更新提示。
常见错误现象：加了 <abbr></abbr> 后，视觉上加了下划线或虚线边框，但无障碍体验变差，SEO 也不认这个语义。
- 真正该用的标签是
<strong></strong>或<mark></mark>—— 前者强调重要性（如“新增功能”），后者标记文档中需要高亮的片段（如版本更新日志里的改动项） - 如果必须带解释（比如鼠标悬停显示“2024年6月上线”），用
<span></span>+title属性更安全，不破坏语义 -
<abbr></abbr>的title是给缩写全称用的，不是放更新时间的——放错会导致读屏器重复、混乱播报
<strong></strong> 和 <mark></mark> 怎么选
看场景：<strong></strong> 表示内容重要性提升，适合“新增”“重磅升级”这类需用户注意的提示；<mark></mark> 表示上下文中的相关高亮，适合在一段文字里圈出被修改的部分（比如对比前后文案）。
性能和兼容性没区别，两者都原生支持，所有浏览器渲染一致。但语义错用会影响可访问性评估工具报错（比如 axe 会警告 <mark></mark> 用在非上下文高亮场景）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- “新增 API 接口” → 用
<strong>新增</strong> API 接口 - 原文“支持导出 PDF”改成“支持导出
<mark>PDF 和 Excel</mark>” → 用 <code><mark></mark> - 别用
<strong></strong>包裹整句再加颜色——样式交给 CSS，语义标签只管“为什么重要”，不管“怎么好看”
CSS 配合时容易踩的坑
很多人加了 <strong></strong> 就直接写 strong { color: red; }，结果全局粗体变红，破坏原有设计。更糟的是，有些团队用 !important 强行覆盖，导致组件库样式冲突。
- 优先用 class 控制样式，比如
<strong class="badge-new">NEW</strong>，再单独定义.badge-new - 避免依赖默认
<strong></strong>的 font-weight：不同字体下加粗效果不一致，iOS 上某些中文字体甚至不加粗 - 如果要加角标（如右上角“New”），纯 CSS 实现比额外套标签更轻量，也避免语义污染 —— 用
::after+content+position: absolute
动态插入“新内容”标识时要注意什么
前端常根据发布时间判断是否加“NEW”，比如后端返回 is_new: true。这时候最容易漏掉的是状态同步和清理逻辑。
- 别只靠 JS 插入
<strong></strong>标签就完事——服务端渲染（SSR）或静态生成（SSG）页面里，得提前算好要不要加，否则首屏闪动或 SEO 抓不到 - 缓存策略要连带更新：如果某条内容“新”标有效期是7天，CDN 缓存不能设成永久，否则过期后还显示“NEW”
- 用户手动标记“已读”后，仅隐藏 DOM 不够——得发请求更新服务端状态，否则换设备又看到重复提示
最麻烦的其实是时间精度问题：服务器时间、客户端本地时间、时区、夏令时……这些只要一个对不上，“NEW”就可能提前消失或延迟出现。真要可靠，得用服务端下发的绝对时间戳做判断，别信 new Date()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
