介绍
<output>
标签是 HTML5 中新引入的容器元素。它通常用于在网站/应用程序中显示任何计算的结果。
在这个逐步实验中,你将学习如何使用 HTML 的 <output>
标签创建一个结果占位符。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
<output>
标签是 HTML5 中新引入的容器元素。它通常用于在网站/应用程序中显示任何计算的结果。
在这个逐步实验中,你将学习如何使用 HTML 的 <output>
标签创建一个结果占位符。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在你的电脑上创建一个名为 index.html
的 HTML 文件。
在你的 HTML 文件的 body 部分中添加 <output>
标签。
<body>
<h1>结果占位符</h1>
<output></output>
</body>
创建输入元素,例如文本框或按钮,这些元素可用于在输出元素中生成结果。定义 for
属性,描述输出元素与输入元素之间的关系。
<body>
<h1>结果占位符</h1>
<input type="text" id="number1" />
<input type="text" id="number2" />
<button onclick="calculateResult()">计算</button>
<output for="number1 number2"></output>
</body>
编写一个 JavaScript 函数,根据用户输入生成结果。
<script>
function calculateResult() {
// 获取用户输入的值
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
// 存储操作的结果
var result = parseInt(num1) + parseInt(num2);
// 在输出元素中显示结果
document.querySelector("output").value = result;
}
</script>
编写完 HTML 和 JavaScript 后,在浏览器中打开 HTML 文件并测试你的结果占位符。
在输入框中输入两个数字,然后点击“计算”按钮。这些数字的和应显示在输出元素中。
恭喜你,你已经成功地使用 HTML 的 <output>
标签创建了一个结果占位符。在这个实验中,你学习了如何添加输入元素并编写 JavaScript 函数,以根据用户输入生成结果。你可以使用输出元素在你的网站上显示计算结果或任何其他结果。