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

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

2.1 文本标签的魔法咒语

一、专治「文字乱跑症」的

标签

想象一下，你刚写了一段优美的文字，结果浏览器像个熊孩子一样把它们堆成一团——这时候就需要

标签施展「定身咒」了！
作用：把文字关进段落牢房，强制换行并保持间距。
语法：

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

搞笑案例：

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

（悄悄说：
是换行符，但

才是段落的正确打开方式哦！）

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

-

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

• ：老板级标题（最大号）

• ：部门经理标题

• …

• ：实习生标题（最小号）

规则：

• 一个页面只能有一个

  （老板只能有一个！）

• 标题嵌套要合理（别让实习生指挥老板）

搞笑示例：

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

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

和 是 HTML 的戏精组合：

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

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

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

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

使用场景：

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

互动挑战：用标签写段子

试着用

、

、 写一个关于程序员的搞笑段子，例如：

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

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

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

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

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

参数解读：

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

搞笑案例：

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

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

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

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

参数解读：

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

程序员专属梗：

<a href="mailto:[email protected]">
  给老板发邮件（内容：<em>世界那么大，我想...em>）
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 梦道具」
• 用

  治文字乱跑，用 玩穿越

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