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