是 html 中表示插入内容的语义化标签，用于标记新增或修订内容，应与 配合使用以传达价格变动，确保无障碍访问和 seo 友好。
ins 标签的语义和基本用法
<ins></ins> 是 HTML 中表示「插入内容」的语义化标签，浏览器默认会加下划线（部分 UA 还带浅绿色背景），适合标记新增、修订或替换的内容。它本身不改变价格数值逻辑，只负责视觉+语义传达「这是新改的价格」——不是装饰性下划线，而是告诉屏幕阅读器、搜索引擎「这部分是后来加/改的」。
常见错误是把它当 <u></u> 或 <span></span> 用，比如：<ins>¥199</ins> 却没配 <del></del> 表示旧价，导致语义断裂；或者嵌套在 <button></button> 里触发无障碍读取异常。
与 del 标签配合展示价格变动
促销价有意义的前提是用户能感知「变少了」。单独用 <ins></ins> 不如组合 <del></del>：旧价删掉、新价插入，形成明确对比。这对 SEO 和辅助技术都更友好。
- 正确结构：
<del>¥299</del><ins>¥199</ins> - 避免把
<ins></ins>放在<span></span>外层再包裹样式——语义层级被破坏，屏幕阅读器可能跳过<ins></ins>的插入提示 - 不要用
text-decoration: none直接取消下划线——可改用border-bottom: 1px solid #ff6b35等自定义样式，但需确保ins的role="insertion"仍被保留（现代浏览器默认支持）
CSS 自定义 ins 样式不影响语义
浏览器默认下划线太细、颜色难辨，尤其在深色背景上。可以安全重写样式，只要不移除 <ins></ins> 标签本身或覆盖其 ARIA role。
ins {
text-decoration: none;
background-color: rgba(255, 107, 53, 0.1);
padding: 0 4px;
border-radius: 2px;
font-weight: bold;
}
注意两点：
- 别用
display: inline-block或float破坏行内流布局，否则价格对齐错乱 - 若页面支持暗色模式，需同步定义
@media (prefers-color-scheme: dark)下的背景透明度，避免浅色背景色块在深色下刺眼 - 移动端小屏时，
padding值建议用0.1em而非固定像素，防止缩放后文字溢出
动态更新时 ins 标签的 DOM 操作要点
促销价常随库存、时段实时变化，JS 插入新 <ins></ins> 时容易忽略可访问性细节。
- 不要直接
innerHTML = '<ins>¥149</ins>'—— 这会清空旧 DOM 节点，导致屏幕阅读器中断播报；应使用replaceChild()或insertAdjacentElement()保持节点连续性 - 每次更新后手动触发
ins.setAttribute('datetime', new Date().toISOString())，让辅助工具知道修改时间（虽非强制，但 WCAG 建议） - 如果促销价来自 API，且返回值含「原价」「现价」字段，优先用
<del data-price="299">¥299</del><ins data-price="149">¥149</ins>，方便后续 JS 读取数值做计算，而非从文本中正则提取
真正容易被忽略的是：当促销结束恢复原价时，很多人直接删掉 <ins></ins> 和 <del></del>，结果语义丢失——此时该用 <span></span> 替换回纯文本，并确保 aria-live 区域通知用户「促销已结束」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
