参考资料

1. HTML 预期格式文本
2. 隐形水印嵌入技术详解
3. HTML 文本对齐方式
4. HTML使用表格 布局
5. HTML 合并单元格
6. HTML 表单详解
7. HTML移除边框 Iframe
8. HTML 图像格式化

HTML 输出

HTML 输出 (Output)

介绍

HTML <output> 标签表示计算或用户操作的结果。它是HTML5新增的语义化元素，专门用于显示计算结果。

标签语法

<output name="result" for="input1 input2">默认值</output>

属性

• for: 指定与输出相关联的输入元素的ID列表，用空格分隔

• form: 指定输出元素所属的表单

• name: 为输出结果指定名称

基本用法

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="25"> =
  <output name="result" for="a b">75</output>
</form>

功能

1. 显示计算结果

2. 与表单输入元素关联

3. 支持实时更新显示

4. 提供语义化的输出容器

CSS扩展

可以通过CSS为output元素添加样式：

output {
  display: inline-block;
  min-width: 50px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  font-weight: bold;
  text-align: center;
}

output:empty {
  display: none;
}

JavaScript交互

可以通过JavaScript动态更新output内容：

document.getElementById('result').value = '新值';

注意事项

• 不是所有浏览器都支持所有output功能

• 在旧浏览器中可能需要JavaScript polyfill

• 默认样式在不同浏览器中可能不一致