第一章：HTML基石·现实的骨架
教学目标：
• 理解 HTML 的整体结构（<!DOCTYPE>,<html>,<head>, <body>）
• 掌握基础标签（<h1>, <p>, <a>, <img>, <ul>/<ol>/<li>, <div>, <span>）
• 初识语义化标签（<section>, <article>, <header>, <footer>）
剧情：灰域中的第一道门
2147 年，人类世界的数据文明高度发达，所有实体城市都有一个虚拟“镜像城”——统称为 Origin。
林昊，生于现实最底层的“灰域”，从小听父亲说过一句话：“世界不是由砖头建成的，而是由标签编织出来的。”
某天，一串乱码神秘上传入他的神经芯片。在他脑中，一道声音响起：
「你是被选中的造梦师学徒。来吧，HTML之门已开启。」
教学场景加载：原始代码之域
林昊站在一片空白的数据平原上，只有一块泛光的黑色地板和虚拟键盘。
此时，一位身披银袍的虚拟人影出现，自称「零号导师」。
“HTML 是你构造世界的第一把钥匙。世界的每一栋建筑、每一个按钮，都是从这里开始的。”
他在空气中敲出第一段代码：
<!DOCTYPE html>
<html><head><title>林昊的第一个世界</title></head><body><h1>你好，前端世界！</h1><p>这是我创造的第一个段落。</p></body>
</html>
林昊惊讶地看到——地面浮现出一个光幕，自动加载出虚拟建筑的雏形，一行文字在空中显示。
教学详解
零号导师指着屏幕上的代码：
🌐 <!DOCTYPE html>
“这是HTML5的启动信号，它告诉系统：我要建造一个现代网页。”
🌍 <html> … </html>
“这是世界的根容器，所有内容必须包裹在它里面。”
🧠 <head> … </head>
“这是你网页的大脑，用于定义网页信息、编码格式、标题、外部资源等。”
示例子标签包括：
<title>：浏览器标签页显示的文字<meta charset="UTF-8">：定义编码，支持中文字符等
🦴 <body> … </body>
“这是身体，是用户真正能看到的部分。你所创造的一切——标题、图片、按钮——都写在这里。”
更多标签的魔法
导师弹指之间，更多代码浮现，并实时变为世界构件：
-
标题（从
<h1>到<h6>）<h1>主标题</h1> <h2>副标题</h2>“等级越小，权重越大，别滥用 h1，一个页面通常只该有一个。”
-
段落
<p><p>这是一个自然段。</p>“讲述文字的容器。”
-
超链接
<a><a href="https://origin.net">进入主城</a>“点击它，可以穿梭到另一个虚拟页面或区域。”
-
图像
<img><img src="avatar.png" alt="林昊头像" />“图像也是构件，但别忘了 alt，即使图像加载失败也能识别其内容。”
-
列表
<ul> / <ol> / <li><ul><li>剑</li><li>盾</li><li>治疗药水</li> </ul>“用于组织物品、任务列表、导航菜单等。”
-
容器标签
<div>&<span><div>这是一个块级容器</div> <span>这是一个行内容器</span>“div用于结构划分，span用于小范围包裹文字。虽然它们没有语义，但搭配 CSS，它们是布局的基础。”
语义化初探
导师一挥手，代码升级：
<header><h1>林昊的主页</h1>
</header><main><section><h2>我的故事</h2><p>我出生于灰域，但我想成为造梦师。</p></section>
</main><footer><p>联系我：linhao@origin.net</p>
</footer>
“header、main、section、footer 是 HTML5 的语义标签，它们更清晰地表述结构，利于 SEO、无障碍阅读、团队协作。”
🎯 练习任务
创建一个属于你自己的虚拟页面，必须包含：
- 页面标题（
<title>） - 一个主标题（
<h1>） - 至少两段文字（
<p>） - 一个链接（
<a>） - 一个图片（
<img>） - 一个列表（
<ul>或<ol>）
（你可以用 Notepad 或 VS Code 编写，并在浏览器中打开它！）
🔮 预告：第二章《CSS秘典：色彩与布局的力量》
林昊将面对「默认样式怪」的混乱攻击，学习如何用 CSS 控制样式、美化页面与定位元素——他的代码世界，将第一次染上色彩！