HTML5 学习模块 ⭐

HTML5 基础知识与实战应用，前端开发的第一步

---

生活化比喻：HTML是什么？

HTML 就像建筑的"骨架"——定义网页的结构和内容。

比喻对应：

┌──────────────────────────────────────────────────────┐
│  建筑骨架                    HTML 文档                │
│  ─────────                  ─────────                │
│  地基                        <!DOCTYPE html>         │
│  整体框架                    <html>                  │
│  设计图纸                    <head>（元信息）         │
│  室内空间                    <body>（可见内容）       │
│  房间                        <section>/<article>     │
│  墙壁                        <div>                   │
│  装饰品                      <span>                  │
└──────────────────────────────────────────────────────┘

- 没有骨架，建筑无法站立 → 没有 HTML，网页无法显示
- 骨架决定房间布局 → HTML 决定内容结构
- 骨架不负责美观 → HTML 不负责样式（那是 CSS）

---

📚 目录结构

章节	难度	内容	学习目标
01-基础语法 ⭐	入门	文档结构、常用标签、属性	能写出一个完整的页面结构
02-表单详解 ⭐⭐	进阶	表单元素、验证、新特性	能实现用户输入和验证
03-语义化标签 ⭐⭐	进阶	语义化、SEO 优化	能写出 SEO 友好的页面

---

🎯 模块学习目标

完成本模块后，你将能够：

目标	具体能力	检验方式
理解 HTML 结构	知道 HTML 文档各部分的作用	能解释 head 和 body 的区别
会用常用标签	正确使用标题、段落、列表、链接、图片	手写一个个人简介页面
理解元素类型	区分块级元素和行内元素	能选择正确的标签
掌握语义化	用正确的标签表达正确的内容	能重构一个 div 堆砌的页面

---

🚀 学习路径

学习顺序（建议按此顺序学习）：

01-基础语法 ─────────────────────────────────────────→
  │                                                     │
  │  学会：文档结构、常用标签、元素类型                  │
  │  检验：写出一个完整的页面                           │
  │                                                     │
  ↓                                                     │
02-表单详解 ─────────────────────────────────────────→
  │                                                     │
  │  学会：表单元素、输入类型、验证                     │
  │  检验：实现一个注册表单                             │
  │                                                     │
  ↓                                                     │
03-语义化标签 ─────────────────────────────────────────→
  │                                                     │
  │  学会：header/nav/article/section/footer            │
  │  检验：重构页面为语义化结构                         │
  │                                                     │
  ↓                                                     │
完成 → 进入 CSS3 模块

---

📖 学习建议

✅ 应该做的

建议	原因
边学边写代码	HTML 只有动手写才能记住
关注"为什么用这个标签"	理解语义，不只是记忆
用浏览器查看效果	即时反馈，加深理解
对照规范检查代码	培养规范意识

❌ 应该避免的

避免	原因
只看不练	看懂≠会写，必须动手
全用 div	失去语义化，不利于 SEO
忽略 alt 属性	无障碍访问问题
跳级学习	基础不牢，后面更难

---

🔗 本模块重点概念

概念	生活化比喻	章节
HTML 文档	建筑骨架	01-基础语法
块级元素	房间（独占空间）	01-基础语法
行内元素	装饰品（挨着摆放）	01-基础语法
表单	填写的表格	02-表单详解
语义化	给房间贴标签（厨房、卧室）	03-语义化标签

---

常见问题

Q1：HTML 和 CSS、JavaScript 有什么区别？

比喻： HTML 是骨架，CSS 是装修（颜色、样式），JavaScript 是电器（交互功能）。

技术	作用	比喻
HTML	结构和内容	建筑骨架
CSS	样式和外观	装修设计
JavaScript	行为和交互	智能电器

Q2：为什么 HTML5 叫"5"？

答案： HTML5 是 HTML 的第五个重大版本，增加了视频、音频、画布、语义化标签等新特性。

Q3：学完 HTML 能做什么？

答案： 能做出网页的结构，但还需要 CSS（美化）和 JavaScript（交互）才能做出完整的网页。

---

学习资源

• MDN HTML 教程 ⭐ 官方权威
• HTML5 规范 - 完整规范
• Web.dev HTML - Google 指南

---