网页的本质是一份结构化文档。浏览器读到的不是“画面”，而是标签组成的树。掌握骨架，后面的 CSS 与 JavaScript 才有附着点。

html head body title h1 p
图：HTML 文档从 DOCTYPE 到 body 的基本层级

最小可用模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>我的第一页</title>
</head>
<body>
  <h1>你好，网页</h1>
  <p>这是正文。</p>
</body>
</html>

三个关键区域

  • DOCTYPE：告诉浏览器按 HTML5 标准解析。
  • head：元信息、标题、样式与脚本引用，不直接显示正文。
  • body：用户看得见的内容，标题、段落、图片、链接都在这里。
小提示：先写语义化标签（h1、p、nav、main），再考虑样式。结构清晰的页面更易维护。

练习

  1. 新建 index.html，复制上面模板并改标题。
  2. 在 body 中加入导航、一段介绍和一张图片占位。
  3. 用浏览器打开，按 F12 查看 Elements 面板中的 DOM 树。