不用javascript编程,不用jsp直接用html

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

HTML是一种标记语言，它用于创建网页的结构和内容。虽然HTML本身不能实现复杂的逻辑和交互功能，但是我们可以通过合理地利用HTML标签和属性，以及CSS样式来实现一些简单的交互效果和动态展示。

一种常见的HTML技术是使用超链接和锚点来实现页面内的跳转。通过在页面中设置锚点，我们可以在页面中的不同位置之间进行跳转。例如，我们可以在页面的顶部设置一个返回顶部的链接，当用户点击该链接时，页面会平滑地滚动到页面顶部。下面是一个简单的示例代码：


<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 2000px;
}
#top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}
</style>
</head>
<body>
  <h1>页面内容</h1>
  <p>这是页面的内容。</p>
  <a href="#top" id="top">返回顶部</a>
</body>
</html>

在上面的示例代码中，我们首先定义了一个包含一些内容的页面。然后，我们在页面的底部设置了一个超链接，并给它设置了一个id属性为"top"，表示这是一个锚点。接着，我们使用CSS样式将该链接固定在页面的右下角。当用户点击该链接时，页面会自动滚动到具有相同id的元素，也就是页面顶部。

除了使用锚点和超链接实现页面内的跳转，我们还可以使用表单和表单元素来实现一些简单的交互功能。例如，我们可以创建一个文本输入框和一个按钮，当用户在文本输入框中输入内容并点击按钮时，页面会根据用户的输入做出相应的反应。下面是一个示例代码：


<!DOCTYPE html>
<html>
<body>
<h2>简单的计算器</h2>
<form>
  <input type="number" id="num1" placeholder="输入第一个数字">
  <input type="number" id="num2" placeholder="输入第二个数字">
  <button onclick="calculate()">计算</button>
</form>
<p id="result"></p>
<script>
function calculate() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var result = num1 + num2;
  document.getElementById("result").innerHTML = "计算结果为：" + result;
}
</script>
</body>
</html>