# 网页三件套：
# HTML → 骨架（结构）
# CSS  → 皮肤（样式）
# JS   → 肌肉（交互）

# 类比：
# HTML = 房子的框架（墙、门、窗）
# CSS  = 装修（颜色、布局、装饰）
# JS   = 电器（开关灯、空调遥控）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, HTML!</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

<h1>一级标题</h1>    <!-- 最大 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>    <!-- 最小 -->

<p>这是一个段落。段落之间有间距。</p>
<p>另一个段落。</p>

<strong>加粗（语义：重要内容）</strong>
<b>加粗（仅样式）</b>
<em>斜体（语义：强调）</em>
<i>斜体（仅样式）</i>

<br>             <!-- 换行 -->
<hr>             <!-- 水平线 -->

<span>行内容器（用于包裹小段文字）</span>
<div>块级容器（用于布局分组）</div>

&lt;    → <      小于号
&gt;    → >      大于号
&amp;   → &      和号
&nbsp;  →         空格
&copy;  → ©       版权符号

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步：安装 Python</li>
    <li>第二步：写 Hello World</li>
    <li>第三步：学 Flask</li>
</ol>

<!-- 描述列表 -->
<dl>
    <dt>Python</dt>
    <dd>一种优雅的编程语言</dd>
    <dt>Flask</dt>
    <dd>轻量级 Web 框架</dd>
</dl>

<!-- 超链接 -->
<a href="https://python.org">Python 官网</a>
<a href="/about">关于我们</a>
<a href="#section2">跳转到第二节</a>
<a href="mailto:hi@example.com">发邮件</a>
<a href="https://python.org" target="_blank">新窗口打开</a>

<!-- 图片 -->
<img src="photo.jpg" alt="风景照片" width="600" height="400">
<img src="/static/images/logo.png" alt="Logo">

<!-- 图片链接 -->
<a href="https://python.org">
    <img src="python-logo.png" alt="Python">
</a>

💡 alt 属性非常重要！

• 图片加载失败时显示替代文字
• 屏幕阅读器为视障用户朗读 alt 内容
• 搜索引擎用 alt 理解图片内容（SEO）

<img src="cat.jpg" alt=""> ❌ 空 alt
<img src="cat.jpg" alt="一只橘色猫咪坐在沙发上"> ✅ 描述性 alt

6. 表格

<table border="1" cellpadding="8">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>90</td>
            <td>95</td>
            <td>88</td>
        </tr>
        <tr>
            <td>小红</td>
            <td colspan="2">暂缺</td>  <!-- 跨 2 列 -->
            <td>92</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均</td>
            <td>90</td>
            <td>95</td>
            <td>90</td>
        </tr>
    </tfoot>
</table>

7. 表单

<form action="/register" method="POST">
    <!-- 文本输入 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" required>

    <!-- 邮箱 -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>

    <!-- 密码 -->
    <label for="pwd">密码：</label>
    <input type="password" id="pwd" name="password" minlength="6">

    <!-- 数字 -->
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="1" max="150">

    <!-- 单选 -->
    <p>性别：</p>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">女</label>

    <!-- 复选 -->
    <p>爱好：</p>
    <input type="checkbox" name="hobby" value="python" id="h1">
    <label for="h1">Python</label>
    <input type="checkbox" name="hobby" value="flask" id="h2">
    <label for="h2">Flask</label>

    <!-- 下拉 -->
    <label for="city">城市：</label>
    <select id="city" name="city">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>

    <!-- 多行文本 -->
    <label for="bio">简介：</label>
    <textarea id="bio" name="bio" rows="5" placeholder="介绍一下自己..."></textarea>

    <!-- 文件 -->
    <label for="avatar">头像：</label>
    <input type="file" id="avatar" name="avatar" accept="image/*">

    <!-- 隐藏字段 -->
    <input type="hidden" name="csrf_token" value="abc123">

    <!-- 提交 -->
    <button type="submit">注册</button>
    <button type="reset">重置</button>
</form>

📋 Input 类型速查

8. 语义化标签

HTML5 引入了语义化标签——让标签名表达内容的含义，而非仅仅是样式。

<!-- 语义化页面结构 -->
<header>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>

<main>
    <article>
        <h1>文章标题</h1>
        <time datetime="2026-05-12">2026年5月12日</time>
        <p>文章内容...</p>

        <section>
            <h2>第一节</h2>
            <p>...</p>
        </section>

        <section>
            <h2>第二节</h2>
            <p>...</p>
        </section>
    </article>

    <aside>
        <h3>侧边栏</h3>
        <p>相关链接...</p>
    </aside>
</main>

<footer>
    <p>&copy; 2026 我的网站</p>
</footer>

💡 语义化的好处：

• SEO：搜索引擎能更好地理解页面结构
• 可访问性：屏幕阅读器能正确导航
• 可维护性：代码更易读，一看就知道哪里是什么
• 标准：HTML5 推荐的最佳实践

9. 今日练习

🏋️ 练习 1：个人主页

# 用语义化标签创建一个个人主页：
# - header：导航栏
# - main：自我介绍 + 技能列表 + 项目展示
# - aside：联系方式侧边栏
# - footer：版权信息

🏋️ 练习 2：注册表单

# 创建一个完整的注册表单：
# - 用户名（必填，3-20字符）
# - 邮箱（必填，email 类型验证）
# - 密码（必填，至少6位）
# - 性别（单选）
# - 兴趣（复选）
# - 个人简介（多行文本）
# - 头像（文件上传）

🏋️ 练习 3：课程表

# 用表格创建一个课程表：
# - 5行（周一到周五）× 8列（第1-8节课）
# - 有些课需要合并单元格（如体育课连上2节）
# - 表头用 thead，内容用 tbody

10. 今日小结

🚀 明日预告：Day 68 — CSS 基础

HTML 定义了骨架，但页面还很"朴素"。明天学 CSS——给网页穿上衣服：颜色、字体、间距、布局。从盒模型到 Flexbox/Grid，让你的页面从"能看"变成"好看"！