用 操作成功 实现绿色成功提示，配合 CSS .status-success { color: var(--success-text, #28a745); }，确保语义正确、可访问、适配深色模式并防范 XSS。
怎么用 <span></span> 实现绿色成功提示文本
HTML 本身没有「成功状态」语义标签，<span></span> 是最常用、最轻量的承载方式，配合 CSS 控制颜色和样式。别用 <b></b> 或 <i></i>，它们只有表现含义，没语义；也别硬套 <strong></strong>，它表达重要性，不是状态。
- 推荐写法：
<span class="status-success">操作成功</span> - 对应 CSS：`.status-success { color: #28a745; }`（Bootstrap 默认成功绿）
- 如果项目用了设计系统，优先复用其约定类名，比如
text-success或color-success - 避免直接写
style="color:green"—— 不利于主题切换、可访问性检测和维护
为什么不用 <output></output> 或 <progress></progress>
这两个标签看起来像「状态反馈」，但语义完全不匹配：<output></output> 专用于表单计算结果（如实时求和），<progress></progress> 表示任务进度百分比。浏览器和读屏软件会按语义解析它们，乱用会导致辅助技术误读。
- 错误示例：
<output>提交成功</output>→ 屏幕阅读器可能读作「输出：提交成功」，用户困惑「输出什么？」 - 正确思路：状态提示属于「信息反馈」，应归为
<div> 或 <code><span></span>+ 合理 class，必要时加role="status" - 若需 ARIA 支持（比如动态更新），用
<span role="status" aria-live="polite"></span>，否则纯视觉提示即可 - 推荐用 CSS 自定义属性：
color: var(--success-text, #28a745);，并在 :root 或 theme class 中定义变量 - 检查 WCAG 对比度：浅色背景上
#28a745对比度约 4.6:1（勉强达标），深色背景需换更亮的绿色（如#4CAF50） - 不要依赖用户系统色偏好自动变绿 ——
prefers-color-scheme只能切背景/文字主色，状态色需主动控制 - 务必对文案做 HTML 转义：EJS 用
（不带等号是危险的），Jinja 用{{ text | escape }} - 禁止拼接未过滤的
innerHTML—— 即使只是绿色文字，也要防<img src="x" onerror="alert(1)" alt="HTML怎么标注成功状态_HTML绿色提示文本结构【介绍】" >这类注入 - 如果文案含简单链接，建议用白名单处理（只允许
<a href="https://..."></a>），而非放行全部 HTML
color: green 在深色模式下会失效吗
会。硬编码 green 或十六进制色值（如 #28a745）在深色主题下可能对比度不足，甚至看不见。现代方案必须考虑配色系统适配。
服务端渲染时如何安全插入成功文案
后端模板（如 EJS、Jinja）直接拼 HTML 容易 XSS，尤其当文案来自用户输入或 API 响应。绿色提示看似简单，但「成功」内容若含恶意脚本，<span></span> 一样执行。
立即学习“前端免费学习笔记（深入）”；
