<output>是HTML原生语义化标签，专用于实时输出值，须置于<form>内、通过for属性绑定控件ID，用textContent更新内容，不支持placeholder/disabled，IE及旧Safari需降级为<span role="status">。
用 <output> 标签做实时状态输出最直接
HTML 原生就提供了专门用于显示计算结果或用户操作反馈的语义化标签：<output>。它不是装饰性容器，而是为“输出值”设计的，浏览器会默认将其与表单控件（如 <input type="range">、<input type="number">）建立关联，支持自动更新。
常见错误是拿 <div> 或 <span> 硬套，再靠 JS 手动 innerHTML 更新——语义不清、无障碍支持弱、还容易漏掉 aria-live 补救。
-
<output>必须放在<form>内才具备原生关联能力（哪怕表单不提交） - 通过
for属性绑定触发控件的id，例如<output for="slider"></output>对应<input id="slider" type="range"> - 不要给
<output>设value属性；内容写在标签体内，或用 JS 改textContent
JS 更新 <output> 时别直接改 innerHTML
虽然 innerHTML 能生效，但它会破坏可访问性：屏幕阅读器可能不感知纯 HTML 插入的内容变化，尤其含富文本时易出问题。而 <output> 的语义本意是“数值/简单状态”，应保持干净。
典型场景是滑块拖动后显示当前值、两个输入框相加结果实时呈现。
立即学习“前端免费学习笔记（深入）”；
- 优先用
textContent更新，比如document.querySelector('output').textContent = '123' - 若需高亮数字，用
innerText或包裹一层<span>并设role="status"，避免引入未预期的解析逻辑 - 不要在
oninput里频繁触发重排：把textContent更新和 DOM 查询拆开，缓存节点引用
<output> 不支持 placeholder 或 disabled 状态
这是常被忽略的限制：<output> 没有 placeholder 属性，也不能设 disabled。想模拟“暂无输出”或“禁用态”，得靠 CSS 或外层控制。
比如用户还没操作滑块，你希望显示 “–”；或者表单校验失败时让输出区域变灰。
- 初始内容可直接写进标签体：
<output>–</output> - 用 class 控制样式，例如
<output class="output--empty"></output>，配合 CSS.output--empty { color: #999; } - 千万别用
disabled属性——浏览器会忽略，且不符合规范 - 如果需要完全隐藏，用
hidden属性比display: none更语义正确
IE 和旧版 Safari 不支持 <output>，但降级成本很低
IE 全系不识别 <output>，旧版 Safari（≤12.1）对 for 关联支持也不稳定。不过这不是大问题，因为它的降级路径非常自然。
核心思路：当 <output> 不可用时，它在 DOM 中仍是一个普通元素，JS 操作完全不受影响。
- 检测方式不用查 UA，直接
typeof HTMLUnknownElement !== 'undefined'没意义；更稳妥的是用document.createElement('output').toString()看是否返回[object HTMLUnknownElement] - 实际项目中，99% 场景直接忽略兼容性——现代框架（React/Vue）或构建工具（Babel + core-js）不会帮你 polyfill 它，也没必要
- 真要兼容 IE，用
<span role="status">替代，并手动监听事件绑定更新逻辑，代码量只多 2–3 行
getElementById + innerHTML 的散点操作——<output> 就是为此而生的，用对了省心，用错了反而添乱。 
