综合练习：个人主页

这是什么：综合实战 = 把前面 7 章的骨架、文本、链接图片、列表表格、表单一次性拼成一张完整页面。

为什么用：恭喜走到这里！这一章不用新知识——不把前 7 章全部拼起来，你只会写片段，还不会写一整页。

如何用：照着任务清单逐条往空文件里加，页面里点「▶ 运行」随时看效果。

任务清单

你的页面要包含：

• 完整骨架（DOCTYPE / html / head / body）
• <title> 写上你的名字
• <h1> 大标题 + <h2> 两个小节标题
• 一段自我介绍（含 <strong> 或 <em> 强调）
• <img> 头像（可以照抄下面的画图代码）
• 技能清单（<ul> 或 <ol>）
• 一张「我的日程」表格
• 联系表单（姓名 + 留言框 + 提交按钮）
• 至少一个链接跳到你喜欢的网站

参考答案（先自己做，再对照！）

<!DOCTYPE html>
<html lang='zh-CN'>
  <head>
    <meta charset='UTF-8'>
    <title>呱呱的个人主页</title>
  </head>
  <body>
    <img
      src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2245%22 fill=%22%232dd4a7%22/%3E%3Ctext x=%2250%22 y=%2262%22 text-anchor=%22middle%22 font-size=%2240%22%3E🐸%3C/text%3E%3C/svg%3E'
      alt='呱呱的头像' width='100'
    >
    <h1>你好，我是呱呱</h1>
    <p>一只<em>热爱编程</em>的小青蛙，目前正在修炼 <strong>HTML</strong> 神功。</p>

    <h2>🛠️ 我的技能</h2>
    <ul>
      <li>HTML（入门中）</li>
      <li>游泳（精通）</li>
      <li>吃虫（大师级）</li>
    </ul>

    <h2>📅 本周日程</h2>
    <table border='1'>
      <tr><th>时间</th><th>安排</th></tr>
      <tr><td>上午</td><td>学 HTML</td></tr>
      <tr><td>下午</td><td>练习打字</td></tr>
      <tr><td>晚上</td><td>睡大觉</td></tr>
    </table>

    <h2>💬 给我留言</h2>
    <form>
      <p><input type='text' placeholder='你的名字'></p>
      <p><textarea rows='3' placeholder='想对我说的话…'></textarea></p>
      <button type='submit'>发送</button>
    </form>

    <p>友情链接：<a href='https://www.runoob.com' target='_blank'>菜鸟教程</a></p>
  </body>
</html>

自查清单

对照检查你的页面：

• 中文没有乱码（meta charset 写了吗？）
• 标题层级正确（只有一个 h1）
• 图片挂了有 alt 兜底
• 表格用了 th 做表头
• 表单的 radio 正确分组

❓ 常见问题

Q1：任务清单的元素都写了，页面上却缺一两块？

（技能列表有，日程表格和留言表单却不见了）

原因：九成是某个标签没闭合，把后面的兄弟板块"吞"进去了——比如 form 忘写 </form>，它后面的内容全被当成表单的一部分。 修复三步：① F12 → Elements 面板从上往下数板块，找到第一个消失的位置；② 检查它前面那个板块的标签是否都闭合；③ 补全后刷新。 举一反三：后一个板块消失，先查前一个板块的闭合——吞内容的永远是前面的没关门的标签。

Q2：页面拼完后想改个字，越改越乱？

原因：上百行的页面不看注释和缩进，结构根本看不清，改错位置的几率直线上升。 修复三步：① 给每个板块前后加注释，如 <!-- 技能区 -->；② 按嵌套层级缩进，body 里的内容统一缩一层；③ 动手前先复制一份备份。 举一反三：页面一复杂，注释和缩进就是救生索，写的时候就加上，别等乱了再补。

Q3：头像那串 data:image 开头的长代码是什么？能删吗？

原因：那是"数据 URI"写法——把图片内容直接编码进了代码里，所以它不依赖任何外部文件，抄过来就能显示。删了它 src 就空了，头像直接挂掉。 修复三步：① 整串保留不动；② 只改 alt 和 width 这些外围属性；③ 以后想换成自己的照片，把 src 整串替换成图片地址。 举一反三：看不懂的长代码先别删，查清作用再动手。

Q4：提交表单后，地址栏冒出一串 %E5%91%B1... 乱码？

原因：不是错误——表单提交时中文会被"网址编码"，%E5 开头的就是中文字符的网址写法。 修复三步：① 知道这是正常现象，不是页面坏了；② 练习阶段不点真提交也不影响验证效果；③ 真要接住提交的数据，等学到后端再处理。 举一反三：以后见 %E5、%E4 开头的长串，第一反应：中文被编码了。

⚠️ 新手翻车现场

翻车一：忘写 </form>，友情链接被收编

<form>
  <p><input type='text' placeholder='你的名字'></p>
  <p><textarea rows='3'></textarea></p>
  <button type='submit'>发送</button>

<p>友情链接：<a href='https://www.runoob.com'>菜鸟教程</a></p>

翻车现象：

页面上链接倒是显示，但按 F12 一看，
它被塞进了 form 里面，成了表单的一部分。

逐行分析：第 5 行之后本该写 </form>，结果直接跳到了友情链接——浏览器把后续所有内容继续收进表单，直到文档结束。小页面看着没大事，一旦表单后面还要放别的板块，结构就全乱了。正确写法：

  <button type='submit'>发送</button>
</form>
<p>友情链接：<a href='https://www.runoob.com'>菜鸟教程</a></p>

翻车二：多行 img，属性写到了标签外面

<img
  src='https://images.pexels.com/photos/1370740/pexels-photo-1370740.jpeg?auto=compress&cs=tinysrgb&w=320'
  width='100'
>
alt='呱呱的头像'

翻车现象：

图片正常显示，但页面多出一行孤零零的文字：
alt='呱呱的头像'

逐行分析：第 4 行的 > 已经把标签关了门，第 5 行的 alt 落在了标签外面，成了裸文字被原样渲染。img 多行书写时，> 必须写在最后一个属性之后。正确写法：

<img
  src='https://images.pexels.com/photos/1370740/pexels-photo-1370740.jpeg?auto=compress&cs=tinysrgb&w=320'
  alt='呱呱的头像'
  width='100'
>

翻车三：板块标题也用 h1，一页出了两个主标题

<h1>你好，我是呱呱</h1>
<h1>我的技能</h1>
<ul>
  <li>HTML（入门中）</li>
</ul>

翻车现象：

页面看着都正常（都是大字），
但页面大纲里有两个"一级标题"，搜索引擎分不清哪个才是主页题。

逐行分析：第 2 行把板块标题也写成了 h1——h1 是全页唯一的"书名"，板块是"章节"，应该降一级用 h2。自查清单里"只有一个 h1"查的就是这个。正确写法：

<h2>我的技能</h2>

📦 完整小示例

一个浓缩版个人主页，八样武器全部上阵，存成 home.html：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>呱小吉的主页</title>
  </head>
  <body>
    <h1>你好，我是呱小吉</h1>
    <p>一只<strong>热爱写代码</strong>的小青蛙。</p>
    <h2>技能</h2>
    <ul>
      <li>HTML（入门）</li>
      <li>捉虫（大师）</li>
    </ul>
    <h2>联系我</h2>
    <form>
      <p><label>名字：<input type='text' placeholder='怎么称呼你'></label></p>
      <p><textarea rows='3' placeholder='想对我说的话'></textarea></p>
      <button type='submit'>发送</button>
    </form>
  </body>
</html>

人工校验：DOCTYPE 首行，html→head+body 依序嵌套；head 内 meta/title 闭合；body 内 h1/p/ul/h2/form 开闭配对；ul 含两个 li；form 内 label 包住 input、textarea 有闭合标签、button 在 form 内部；无交叉嵌套；无 script，无需脚本校验。

运行后在浏览器会看到：

标签页显示「呱小吉的主页」；
一行大标题「你好，我是呱小吉」，下面一句自我介绍，
其中「热爱写代码」加粗；
「技能」小节下是两个圆点列表项；
「联系我」小节是名字输入框、留言多行框和一个「发送」按钮。

逐段中文精讲

• 第 1~7 行：标准骨架四件套一次到位——DOCTYPE、根元素、head（编码加标题）、body 开门；第 5 行的 title 就是任务清单第 2 项"写上你的名字"。
• 第 8~9 行：h1 唯一大标题，加一句带 strong 强调的自我介绍，对应任务清单第 3、4 项。
• 第 10~14 行：h2 板块标题加 ul 技能清单，每个 li 是一项技能——想加技能就再添一行 li。
• 第 15~20 行：联系表单三件套：label 包住 input 让点击文字也能选中，textarea 收长留言且闭合标签不能省，button 负责提交。
• 第 21~22 行：按开门的相反顺序关门，先 body 后 html。

跑通后做个小实验：在 ul 里再加一行 <li>游泳（精通）</li>，刷新——列表自动多一项，圆点自动排好。这就是结构化标签的好处：内容交给标签，排版交给浏览器。

🎯 什么时候用它

• 求职/展示主页：把"技能清单"换成项目经历、"日程表"换成时间线，就是一个能发给别人的个人介绍页。
• 活动报名页：表单里补上 radio 选项和 date 生日框，就是一张完整的报名表。
• 毕业检测：以后学到 CSS 和 JavaScript，回过头拿这个页面当"模特"加皮肤、加交互——一个页面练完整个前端。

📝 本章小结

• 综合页 = 骨架 + 标题层级 + 文本 + 列表 + 表格 + 图片 + 表单 + 链接，按序排布。
• 板块消失先查上一个板块的标签闭合。
• h1 全页唯一，板块标题从 h2 往下排。
• 写完对照自查清单逐项打勾，比凭感觉靠谱。
• 记忆锚点：综合页面像整理行李箱——骨架是箱子，每个板块是一个收纳袋，标签闭合是拉链；一个拉链没拉好，整箱东西都要洒。

🎓 毕业赠言

8 章走完，你已经能独立写出结构完整的网页了！但你现在写的页面还很"朴素"——没有颜色、没有布局。

下一站：CSS 教程（筹备中），给网页穿上漂亮衣服 🎨

问题交流欢迎来 关于页 找我 🐸