第二章：标签大狂欢：从基础到变形

第二章：标签大狂欢：从基础到变形

2.1 文本标签的魔法咒语

一、专治「文字乱跑症」的 <p> 标签

想象一下，你刚写了一段优美的文字，结果浏览器像个熊孩子一样把它们堆成一团——这时候就需要 <p> 标签施展「定身咒」了！
作用：把文字关进段落牢房，强制换行并保持间距。
语法：

<p>这是一段被 <em>温柔包裹</em> 的文字</p>

搞笑案例：

<p>程序员的浪漫：<br>
你是我永不溢出的栈，<br>
是我命中注定的异常捕获。</p>

（悄悄说：<br> 是换行符，但 <p> 才是段落的正确打开方式哦！）

二、标题标签的「身高排行榜」

<h1>-<h6> 就像标签界的篮球队，从姚明到郭敬明依次排开：

• <h1>：老板级标题（最大号）
• <h2>：部门经理标题
• …
• <h6>：实习生标题（最小号）

规则：

• 一个页面只能有一个 <h1>（老板只能有一个！）
• 标题嵌套要合理（别让实习生指挥老板）

搞笑示例：

<h1>震惊！程序员的头发竟然...</h1>
<h2>第一章：脱发的十万种理由</h2>
<h3>1.1 甲方爸爸的终极奥义</h3>

三、斜体与加粗的「抢戏二人组」

<em> 和 <strong> 是 HTML 的戏精组合：

• <em>：假装柔弱（默认斜体）

  台词：“人家只是轻轻强调一下啦~”

• <strong>：硬核警告（默认加粗）

  台词：“注意！前方高能！”

使用场景：

<p>老板说：<strong>今晚必须上线！</strong>（潜台词：<em>否则扣工资</em>）</p>

互动挑战：用标签写段子

试着用 <p>、<h1>、<em> 写一个关于程序员的搞笑段子，例如：

<h1>程序员的自我修养</h1>
<p>
  当你发现 <em>代码能跑</em>，<br>
  那叫 <strong>奇迹</strong>；<br>
  当你发现 <em>代码优雅</em>，<br>
  那叫 <strong>魔法</strong>！
</p>

2.2 图片与链接的「穿越门」

一、图片标签 <img>：会说话的猫片

<img> 就像哆啦 A 梦的任意门，能把图片传送到网页上：

<img src="cat.jpg" alt="此处应有猫片" width="200">

参数解读：

• src：图片地址（可以是本地文件或网络链接）
• alt：图片挂掉时显示的文字（比如“猫片加载失败，主人正在抢救！”）
• width：图片宽度（高度会自动按比例缩放）

搞笑案例：

<img src="https://example.com/cat-scream.jpg" 
     alt="土拨鼠尖叫：为什么又要改需求！">

二、链接标签 <a>：网页传送门

<a> 是 HTML 的虫洞，可以连接到任何网页、文件甚至邮箱：

<a href="https://www.example.com" target="_blank">点我穿越</a>

参数解读：

• href：目标地址（宇宙坐标）
• target="_blank"：在新窗口打开（避免用户迷路）

程序员专属梗：

<a href="mailto:boss@example.com">
  给老板发邮件（内容：<em>世界那么大，我想...</em>）
</a>

三、图片+链接=「点击有惊喜」

把 <img> 塞进 <a> 里，可以制作会跳转的图片按钮：

<a href="https://www.example.com">
  <img src="button.png" alt="点击有惊喜">
</a>

搞笑案例：

<a href="https://www.bilibili.com">
  <img src="play-button.jpg" alt="点击观看土拨鼠尖叫全集">
</a>

避坑指南：别让图片和链接「离家出走」

1. 图片路径错误 → 显示小红叉（俗称「叉叉怪」）
   • 解决方案：用 Chrome 控制台检查 404 Not Found 错误
2. 忘记写 alt → 盲人用户听到“图片”（毫无意义）
   • 搞笑补偿：写 alt="此处应有彩蛋" 引发好奇

互动挑战：制作「愚人节陷阱网页」

用图片和链接做一个整蛊页面，比如：

<img src="warning.jpg" alt="警告：点击会爆炸！">
<a href="https://www.google.com">我不信！</a>

（实际跳转到 Google，假装爆炸效果需要配合 JavaScript 哦~）

本章总结：

• 文本标签是 HTML 的灵魂画手
• 图片和链接是网页的「哆啦 A 梦道具」
• 用 <p> 治文字乱跑，用 <a> 玩穿越

下一章，我们将学习如何用列表和表格搭建「数据游乐场」，准备好迎接强迫症的终极考验吧！ 🎢