为什么先学 HTML#
把网页想成一本书：HTML 是目录、章节、段落和图注。即使没有 CSS，这本书也应该能读；即使没有 JavaScript，链接和表单也应尽量保持基本可用。
第一个完整页面#
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>我的学习记录</title>
<meta name="description" content="记录我的 Web 学习过程" />
</head>
<body>
<header>
<h1>我的学习记录</h1>
<nav aria-label="主导航">
<a href="#today">今日学习</a>
<a href="#plan">学习计划</a>
</nav>
</header>
<main>
<section id="today">
<h2>今日学习</h2>
<p>我认识了 HTML 的基本结构。</p>
</section>
</main>
<footer><p>持续学习，持续记录。</p></footer>
</body>
</html>必须掌握#
元素、标签和属性#
<a href="https://developer.mozilla.org/">打开 MDN</a>a 是元素类型；href 是属性；标签之间是用户看到的链接文字。属性通常提供额外信息。
标题必须有层级#
一个页面通常有一个表达主标题的 h1，子章节使用 h2，再下一层使用 h3。不要因为字体大小选择标题级别，外观交给 CSS。
语义元素#
- header：页面或区域开头；
- nav：主要导航；
- main：页面独有的主要内容；
- section：有标题的内容分区；
- article：可以独立阅读的内容；
- footer：页脚或区域补充信息。
语义正确会帮助搜索引擎、读屏软件和维护代码的人理解页面。
链接与图片#
<a href="lesson.html">下一课</a>
<img src="diagram.png" alt="浏览器向服务器发送请求的流程图" />有意义的图片必须有说明其内容和作用的 alt。纯装饰图片可用空 alt，不要把文件名当作替代文字。
表单#
<form>
<label for="email">邮箱</label>
<input id="email" name="email" type="email" autocomplete="email" required />
<button type="submit">订阅</button>
</form>输入框要有可见的 label；占位文字不能代替标签。按钮要写明 type，避免意外提交。
需要理解#
- head 中的标题、描述、字符集和视口；
- 列表、表格、音视频和 figure/figcaption；
- 块级与行内布局的基本区别；
- HTML 验证和浏览器开发者工具；
- 无障碍名称、键盘顺序和 ARIA 的作用。
原则：能用原生 HTML 表达时，优先使用原生元素，不要一开始用 div 模拟按钮。
常见错误#
- 为了变大而使用 h1，导致标题层级混乱；
- 用 div + 点击事件代替按钮，键盘无法正常操作；
- 图片没有替代文字；
- 标签没有正确嵌套或忘记闭合；
- 链接文字全写“点击这里”，离开上下文后不知道去哪里；
- 表格用于页面布局，而不是展示二维数据。
动手练习#
创建一张“个人学习档案”页面，必须包含：
- 页面标题、简介和头像；
- 主导航；
- 有序的学习阶段列表；
- 一张课程进度表；
- 带姓名、邮箱、留言和提交按钮的表单；
- 所有图片有合适的替代文字；
- 只用键盘 Tab 键也能依次操作链接和表单。
完成标准#
- 能从空文件写出基本文档结构。
- 能解释 head 与 body 的区别。
- 能根据内容含义选择元素。
- 标题层级连续，表单标签完整。
- 页面没有 CSS 时仍然可以阅读和操作。