从一个 HTML 文件，认识网页的基本结构

网页的三层结构

HTML 描述内容的结构，例如标题、段落、列表和链接；CSS 决定颜色、间距与布局；JavaScript 在需要时增加交互。学习的起点是把内容写清楚，再逐步补上样式。

一个只有 HTML 的页面也能正常阅读。让页面先具备完整内容，有助于在样式或脚本加载失败时保留基本可用性。

创建第一个页面

新建文本文件，将文件名保存为 index.html，编码选择 UTF-8。以下示例包含中文编码、移动设备视口与基本正文。

<!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>

用正确的标签表达内容

页面的主要标题通常使用 h1，章节使用 h2，普通说明使用 p。跳转到其他页面使用 a，触发本页操作使用 button。

清晰的标题层级能帮助读者扫读，也方便辅助技术理解页面。不要只为了放大字体而滥用标题标签。

添加一点样式

将样式写进独立的 style.css 文件，并在页面头部引入。优先设置正文宽度、行高和页面留白，再考虑装饰效果。

body {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  line-height: 1.8;
  color: #243247;
}

保存后的检查顺序

确认文件扩展名是 .html，而不是 .html.txt。
在浏览器打开页面，检查中文是否正常。
点击每个链接，确认文件路径与大小写一致。
缩窄浏览器窗口，检查文字是否溢出。

先完成一个完整的小页面，再逐步拆分样式与脚本文件，学习过程会更容易追踪。