链接与图片

这是什么：<a> 标签 = 链接，用 href 指定跳转目标；<img> 标签 = 图片，用 src 指定图片地址。

为什么用：链接和图片是网页的两大主角——没有它们，网页就是一潭死水：点不动，也放不进一张图。

如何用：先写一个带 href 的链接，再插一张 <img> 图片，页面里点「▶ 运行」看跳转和显示效果。

链接：<a> 标签

a = anchor（锚点）。href 属性指定跳转目标：

<a href='https://www.runoob.com'>去菜鸟教程</a>
<a href='about.html'>关于我们（站内页面）</a>
<a href='#top'>跳到页面顶部</a>

target 属性：在哪打开

<a href='https://www.runoob.com' target='_blank'>新标签页打开</a>

• 不写 target：当前页跳转（默认）
• target='_blank'：新标签页打开（站外链接推荐这样，用户不丢失你的页面）

图片：<img> 标签

img = image。它是自闭合标签——没有结束标签、不包内容，信息全写在属性里：

<img src='图片地址' alt='图片描述' width='200'>

图文组合实战

<a href='https://www.runoob.com'>
  <img src='https://images.pexels.com/photos/23408576/pexels-photo-23408576.jpeg?auto=compress&cs=tinysrgb&w=320' alt='菜鸟教程'>
</a>

图片包在 <a> 里 = 点击图片跳转，网页 Banner 广告就是这么做的。

❓ 常见问题

Q1：点链接没反应，或者跳出「找不到该文件」？

HTTP ERROR 404

原因：href 里的地址写错了——域名拼错、站内路径不对，或者站外链接忘了加 https://，浏览器把它当成本站文件去找。 修复三步：① 检查 href 值的拼写；② 站外网址必须带 https:// 开头；③ 站内相对路径确认目标文件和当前页面在同一目录。 举一反三：链接失效永远先看 href 的值本身，别急着改别的。

Q2：图片不显示，页面只出现一个小碎图标？

[碎裂小图标] 图片挂了时，显示我

原因：src 指向的地址不存在——文件名拼错、路径写错、图片被移动或删除了。浏览器找不到图，只好画出碎图标，并显示 alt 里的替代文字。 修复三步：① 核对 src 的文件名和路径；② 把图片和 HTML 放到对应目录再刷新；③ 实在拿不到图时，至少让 alt 把话说清楚。 举一反三：alt 不是摆设，是每张图的"救命稻草"，写图必写它。

Q3：#top 这种井号开头的链接是干嘛的？

原因：# 表示"跳到本页内部的某个位置"（锚点）。#top 是个特例：即使页面上没有叫 top 的元素，浏览器也会默认回到页面最顶上，所以常被拿来当"回到顶部"按钮。 修复三步：① 想跳到页内某处，给那个元素设置对应的 id；② href 写成 #id名字；③ 点击验证是否滚到目标位置。 举一反三：长文章开头放"回到顶部"、目录跳章节，用的都是井号锚点。

Q4：<img src='x.png'>说明文字</img> 为什么说明没包进图里？

原因：img 是自闭合标签，天生不包内容，</img> 会被浏览器直接忽略，中间的文字被当成普通文本渲染到图片旁边。 修复三步：① 删掉 </img>；② 把说明写进 alt 属性；③ 更长的说明放在图片后面的 <p> 里。 举一反三：见到自闭合标签（img、br、hr）就别写结束标签，也别指望它们包内容。

⚠️ 新手翻车现场

翻车一：忘写 alt，图片挂了页面留白

<img src='https://example.com/no-such-banner.png' width='300'>

翻车现象：

一个带碎裂图标的小空框，旁边一个字都没有——
用户完全不知道这里原本是什么。

逐行分析：第 1 行有两个坑：src 指向的地址不存在（域名拼错、图被删或路径写错），浏览器只好画碎图标；又因为没写 alt，连替代文字都没有，访问者和搜索引擎都猜不出这图是啥。教训：alt 是图片的"遗言"，每张图都要写。正确写法：

<img src='https://images.pexels.com/photos/10931687/pexels-photo-10931687.jpeg?auto=compress&cs=tinysrgb&w=320' alt='夏日池塘：青蛙排队晒太阳' width='300'>

翻车二：给 img 写结束标签包文字

<img src='https://images.pexels.com/photos/1370740/pexels-photo-1370740.jpeg?auto=compress&cs=tinysrgb&w=320'>我的青蛙照片</img>

翻车现象：

图片正常显示，但「我的青蛙照片」几个字出现在图片外面（旁边），
并没有变成图片的说明。

逐行分析：第 1 行把 img 当成了双标签用——它是自闭合标签，不包内容；浏览器忽略 </img>，把中间那串字当普通文本摆在图片旁边。说明文字的正确去处是 alt 属性。正确写法：

<img src='https://images.pexels.com/photos/1370740/pexels-photo-1370740.jpeg?auto=compress&cs=tinysrgb&w=320' alt='我的青蛙照片'>

翻车三：href 忘写 https://

<a href='www.runoob.com'>去菜鸟教程</a>

翻车现象：

点击后报「找不到页面」——浏览器把整串字当成了本站文件路径。

逐行分析：第 1 行的 href 值没有协议前缀，浏览器不会自动补 https://，而是把它当成相对路径拼在当前地址后面去找，当然找不到。站外链接必须写全。正确写法：

<a href='https://www.runoob.com'>去菜鸟教程</a>

📦 完整小示例

把链接和图片装进同一张页面，存成 links.html：

<h1>呱小吉的友情小站</h1>

<p>想系统学编程？去
  <a href='https://www.runoob.com' target='_blank'>菜鸟教程</a>
  看看（新标签页打开，本页不丢）。
</p>

<hr>

<a href='https://www.runoob.com'>
  <img src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%2260%22%3E%3Crect width=%22120%22 height=%2260%22 rx=%228%22 fill=%22%232dd4a7%22/%3E%3Ctext x=%2260%22 y=%2238%22 text-anchor=%22middle%22 font-size=%2218%22 fill=%22white%22%3E呱小吉%3C/text%3E%3C/svg%3E' alt='呱小吉的绿色名牌，点击去菜鸟教程' width='120'>
</a>
<p>↑ 名牌包在 a 里，整块图都能点。</p>

<p><a href='#top'>回到顶部 ↑</a></p>

人工校验：h1 与三个 p 均开闭配对；外层 a 完整包住自闭合的 img，先开后关；所有属性引号成对；a 内嵌 img 属合法嵌套。

运行后在浏览器会看到：

一行大标题「呱小吉的友情小站」；
一段文字，其中「菜鸟教程」是蓝色可点链接；
一条水平分割线；
线下一块绿色小名牌图片，鼠标移上去变成小手，点击整块图都会跳转；
最下面一行「回到顶部 ↑」链接，点击后页面滚回最顶端。

逐段中文精讲

• 第 1 行：<h1> 页面大标题。
• 第 3~7 行：一个 <p> 里嵌着 <a>——链接可以和普通文字混排；target='_blank' 让站外链接在新标签页打开，用户不丢你的页面。
• 第 9 行：<hr> 把"文字链接"和"图片链接"两个板块隔开。
• 第 11~13 行：<a> 完整包住 <img>，图片变成大按钮；img 是自闭合标签，所以 a 的闭合标签紧随其后。
• 第 14~15 行：#top 跳回页顶——就算没有叫 top 的元素，浏览器也会默认回到最上面。

跑通后做个小实验：把 img 的 src 改成 'https://example.com/no-such.png'（公开域名上确实没有的地址）——图片挂了，alt 文字顶班出场，链接照样能点。这就是 alt 的双重价值：给人看，也给搜索引擎看。

🎯 什么时候用它

• 导航栏与友情链接：站内页面互跳用相对路径 href；跳去别人的网站记得加 target='_blank'。
• Banner 广告与商品卡片：img 包进 a，整张图可点——电商和门户站的经典套路。
• 无障碍与搜索收录：每张图写清楚 alt，图片挂了有字看，读屏用户和搜索引擎也都认识你的图。

📝 本章小结

• <a href> 管跳转：网址、站内页面、# 锚点三种目标；站外建议加 target='_blank'。
• <img src> 管显图：自闭合不包内容；alt 是挂图时的替代文字，必写。
• img 包在 a 里 = 可点击的图片。
• 记忆锚点：链接是门，图片是窗——门通向别处（href 指路），窗用来看风景（src 搬图），玻璃碎了还有 alt 这行小字挡着。

小练习

1. 做三个链接：分别跳转到菜鸟教程、你喜欢的网站、#top
2. 用运行框画一张图片（照抄上面的 data:image 写法改改文字），配上 alt

下一章：列表与表格 🐸