使用HTML5中的<output>元素可以将计算结果显示在页面上。该元素有一个for属性，用于指定与之关联的表单控件。在JavaScript中，可以使用document.querySelector()方法获取该元素，并使用textContent属性或innerHTML属性将计算结果输出到页面上。
示例代码如下：
<form>
<label for="num1">数字1：</label>
<input type="number" id="num1" name="num1"><br>
<label for="num2">数字2：</label>
<input type="number" id="num2" name="num2"><br>
<button onclick="calculate()">计算</button><br>
<label for="result">结果：</label>
<output for="num1 num2" id="result"></output>
</form>
<script>
function calculate() {
const num1 = parseInt(document.querySelector('#num1').value);
const num2 = parseInt(document.querySelector('#num2').value);
const result = num1 + num2;
document.querySelector('#result').textContent = result;
}
</script>在上面的代码中，使用了<input>元素来获取两个数字，使用<button>元素来触发计算，并使用<output>元素来显示结果。JavaScript代码中定义了一个calculate()函数，用于计算结果并将其输出到<output>元素中。其中，document.querySelector()方法用于获取页面中的元素，parseInt()方法用于将字符串转换为整数。
关键词高亮：<output>元素、for属性、querySelector()方法、textContent属性、innerHTML属性、parseInt()方法。