前面两篇我们把文字排得像模像样了，但页面还是”死”的：不能点、没图看。真正让网页区别于 Word 文档的，正是链接和图片——一个负责”去别处”，一个负责”看见东西”。
这一篇就把这两个最核心的媒体标签拆开讲。
链接：互联网的”血管”
链接用 <a> 标签（anchor，锚点）。最基本的形式：
<a href="https://www.baidu.com">点我去百度</a>href（hypertext reference）是链接的目标地址，必填；- 标签中间的文字是用户能看到的、可点击的内容；
- 点击后浏览器跳转到
href指向的地方。
没有 href 的 <a> 只是一段普通文字，不能点。所以链接能不能点，全看 href 有没有值。如果暂时没地址，可以写 href="#" 占个位，但最好补全。
href 都能填什么
href 非常灵活，可以指向各种东西：
1. 跳到别的网站（绝对路径，带完整域名）
<a href="https://www.bilibili.com">去 B 站</a>2. 跳到本站其他页面（相对路径）
<a href="about.html">关于我们</a>
<a href="./news/list.html">新闻列表</a>
<a href="../index.html">返回首页</a>相对路径是”相对于当前文件的位置”：./ 是当前目录，../ 是上一级目录。新手容易搞混，记住一个诀窍：站在 html 文件的角度想”目标文件在哪”。比如当前在 news/a.html，要回根目录的 index.html，就是 ../index.html。
3. 跳到同一页面的某个位置（锚点）
<a href="#section2">跳到第二章</a>
<!-- 页面下方某个元素带上 id -->
<h2 id="section2">第二章</h2>点击后页面会平滑或瞬间滚动到 id="section2" 的元素处。做”回到顶部”按钮也用它：<a href="#top">回到顶部</a>，再给顶部元素加 id="top"。锚点在长文档（如本文）的目录里极常用。
4. 触发下载
<a href="file.zip" download>下载压缩包</a>加 download 属性，点击就下载而不是打开。还可以 download="改名.zip" 指定下载时的文件名。
5. 发邮件 / 打电话
<a href="mailto:hello@example.com">给我发邮件</a>
<a href="tel:10086">拨打 10086</a>mailto: 会唤起邮件客户端，tel: 在手机上会唤起拨号。
新窗口打开与安全保障
默认链接在当前标签页打开，跳走后原页面就没了。想在新标签页打开：
<a href="https://example.com" target="_blank">新窗口打开</a>但只写 target="_blank" 有安全风险：被打开的页面能通过 window.opener 控制你的原页面（比如偷偷跳转）。正确写法要加上 rel="noopener noreferrer"：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全的新窗口打开</a>这是现在的标准写法，务必养成习惯。noopener 切断 opener 关系，noreferrer 不发送来源信息（顺带也兼容老浏览器）。
图片：让页面”有画面”
图片用 <img> 标签，它是自闭合标签，没有结束标签：
<img src="cat.jpg" alt="一只橘猫趴在键盘上" />三个核心属性：
src（source）：图片地址，必填。可以是本地文件路径，也可以是网络 URL；alt（alternative text）：图片的替代文字。图片加载失败时显示它；屏幕阅读器会念它；搜索引擎靠它理解图片内容。强烈建议每张图都写 alt，既是无障碍要求，也利于 SEO；width/height：宽高，单位是像素。写上能避免页面加载时”抖动”（浏览器提前留好位置）。
装饰性图片（纯好看、无信息）可以用 alt="" 告诉屏幕阅读器”忽略它”，但有信息量的图一定要写清楚 alt。
src 填什么：路径 again
和链接一样，src 也分绝对和相对：
<!-- 网络图片 -->
<img src="https://example.com/logo.png" alt="网站 logo" />
<!-- 本地图片（相对路径） -->
<img src="./images/photo.jpg" alt="风景照" />小建议：把图片统一放 images/ 或 assets/ 文件夹，路径清晰好维护。绝对路径（带域名）的好处是不依赖当前文件位置，但换域名时要批量改；相对路径灵活但要算对层级。
图片尺寸与响应式
<img src="big.jpg" alt="大图" width="800" height="600" />写了固定宽高，图片会按这个尺寸显示。但如果只写 width，高度会按比例自动缩放，这很常用：
<img src="big.jpg" alt="大图" width="300" />想让图片”随屏幕大小自适应”，可以配合 CSS：
<img src="big.jpg" alt="大图" style="max-width: 100%; height: auto;" />max-width: 100% 保证图片不会超出容器宽度，手机上也不会撑破页面。这是移动端必备技巧。后面 CSS 篇会细讲响应式图片（srcset）。
图片懒加载：省流量、提速
很多页面图片很多，一次性全加载很慢。可以让图片”滚到哪再加载哪”：
<img src="photo.jpg" alt="照片" loading="lazy" />loading="lazy" 告诉浏览器”等用户快滚到这张图时再加载”。对长图文页面提速明显，强烈推荐。注意懒加载的图片最好也写宽高，避免加载时布局抖动。
用图片做链接：图也能点
把 <img> 包在 <a> 里面，图片就变成可点击的：
<a href="https://example.com">
<img src="banner.jpg" alt="点击进入活动页" />
</a>这种”图链接”在 Banner 广告、产品图跳转里天天见。记得给里面的 img 写 alt，描述”点了去哪”。
常见错误与排查
- 图片裂了：src 路径写错（最常见）——检查文件名、文件夹层级；图片没放到对应位置；网络图片地址失效或被防盗链拦截。调试时右键”检查”看 Network 里图片是不是 404；
- 链接点了没反应：href 漏了，或 href=”#” 被占；
- 新窗口被劫持：只写 target=“_blank” 没加 rel=“noopener”；
- alt 全空：无障碍和 SEO 受损，有信息量的图必须写；
- 移动端图片撑破：没写 max-width:100%。
动手小练习
- 做一个导航：三个
<a>分别跳”首页、文章、关于”，其中”关于”在新窗口安全打开； - 在页面放一张本地图片，写对 alt，并尝试故意写错 src 看裂图效果；
- 用锚点做一个”回到顶部”按钮；
- 给一张大图加
loading="lazy"和max-width:100%，在手机模拟器里看是否自适应； - 把一张图片包进
<a>，点击跳转到外部站点（记得 noopener）。
把它串起来：做一个图文导航页
做一个 guide.html：顶部用 <nav> 放三个链接（首页、文章列表、关于），其中”关于”用 target="_blank" 且带 rel="noopener noreferrer" 安全新开；页面里放两张本地图片，都写对 alt，其中一张用 loading="lazy"；做两个锚点：文末放”回到顶部”链接跳 #top，页面顶部元素加 id="top"；再把一张图片包进 <a> 做成可点击 Banner。做完用手机模拟器看图片是否自适应（记得 max-width:100%）。这一个练习覆盖了链接和图片的绝大多数日常用法。
新手常问（FAQ）
Q1：图片裂了（显示碎图）怎么办？
先检查 src 路径对不对（相对路径是相对当前 html 文件算的），再确认文件是否真的在那个位置。用开发者工具 Network 面板看图片是不是 404。
Q2：为什么新窗口打开的页面能控制我原来的页面？
只写 target="_blank" 时，新页面能通过 window.opener 操作原页面。加 rel="noopener noreferrer" 即可切断。
Q3：alt 写空字符串 alt="" 是不是没用？
不是。空字符串是告诉屏幕阅读器”这张图是装饰性的，忽略它”；有信息量的图才写具体描述。
这一篇你该记住的
链接 <a> 靠 href 决定去哪（绝对/相对/锚点 #id/mailto/tel/download），target="_blank" 必须配 rel="noopener noreferrer" 才安全；图片 <img> 是自闭标签，src 是地址、alt 是替代文字（必写，装饰图用空串）、width 可等比缩放，loading="lazy" 懒加载、max-width:100% 做响应式。图也能包进 <a> 变成可点击。
链接和图片让页面”活”了，但还有些”行和列交叉的数据”——价目表、成绩单、参数对比——用它们排最合适。下一篇我们专门讲 HTML 表格，把 table 这一大家子标签理顺。