HTML output 语法
在 HTML 中，output 标签用于表单中表示计算结果或用户操作产生的结果。它通常与 JavaScript 结合使用，能够将处理后的数据直接展示在网页中，从而提升页面的交互体验。
output 是 HTML5 新增的语义标签，以增强 HTML 结构的语义化。小伙伴们可以将其看成是更有语义化的 span 标签。
语法：
<output></output>说明：
output 标签的属性有 3 个，如下表所示。
| 属性 | 说明 |
|---|---|
| for | 与 output 相关联的元素 ID |
| name | 指定 output 元素的名称 |
| form | 指定 output 元素所属的表单 ID |
提示: output 是一个行内元素，其默认样式与 span 标签类似。
HTML output 摘要
| 属于 | HTML 表单 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML output 示例
接下来，我们通过一个简单的例子来讲解一下 HTML output 标签是如何使用的。
示例：output 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<label>
拖动滑块：
<input type="range" id="rangeInput" name="num" min="0" max="100" step="1" value="0">
</label>
+ 100 =
<output id="resultOutput" name="result" for="rangeInput">100</output>
</form>
<script>
const input = document.getElementById("rangeInput");
const output = document.getElementById("resultOutput");
// 定义计算函数
function updateOutput() {
output.value = parseInt(input.value) + 100;
}
// 绑定 oninput 事件，实现拖拽时实时变化
input.addEventListener("input", updateOutput);
// 初始化（虽然 HTML 里写了 100，但 JS 再跑一次更稳妥）
updateOutput();
</script>
</body>
</html>默认情况下，页面效果如下图 1 所示。当拖动滑动条时，页面效果如下图 2 所示。
分析：
output 标签一般放在 form 标签内部，并且配合其他表单标签（如滑动条、文本框等）一起使用。
