output元素非表单控件，不参与数据提交，name属性无效；value属性是更新显示的推荐方式，for属性在Safari中不支持动态更新，且不触发CSS验证伪类。
output 元素不是表单控件，不能提交数据
很多人把 <output></output> 当成 <input> 或 <textarea></textarea> 用，结果表单提交时完全收不到它的值——因为它天生不参与表单数据收集。
它只负责「显示计算结果」，比如实时展示两个输入框相加的和，但不会被 form.submit() 或 FormData 捕获。
-
<output name="total"></output>中的name属性纯属无效，浏览器直接忽略 - 想让服务端收到这个值？必须额外用
<input type="hidden">同步写入，或在 JS 提交前手动塞进FormData - 如果依赖
output的for属性关联其他元素（如for="a b"），注意多个 ID 要用空格分隔，不是逗号
output 的 value 属性和 innerText 行为不一致
<output></output> 有 value 属性，但它不反映 DOM 文本内容；直接改 output.value = "123" 会更新显示，但 output.innerText 读出来也是 "123"；可一旦用 innerHTML 插入 HTML，value 就变成空字符串，且不再响应后续赋值。
- 推荐统一用
output.value = "xxx"更新内容，这是标准、稳定的方式 - 避免混用
textContent或innerHTML，否则value和视图可能脱节 - 初始值写在标签内（
<output>0</output>）等价于设置value="0"，但 JS 里读output.value才可靠，不要依赖output.textContent
output 在 Safari 中不支持 for 属性的动态更新
Safari 对 <output for="id1 id2"></output> 的响应是静态的：只在元素插入 DOM 时读一次关联元素，之后改 for 属性或目标元素的 id，都不会触发重新绑定。
- 需要动态切换依赖关系？别靠
for，改用 JS 监听目标元素的input或change事件，手动更新output.value - Chrome/Firefox 支持
for动态更新，但跨浏览器一致性差，生产环境建议绕过 - 如果用
for，确保所引用的id在output渲染前已存在，否则 Safari 下关联失效且无提示
output 不触发 CSS :valid/:invalid 伪类
哪怕你给 <output></output> 加了 required 或设了 min/max，它也不会被表单验证系统识别——没有 :valid、:invalid、:required 这些伪类，CSS 无法据此做状态样式。
立即学习“前端免费学习笔记（深入）”；
- 别试图用
output:invalid { color: red; }控制样式，它永远不匹配 - 需要视觉反馈？用 JS 根据计算逻辑手动加 class，比如
output.classList.toggle("error", total - 它也没有
checkValidity()方法，调用会报TypeError
