PHP小码农

Appearance

链接与图片 ​

本节将详细介绍 HTML 中最重要的两个元素——超链接 <a> 和图片 <img>。学完本节，你将掌握链接和图片的创建方式、属性配置，以及路径（相对路径与绝对路径）的概念。

前置知识

阅读本节前，建议先了解：文本与标题

基础概念 ​

超链接（Hyperlink）是 Web 的核心特征——正是链接将分散的网页连接成一张信息网络。HTML 通过 <a>（Anchor，锚）标签创建超链接，用户点击链接即可跳转到其他页面或同一页面的不同位置。

图片是网页内容的重要组成部分。HTML 通过 <img>（Image，图片）标签嵌入图片资源。正确使用链接和图片是构建有意义网页的基本技能。

超链接 a 标签 ​

基本语法 ​

<a> 标签通过 href（Hypertext Reference，超文本引用）属性指定链接目标：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>超链接示例</title>
</head>
<body>
  <h1>超链接基础</h1>

  <!-- 最基本的链接：href 指定目标地址 -->
  <a href="https://www.google.com">访问 Google</a>

  <br><br>

  <!-- 链接可以包裹文本 -->
  <a href="https://developer.mozilla.org/zh-CN/">
    访问 MDN Web 文档
  </a>

  <br><br>

  <!-- 链接也可以包裹其他行内元素 -->
  <a href="https://example.com">
    <strong>点击这里</strong>了解更多
  </a>
</body>
</html>

a 标签的常用属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>a 标签属性示例</title>
</head>
<body>
  <h1>a 标签的常用属性</h1>

  <!-- target="_blank"：在新窗口/标签页中打开链接 -->
  <a href="https://example.com" target="_blank">在新窗口打开</a>

  <br><br>

  <!-- title：鼠标悬停时显示的提示文字 -->
  <a href="https://example.com"
     title="这是一个示例网站">悬停查看提示</a>

  <br><br>

  <!-- rel="noopener noreferrer"：安全建议，配合 target="_blank" 使用 -->
  <a href="https://example.com"
     target="_blank"
     rel="noopener noreferrer">安全的外部链接</a>

  <br><br>

  <!-- download 属性：点击后下载而非导航 -->
  <a href="document.pdf" download>下载 PDF 文件</a>

  <br><br>

  <!-- 锚点链接：跳转到页面内指定位置 -->
  <a href="#section2">跳转到第二章</a>

  <br><br>

  <!-- 邮件链接 -->
  <a href="mailto:contact@example.com">发送邮件</a>

  <br><br>

  <!-- 电话链接（移动端直接拨号） -->
  <a href="tel:+861012345678">拨打电话</a>
</body>
</html>

a 标签属性详解 ​

属性作用示例
href链接目标地址href="https://example.com"
target打开方式target="_blank"（新窗口）
title悬停提示文字title="点击查看详情"
rel与目标的关系rel="noopener noreferrer"
download触发下载download="filename.pdf"
hreflang目标页面语言hreflang="en"

target 属性详解 ​

值说明
_self（默认）在当前窗口/标签页中打开
_blank在新的窗口/标签页中打开
_parent在父框架中打开
_top在整个窗口中打开（跳出所有框架）

安全提示

使用 target="_blank" 打开外部链接时，务必添加 rel="noopener noreferrer" 属性。否则，新打开的页面可以通过 window.opener 控制原页面，存在安全风险。

锚点链接（页面内跳转） ​

通过 href="#id" 可以跳转到同一页面中具有对应 id 的元素：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>锚点链接示例</title>
</head>
<body>
  <!-- 导航：点击跳转到对应章节 -->
  <nav>
    <a href="#introduction">简介</a> |
    <a href="#chapter1">第一章</a> |
    <a href="#chapter2">第二章</a> |
    <a href="#chapter3">第三章</a>
  </nav>

  <hr>

  <!-- 各章节通过 id 标识位置 -->
  <section id="introduction">
    <h2>简介</h2>
    <p>这是简介部分。点击导航链接可以跳到对应章节。</p>
  </section>

  <section id="chapter1">
    <h2>第一章</h2>
    <p>这是第一章的内容。可以使用 <a href="#introduction">返回简介</a> 链接跳回顶部。</p>
  </section>

  <section id="chapter2">
    <h2>第二章</h2>
    <p>这是第二章的内容。锚点链接让页面内导航变得简单。</p>
  </section>

  <section id="chapter3">
    <h2>第三章</h2>
    <p>这是第三章的内容。也可以链接到其他页面的锚点，如
       <a href="other.html#section1">其他页面的第一章</a>。</p>
  </section>

  <!-- 回到顶部的链接 -->
  <hr>
  <p><a href="#">回到顶部</a></p>
</body>
</html>

路径的概念 ​

在 HTML 中，href 和 src 属性需要指定资源的位置，这就是路径（Path）。理解路径是链接和图片操作的基础。

绝对路径与相对路径 ​

html
<!-- 绝对路径：完整的 URL，从协议开始 -->
<a href="https://www.example.com/page/about.html">绝对路径链接</a>
<img src="https://www.example.com/images/logo.png" alt="Logo">

<!-- 相对路径：相对于当前文件的位置 -->
<a href="about.html">同一目录下的文件</a>
<a href="pages/about.html">子目录 pages 中的文件</a>
<a href="../index.html">上级目录中的文件</a>
<img src="images/logo.png" alt="Logo">

相对路径规则 ​

假设当前文件是 website/pages/article.html，项目结构如下：

website/
├── index.html          ← 首页
├── images/
│   ├── logo.png        ← 图片
│   └── photo.jpg       ← 图片
├── css/
│   └── style.css       ← 样式
└── pages/
    ├── article.html    ← 当前文件
    └── about.html      ← 同级文件
目标文件相对路径（从 article.html）说明
about.htmlabout.html同目录
index.html../index.html上级目录
logo.png../images/logo.png上级目录的 images 子目录
style.css../css/style.css上级目录的 css 子目录

路径速记

  • ./ 表示当前目录（通常省略）
  • ../ 表示上级目录
  • / 从网站根目录开始（如 /images/logo.png）

图片 img 标签 ​

基本语法 ​

<img> 是一个自闭合标签（Void Element），通过 src 属性指定图片路径，alt 属性提供替代文本：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片示例</title>
</head>
<body>
  <h1>图片标签基础</h1>

  <!-- 最基本的图片 -->
  <img src="photo.jpg" alt="风景照片">

  <br><br>

  <!-- 指定宽度的图片 -->
  <img src="photo.jpg" alt="风景照片" width="600">

  <br><br>

  <!-- 指定宽度和高度的图片 -->
  <img src="photo.jpg" alt="风景照片" width="600" height="400">
</body>
</html>

img 标签的常用属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>img 标签属性示例</title>
</head>
<body>
  <h1>img 标签属性</h1>

  <!-- src：图片路径（必需） -->
  <img src="images/photo.jpg" alt="照片">

  <br><br>

  <!-- alt：替代文本（强烈推荐） -->
  <img src="logo.png" alt="公司 Logo">

  <br><br>

  <!-- width/height：指定尺寸 -->
  <img src="photo.jpg" alt="照片" width="400" height="300">

  <br><br>

  <!-- loading="lazy"：懒加载，图片进入视口时才加载 -->
  <img src="large-image.jpg" alt="大图" loading="lazy">

  <br><br>

  <!-- decoding="async"：异步解码，不阻塞页面渲染 -->
  <img src="large-image.jpg" alt="大图" decoding="async">

  <br><br>

  <!-- 图片链接：用 a 标签包裹 img -->
  <a href="https://example.com">
    <img src="banner.jpg" alt="点击查看详情" width="600">
  </a>
</body>
</html>

img 标签属性详解 ​

属性作用是否必需说明
src图片路径是可以是相对路径或绝对路径
alt替代文本强烈推荐图片无法显示时的文字描述
width宽度否建议设置以避免布局偏移
height高度否建议设置以避免布局偏移
loading加载策略否lazy（懒加载）/ eager（立即加载）
decoding解码方式否async（异步）/ sync（同步）
title提示文字否鼠标悬停时显示

alt 替代文本的重要性 ​

alt 属性是图片最重要的属性之一，它在以下场景发挥作用：

html
<!-- 1. 图片加载失败时显示替代文字 -->
<img src="missing.jpg" alt="产品展示图">
<!-- 如果 missing.jpg 不存在，浏览器会显示"产品展示图" -->

<!-- 2. 屏幕阅读器会朗读 alt 文本 -->
<img src="chart.png" alt="2024 年度销售趋势柱状图">

<!-- 3. 搜索引擎通过 alt 理解图片内容 -->
<img src="product.jpg" alt="iPhone 15 Pro Max 黑色 256GB">

<!-- 4. 装饰性图片使用空 alt -->
<img src="divider.png" alt="">
<!-- alt="" 告诉屏幕阅读器忽略此图片 -->

<!-- 错误！缺少 alt 属性 -->
<!-- <img src="photo.jpg"> -->

不要省略 alt

缺少 alt 属性不仅影响无障碍访问，还会降低搜索引擎优化（SEO）效果。每张图片都应该有有意义的 alt 文本。纯装饰性图片使用 alt=""。

figure 与 figcaption ​

为图片添加说明文字时，使用 <figure> 和 <figcaption>：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片说明示例</title>
</head>
<body>
  <h1>带说明的图片</h1>

  <!-- figure 包裹图片和说明，figcaption 提供说明文字 -->
  <figure>
    <img src="architecture.jpg"
         alt="上海东方明珠塔全景"
         width="600">
    <figcaption>图 1：上海东方明珠塔，摄于 2024 年春季</figcaption>
  </figure>

  <!-- figure 也可以包裹多张图片 -->
  <figure>
    <img src="photo1.jpg" alt="产品正面" width="280">
    <img src="photo2.jpg" alt="产品背面" width="280">
    <figcaption>图 2：产品正反面视图对比</figcaption>
  </figure>

  <!-- figure 不仅可以包裹图片，还可以包裹代码、引用等 -->
  <figure>
    <pre><code>console.log('Hello!');</code></pre>
    <figcaption>代码示例：控制台输出</figcaption>
  </figure>
</body>
</html>

详细说明 ​

链接的最佳实践 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>链接最佳实践</title>
</head>
<body>
  <h1>链接最佳实践</h1>

  <!-- 外部链接：添加 target="_blank" 和 rel="noopener noreferrer" -->
  <h2>外部链接</h2>
  <p>
    访问
    <a href="https://developer.mozilla.org/zh-CN/"
       target="_blank"
       rel="noopener noreferrer">
      MDN Web 文档
    </a>
    获取更多资料。
  </p>

  <!-- 内部链接：在当前页面打开 -->
  <h2>内部链接</h2>
  <p>
    查看 <a href="/about">关于我们</a> 页面了解更多信息。
  </p>

  <!-- 提供明确的链接文字 -->
  <h2>链接文字规范</h2>
  <p>
    <a href="/products">查看全部产品</a>
    <!-- 推荐：链接文字明确描述了目标 -->

    <!-- 不推荐：链接文字模糊 -->
    <!-- <a href="/products">点击这里</a> -->
    <!-- <a href="/products">了解更多</a> -->
  </p>

  <!-- 下载链接：使用 download 属性 -->
  <h2>文件下载</h2>
  <p>
    <a href="files/report.pdf" download="年度报告.pdf">
      下载年度报告（PDF）
    </a>
  </p>
</body>
</html>

响应式图片 ​

HTML5 提供了响应式图片的解决方案，可以根据屏幕尺寸加载不同大小的图片：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>响应式图片示例</title>
</head>
<body>
  <h1>响应式图片</h1>

  <!-- 使用 srcset 根据屏幕宽度加载不同图片 -->
  <img src="photo-default.jpg"
       srcset="photo-480w.jpg 480w,
               photo-800w.jpg 800w,
               photo-1200w.jpg 1200w"
       sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
       alt="响应式加载的风景照片">

  <hr>

  <!-- 使用 picture 元素实现艺术指导 -->
  <picture>
    <!-- 小屏幕使用方形裁剪 -->
    <source media="(max-width: 600px)"
            srcset="photo-square.jpg">
    <!-- 大屏幕使用横向构图 -->
    <source media="(min-width: 601px)"
            srcset="photo-landscape.jpg">
    <!-- 不支持 picture 的浏览器使用此默认图 -->
    <img src="photo-default.jpg"
         alt="在不同设备上显示不同裁剪的照片">
  </picture>
</body>
</html>

实战示例 ​

下面是一个包含丰富链接和图片的实际网页：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旅游攻略 - 北京三日游</title>
</head>
<body>
  <header>
    <h1>北京三日游攻略</h1>
    <nav>
      <a href="#day1">第一天</a> |
      <a href="#day2">第二天</a> |
      <a href="#day3">第三天</a> |
      <a href="#tips">旅行贴士</a>
    </nav>
  </header>

  <main>
    <p>北京，中国的首都，拥有丰富的历史文化遗产和现代化的都市风貌。</p>

    <hr>

    <!-- 第一天 -->
    <section id="day1">
      <h2>第一天：历史古迹</h2>

      <figure>
        <img src="forbidden-city.jpg"
             alt="故宫午门，红墙金瓦，游客络绎不绝"
             width="600"
             loading="lazy">
        <figcaption>图 1：故宫博物院</figcaption>
      </figure>

      <p>
        第一天安排游览<em>故宫</em>和<em>天安门广场</em>。故宫是中国
        最大的古代宫殿建筑群，建议预留半天时间。
      </p>
      <p>
        官方购票网站：
        <a href="https://www.dpm.org.cn"
           target="_blank"
           rel="noopener noreferrer">
          故宫博物院官网
        </a>
      </p>
    </section>

    <hr>

    <!-- 第二天 -->
    <section id="day2">
      <h2>第二天：长城之旅</h2>

      <figure>
        <img src="great-wall.jpg"
             alt="八达岭长城蜿蜒在山脊上，秋天的红叶点缀其间"
             width="600"
             loading="lazy">
        <figcaption>图 2：八达岭长城</figcaption>
      </figure>

      <p>
        <strong>不到长城非好汉</strong>——第二天前往八达岭长城。
        建议早起出发，避开人流高峰。
      </p>
      <p>
        交通方式：乘坐
        <a href="https://www.12306.cn" target="_blank" rel="noopener noreferrer">
          市郊铁路 S2 线
        </a>，从
        <code>黄土店站</code>出发，直达八达岭。
      </p>
    </section>

    <hr>

    <!-- 第三天 -->
    <section id="day3">
      <h2>第三天：文艺漫步</h2>

      <figure>
        <img src="798-art.jpg"
             alt="798 艺术区的涂鸦墙和工业建筑"
             width="600"
             loading="lazy">
        <figcaption>图 3：798 艺术区</figcaption>
      </figure>

      <p>
        第三天可以到<strong>798 艺术区</strong>和<strong>南锣鼓巷</strong>
        感受北京的文艺气息。
      </p>
    </section>

    <hr>

    <!-- 旅行贴士 -->
    <section id="tips">
      <h2>旅行贴士</h2>
      <ul>
        <li>故宫每周一闭馆，请提前规划行程。</li>
        <li>地铁是最便捷的出行方式，推荐办理交通卡。</li>
        <li>下载离线地图以备不时之需。</li>
      </ul>
      <p>
        更多旅行建议请参考
        <a href="https://travel.example.com/beijing"
           target="_blank"
           rel="noopener noreferrer">
          北京旅游指南
        </a>。
      </p>
    </section>

    <!-- 底部信息 -->
    <footer>
      <p><small>版权所有 2024 旅游攻略博客</small></p>
      <p><a href="mailto:contact@travel-blog.com">联系我们</a></p>
    </footer>
  </main>
</body>
</html>

注意事项 ​

  • <a> 标签的 href 属性是必需的——没有 href 的 <a> 不会作为链接工作
  • 使用 target="_blank" 时务必添加 rel="noopener noreferrer"
  • 图片的 alt 属性不能省略——描述性 alt 文本对 SEO 和无障碍至关重要
  • 指定图片的 width 和 height，避免图片加载时的布局偏移（CLS）
  • 使用 loading="lazy" 对非首屏图片进行懒加载，提升页面性能
  • 不要用 <a> 包裹块级元素（如 <div>、<p>），这是不符合规范的
  • 链接文字应明确描述目标，避免使用"点击这里"这类模糊文字

最佳实践 ​

  • 外部链接使用 target="_blank" rel="noopener noreferrer"
  • 链接文字应清晰描述目标内容，如"查看产品详情"而非"点击这里"
  • 为所有有意义的图片提供描述性的 alt 文本
  • 使用 <figure> 和 <figcaption> 为图片添加标题说明
  • 大图片设置 width/height 和 loading="lazy" 提升性能
  • 装饰性图片使用 alt=""
  • 使用相对路径引用项目内的资源，使用绝对路径引用外部资源

下一节

继续学习：列表与表格

参考链接 ​