HTML 完整开发教程 第6章

HTML 链接与图片

在网页中：

  • 链接（Link） 用于页面跳转

  • 图片（Image） 用于展示内容

几乎所有网站都离不开这两个核心元素。

本章将学习：

  • <a> 超链接标签

  • 链接的类型与用法

  • 路径（相对路径 / 绝对路径）

  • <img> 图片标签

  • 图片优化与 SEO

学习完本章，你将能够：

  • 构建网站页面之间的跳转

  • 插入并优化网页图片

  • 理解 URL 与路径关系

6.1 超链接标签 <a>

HTML 使用 <a>（anchor）创建链接。

基本语法：

<a href="URL">链接文本</a>

示例：

<a href="https://www.example.com">访问网站</a>

点击后浏览器会跳转到指定地址。

6.2 href 属性

href 表示：

👉 跳转目标地址

可以是：

类型

示例

网页

https://example.com

文件

about.html

邮箱

mailto:test@example.com

电话

tel:123456

示例：

<a href="about.html">关于我们</a>

6.3 打开方式（target）

默认情况下：

👉 链接在当前页面打开

如果想新窗口打开：

<a href="https://example.com" target="_blank">新窗口打开</a>

常见值：

值

说明

_self

当前页面（默认）

_blank

新标签页

6.4 页面内部跳转（锚点）

可以在页面内跳转。

第一步：设置锚点

<h2 id="section1">第一部分</h2>

第二步：创建链接

<a href="#section1">跳转到第一部分</a>

点击后页面会滚动到对应位置。

6.5 下载链接

可以让链接变成下载文件。

<a href="file.zip" download>下载文件</a>

浏览器会直接下载，而不是打开。

6.6 邮箱与电话链接

邮箱

<a href="mailto:test@example.com">发送邮件</a>

电话

<a href="tel:123456789">拨打电话</a>

常用于移动端网页。

6.7 图片标签 <img>

HTML 使用 <img> 显示图片。

基本语法：

<img src="图片地址" alt="描述">

示例：

<img src="image.jpg" alt="风景图片">

6.8 src 属性

src 表示：

👉 图片路径

可以是：

类型

示例

本地图片

images/a.jpg

网络图片

https://example.com/a.jpg

6.9 alt 属性（非常重要）

alt 表示：

👉 图片描述（替代文本）

示例：

<img src="logo.png" alt="网站Logo">

作用：

  • 图片加载失败时显示

  • 屏幕阅读器使用

  • SEO 优化

👉 必须写！

6.10 图片尺寸

可以设置图片大小：

<img src="a.jpg" width="200" height="100">

注意：

  • 单位默认是 px

  • 建议只设置一个，保持比例

6.11 图片路径详解

路径分为两种：

1 相对路径（推荐）

相对于当前文件：

<img src="images/a.jpg">

目录结构：

index.html
images/
  a.jpg

2 绝对路径

完整地址：

<img src="https://example.com/a.jpg">

3 上级路径

<img src="../a.jpg">

说明：

../ 表示返回上一级目录

6.12 图片作为链接

可以把图片变成链接：

<a href="https://example.com">
  <img src="a.jpg" alt="图片">
</a>

点击图片即可跳转。

6.13 常见图片格式

格式

特点

JPG

适合照片

PNG

支持透明

GIF

支持动画

WebP

高压缩（推荐）

6.14 图片优化建议

优化非常重要！

1 控制大小

避免：

5MB 图片

推荐：

< 200KB

2 使用合适格式

  • 照片 → JPG

  • 图标 → PNG / SVG

  • 网站 → WebP

3 使用 alt

<img src="seo.jpg" alt="HTML 教程图片">

有助于：

  • SEO 排名

  • 无障碍访问

6.15 HTML 链接 + 图片示例

完整示例：

<h1>我的网站</h1>

<p>
访问 <a href="https://example.com">官网</a>
</p>

<h2>图片展示</h2>

<img src="images/photo.jpg" alt="风景图" width="300">

<h2>点击图片跳转</h2>

<a href="https://example.com">
  <img src="images/logo.png" alt="Logo">
</a>

6.16 常见错误

❌ 忘写 alt

<img src="a.jpg">

❌ 路径错误

<img src="img/a.jpg">

但实际目录是：

images/a.jpg

❌ 使用本地绝对路径

<img src="C:\Users\xxx\a.jpg">

👉 浏览器无法访问

本章小结

在本章中，我们学习了：

链接：

<a href="">
target
锚点链接
下载链接

图片：

<img src="" alt="">
width / height

路径：

相对路径
绝对路径
../ 上级路径

现在你已经可以：

✔ 构建页面跳转
✔ 插入图片
✔ 理解 URL 与路径

下一章预告

下一章我们将学习：HTML 列表与表格

包括：

  • 有序列表

  • 无序列表

  • 自定义列表

  • 表格结构

  • 表格合并单元格

这是构建页面布局的重要基础。