读懂最小网页结构

网页三个层次

HTML是内容与语义，CSS是显示，JavaScript是交互。即使代码由AI生成，也应能找到输入、按钮、结果和监听器。title是标签名，h1是主标题，label的for对应input的id。

最小表单的工作方式

表单可键盘提交。preventDefault避免刷新丢输入；结果用textContent更新。下例展示结构，正式作品还要校验。

<form id="budget">
<label for="people">人数</label><input id="people" type="number" min="0" step="1" required>
<label for="price">每人预算</label><input id="price" type="number" min="0" step="0.01" required>
<button>计算</button></form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.querySelector("#budget");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const people = Number(document.querySelector("#people").value);
  const cents = Math.round(Number(document.querySelector("#price").value) * 100);
  document.querySelector("#result").textContent = (people * cents / 100).toFixed(2) + "元";
});
</script>

本地运行的边界

保存为.html可以本地打开；本站草稿编辑器不自动执行用户代码，需要下载核验。浏览器单文件不提供多人账户与数据库，那些需求要另设服务。先理解每段代码负责什么，再添加功能。