是HTML5专为计算结果和操作反馈设计的语义化标签，应配合aria-live确保可访问性，避免innerHTML频繁更新和z-index硬编码，注重显示时机与边界逻辑。
用 <output></output> 标签做状态输出区域，但别当输入框用
<output></output> 是 html5 专为“计算结果”或“操作反馈”设计的语义化标签，比如表单提交后显示“已保存”，或实时校验提示“用户名可用”。它不是 <div> 的替代品，也不该绑定 <code>value 或加 disabled ——浏览器会直接忽略 disabled，还可能破坏可访问性。
- 初始内容直接写进标签体：
<output>–</output>，比空标签 + JS 注入更轻量 - 用
class控制样式，例如<output class="output--empty"></output>，配合 CSS：.output--empty { color: #999; } - IE 全系不识别
<output></output>，旧版 Safari（≤12.1）对for属性支持也不稳；但降级成本极低——它默认就渲染成普通内联元素，视觉上几乎无差别
状态消息必须带 aria-live，否则屏幕阅读器“看不见”
纯靠 CSS 显示/隐藏一个 <div>，对视力正常用户没问题，但对依赖读屏软件的用户等于没发。关键不是“有没有文字”，而是“系统知不知道该读”。<code>aria-live 就是这个开关。
- 普通状态（如“保存中…”）用
aria-live="polite"+role="status"：等用户停顿再读，不打断操作 - 紧急错误（如“网络断开，请重试”）用
aria-live="assertive"+role="alert"：立刻中断当前播报，强制读出 - 千万别只写
role="alert"却漏掉aria-live——很多读屏器会直接跳过
动态更新时，别直接改 innerHTML，先清空再设值
频繁调用 element.innerHTML = "新消息" 看似简单，但容易引发两个问题：一是旧消息 DOM 节点残留（尤其用了 insertAdjacentHTML 之类）；二是连续快速触发时，前一条还没消失，后一条又覆盖上去，造成视觉抖动或读屏混乱。
- 推荐做法：每次更新前先清空文本节点，再赋新值，例如：
el.textContent = "";→el.textContent = "上传完成"; - 如果需保留 HTML 结构（比如含图标），用
el.innerHTML = "";清空，再注入安全字符串（确保无 XSS 风险） - 避免在循环或高频事件（如
input实时校验）里反复创建/销毁整个 DOM 节点——性能差，且aria-live可能失效
固定位置提示（Toast）要管好 z-index 和堆叠逻辑
顶部右下角弹出的提示框，本质是脱离文档流的 position: fixed 元素。看似简单，实际最容易出错的是层叠顺序和多条并存时的管理。
-
z-index别硬写死数字（如9999），用变量递增更稳妥，防止被其他组件（如 Modal、Dropdown）意外遮盖 - 每条新提示应插入到容器最前面（
container.prepend(newEl)），保证最新消息在顶层，而不是堆在底部被挡住 - 自动消失前，要加
transition动画（如opacity+transform），并监听transitionend再移除节点；直接remove()会导致动画中断
<output></output> 标签重要得多。
