链接与图像

本章将介绍如何在网页中添加超链接和图像，这是网页最基本也是最重要的功能之一。

超链接

超链接是HTML最重要的特性之一，它允许用户从一个页面跳转到另一个页面。

基本语法

<a> 标签用于创建超链接，href 属性指定链接目标：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接示例</title>
</head>
<body>
    <!-- 基本链接 -->
    <a href="https://www.baidu.com">访问百度</a>
    
    <!-- 链接到其他网页 -->
    <a href="https://www.example.com/page.html">访问示例页面</a>
    
    <!-- 链接到本地文件 -->
    <a href="about.html">关于我们</a>
    
    <!-- 链接到子目录中的文件 -->
    <a href="pages/contact.html">联系方式</a>
</body>
</html>

链接属性

target 属性

target 属性指定链接的打开方式：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>target属性示例</title>
</head>
<body>
    <!-- 在当前窗口打开（默认值） -->
    <a href="https://www.baidu.com" target="_self">在当前窗口打开</a>
    
    <!-- 在新窗口打开 -->
    <a href="https://www.baidu.com" target="_blank">在新窗口打开</a>
    
    <!-- 在父框架中打开 -->
    <a href="https://www.baidu.com" target="_parent">在父框架中打开</a>
    
    <!-- 在顶层框架中打开 -->
    <a href="https://www.baidu.com" target="_top">在顶层框架中打开</a>
</body>
</html>

常用值

_self：默认值，在当前窗口打开
_blank：在新窗口或新标签页打开（最常用）

title 属性

title 属性为链接添加提示文字，鼠标悬停时显示：

html

<!-- 鼠标悬停时会显示提示文字 -->
<a href="https://www.baidu.com" title="点击访问百度搜索引擎">百度</a>

download 属性

download 属性指定链接为下载链接：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>download属性示例</title>
</head>
<body>
    <!-- 下载文件，使用原文件名 -->
    <a href="files/document.pdf" download>下载PDF文件</a>
    
    <!-- 下载文件，指定新文件名 -->
    <a href="files/document.pdf" download="使用手册.pdf">下载使用手册</a>
    
    <!-- 下载图片 -->
    <a href="images/photo.jpg" download="我的照片.jpg">下载图片</a>
</body>
</html>

链接类型

外部链接

链接到其他网站：

html

<!-- 外部链接通常使用完整URL -->
<a href="https://www.github.com">GitHub</a>
<a href="https://www.google.com">Google</a>

内部链接

链接到同一网站内的其他页面：

html

<!-- 相对路径链接 -->
<a href="index.html">首页</a>
<a href="about.html">关于我们</a>
<a href="products/list.html">产品列表</a>
<a href="../index.html">返回上级</a>

锚点链接

链接到同一页面的特定位置：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>锚点链接示例</title>
</head>
<body>
    <!-- 导航菜单 -->
    <nav>
        <!-- href值以#开头，后面跟目标元素的id -->
        <a href="#section1">第一章</a> |
        <a href="#section2">第二章</a> |
        <a href="#section3">第三章</a>
    </nav>
    
    <hr>
    
    <!-- 目标元素需要有对应的id -->
    <h2 id="section1">第一章</h2>
    <p>这是第一章的内容...</p>
    <p>这是第一章的内容...</p>
    <p>这是第一章的内容...</p>
    
    <h2 id="section2">第二章</h2>
    <p>这是第二章的内容...</p>
    <p>这是第二章的内容...</p>
    <p>这是第二章的内容...</p>
    
    <h2 id="section3">第三章</h2>
    <p>这是第三章的内容...</p>
    <p>这是第三章的内容...</p>
    <p>这是第三章的内容...</p>
    
    <!-- 返回顶部 -->
    <a href="#top">返回顶部</a>
</body>
</html>

邮件链接

点击后打开邮件客户端：

html

<!-- 发送邮件到指定地址 -->
<a href="mailto:example@email.com">发送邮件</a>

<!-- 带主题的邮件 -->
<a href="mailto:example@email.com?subject=咨询问题">发送咨询邮件</a>

<!-- 带主题和内容的邮件 -->
<a href="mailto:example@email.com?subject=咨询问题&body=您好，我想咨询...">发送邮件</a>

<!-- 多个收件人 -->
<a href="mailto:email1@example.com,email2@example.com">群发邮件</a>

<!-- 抄送和密送 -->
<a href="mailto:main@example.com?cc=copy@example.com&bcc=hidden@example.com">发送邮件</a>

电话链接

点击后拨打电话（移动端有效）：

html

<!-- 拨打电话 -->
<a href="tel:+8613800138000">拨打电话：138-0013-8000</a>

<!-- 发送短信 -->
<a href="sms:+8613800138000">发送短信</a>

<!-- 带内容的短信 -->
<a href="sms:+8613800138000?body=你好">发送问候短信</a>

链接状态

链接有不同的状态，可以通过CSS设置不同状态的样式：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链接状态示例</title>
    <style>
        /* 未访问的链接 */
        a:link {
            color: blue;
        }
        /* 已访问的链接 */
        a:visited {
            color: purple;
        }
        /* 鼠标悬停 */
        a:hover {
            color: red;
        }
        /* 正在被点击 */
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com">示例链接</a>
</body>
</html>

图像

图像是网页中重要的视觉元素，可以让网页更加生动。

基本语法

<img> 标签用于在网页中嵌入图像，是单标签：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图像示例</title>
</head>
<body>
    <!-- 基本图像 -->
    <img src="photo.jpg" alt="照片">
    
    <!-- 网络图片 -->
    <img src="https://example.com/image.jpg" alt="网络图片">
    
    <!-- 本地图片 -->
    <img src="images/logo.png" alt="网站Logo">
</body>
</html>

图像属性

src 属性（必需）

src（source）属性指定图像的路径：

html

<!-- 相对路径 -->
<img src="photo.jpg">
<img src="images/photo.jpg">
<img src="../images/photo.jpg">

<!-- 绝对路径 -->
<img src="https://www.example.com/images/photo.jpg">
<img src="/images/photo.jpg">

alt 属性（必需）

alt（alternate）属性提供图像的替代文本，当图像无法显示时显示：

html

<!-- 图像无法显示时，会显示alt中的文字 -->
<img src="photo.jpg" alt="这是一张风景照片">

<!-- 对于装饰性图片，alt可以为空 -->
<img src="decoration.png" alt="">

重要提示

alt 属性对于以下情况非常重要：

图像加载失败时显示替代文字
屏幕阅读器为视障用户朗读内容
搜索引擎理解图像内容

width 和 height 属性

指定图像的宽度和高度：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图像尺寸示例</title>
</head>
<body>
    <!-- 使用像素值 -->
    <img src="photo.jpg" alt="照片" width="300" height="200">
    
    <!-- 只设置一个值，另一个会自动按比例计算 -->
    <img src="photo.jpg" alt="照片" width="300">
    
    <!-- 使用百分比（相对于父元素） -->
    <img src="photo.jpg" alt="照片" width="50%">
    
    <!-- 使用style属性设置（推荐） -->
    <img src="photo.jpg" alt="照片" style="width: 300px; height: 200px;">
</body>
</html>

最佳实践

建议使用CSS的 width 和 height 属性，而不是HTML属性，这样可以更好地控制样式。

title 属性

title 属性为图像添加提示文字，鼠标悬停时显示：

html

<!-- 鼠标悬停时显示提示文字 -->
<img src="photo.jpg" alt="风景照片" title="点击查看大图">

loading 属性

loading 属性控制图像的懒加载行为：

html

<!-- 懒加载：图像进入视口时才加载 -->
<img src="photo.jpg" alt="照片" loading="lazy">

<!-- 立即加载（默认值） -->
<img src="photo.jpg" alt="照片" loading="eager">

图像格式

常见的图像格式：

格式	特点	适用场景
JPEG/JPG	有损压缩，文件小	照片、复杂图像
PNG	无损压缩，支持透明	图标、Logo、需要透明的图像
GIF	支持动画	动画图片
WebP	压缩率高，支持透明和动画	现代网页（推荐）
SVG	矢量图形，可缩放	图标、Logo、简单图形
AVIF	最新格式，压缩率最高	现代浏览器

html

<!-- 不同格式的图像 -->
<img src="photo.jpg" alt="JPEG照片">
<img src="logo.png" alt="PNG图标">
<img src="animation.gif" alt="GIF动画">
<img src="illustration.webp" alt="WebP图像">
<img src="icon.svg" alt="SVG矢量图">

响应式图像

使用 srcset 和 sizes 属性实现响应式图像：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式图像示例</title>
</head>
<body>
    <!-- srcset：提供不同尺寸的图像源 -->
    <!-- sizes：指定不同条件下图像的显示尺寸 -->
    <img 
        src="photo-800.jpg"
        srcset="photo-400.jpg 400w,
                photo-800.jpg 800w,
                photo-1200.jpg 1200w"
        sizes="(max-width: 600px) 400px,
               (max-width: 1000px) 800px,
               1200px"
        alt="响应式照片">
    
    <!-- 使用picture元素提供不同格式的图像 -->
    <picture>
        <!-- AVIF格式（最新，压缩率最高） -->
        <source srcset="photo.avif" type="image/avif">
        <!-- WebP格式 -->
        <source srcset="photo.webp" type="image/webp">
        <!-- 兜底格式 -->
        <img src="photo.jpg" alt="照片">
    </picture>
</body>
</html>

图像作为链接

将图像放在 <a> 标签中，可以创建可点击的图像链接：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图像链接示例</title>
</head>
<body>
    <!-- 点击图片跳转到指定页面 -->
    <a href="https://www.example.com">
        <img src="logo.png" alt="网站Logo">
    </a>
    
    <!-- 点击图片查看大图 -->
    <a href="photo-large.jpg" target="_blank">
        <img src="photo-small.jpg" alt="点击查看大图">
    </a>
</body>
</html>

图像映射

使用 <map> 和 <area> 创建可点击的图像区域：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图像映射示例</title>
</head>
<body>
    <!-- usemap属性关联map元素 -->
    <img src="planets.jpg" alt="行星图" usemap="#planetmap">
    
    <!-- 定义图像映射 -->
    <map name="planetmap">
        <!-- 矩形区域 -->
        <area shape="rect" coords="0,0,100,100" href="sun.html" alt="太阳">
        
        <!-- 圆形区域 -->
        <area shape="circle" coords="200,150,50" href="earth.html" alt="地球">
        
        <!-- 多边形区域 -->
        <area shape="poly" coords="300,0,350,50,300,100,250,50" href="moon.html" alt="月亮">
    </map>
</body>
</html>

figure和figcaption

<figure> 和 <figcaption> 用于语义化地包装图像和标题：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>figure示例</title>
</head>
<body>
    <!-- 图像和标题 -->
    <figure>
        <img src="photo.jpg" alt="风景照片">
        <figcaption>图1：美丽的风景</figcaption>
    </figure>
    
    <!-- 多张图片 -->
    <figure>
        <img src="photo1.jpg" alt="照片1">
        <img src="photo2.jpg" alt="照片2">
        <figcaption>图2：照片组合</figcaption>
    </figure>
    
    <!-- 代码示例也可以用figure -->
    <figure>
        <pre>
            <code>
function hello() {
    console.log("Hello!");
}
            </code>
        </pre>
        <figcaption>代码1：Hello函数</figcaption>
    </figure>
</body>
</html>

路径详解

相对路径

相对于当前文件位置的路径：

html

<!-- 当前目录 -->
<img src="photo.jpg">

<!-- 子目录 -->
<img src="images/photo.jpg">

<!-- 上级目录 -->
<img src="../photo.jpg">

<!-- 上两级目录 -->
<img src="../../photo.jpg">

<!-- 上级目录的子目录 -->
<img src="../images/photo.jpg">

绝对路径

完整的URL路径：

html

<!-- 完整URL -->
<img src="https://www.example.com/images/photo.jpg">

<!-- 网站根目录（以/开头） -->
<img src="/images/photo.jpg">

路径最佳实践

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>路径示例</title>
</head>
<body>
    <!-- 推荐的项目结构：
    project/
    ├── index.html
    ├── about.html
    ├── images/
    │   ├── logo.png
    │   └── photo.jpg
    └── css/
        └── style.css
    -->
    
    <!-- 在index.html中引用图片 -->
    <img src="images/logo.png" alt="Logo">
    
    <!-- 在about.html中引用图片 -->
    <img src="images/photo.jpg" alt="照片">
</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>
    <!-- 页面导航 -->
    <nav>
        <a href="#intro">简介</a> |
        <a href="#gallery">图库</a> |
        <a href="#contact">联系我们</a>
    </nav>
    
    <hr>
    
    <!-- 简介部分 -->
    <h1 id="intro">欢迎来到图片展示网站</h1>
    <p>这是一个展示<strong>链接</strong>和<strong>图像</strong>的示例网站。</p>
    
    <!-- Logo链接 -->
    <a href="index.html">
        <img src="images/logo.png" alt="网站Logo" width="100">
    </a>
    
    <hr>
    
    <!-- 图库部分 -->
    <h2 id="gallery">图片展示</h2>
    
    <figure>
        <img 
            src="https://picsum.photos/400/300" 
            alt="随机风景图" 
            width="400"
            loading="lazy"
            title="点击查看大图">
        <figcaption>图1：美丽风景</figcaption>
    </figure>
    
    <figure>
        <img 
            src="https://picsum.photos/400/300?random=2" 
            alt="随机风景图" 
            width="400"
            loading="lazy">
        <figcaption>图2：自然风光</figcaption>
    </figure>
    
    <hr>
    
    <!-- 联系方式 -->
    <h2 id="contact">联系我们</h2>
    <address>
        邮箱：<a href="mailto:contact@example.com">contact@example.com</a><br>
        电话：<a href="tel:+8613800138000">138-0013-8000</a>
    </address>
    
    <hr>
    
    <!-- 下载链接 -->
    <p>
        <a href="files/brochure.pdf" download="宣传手册.pdf">下载宣传手册</a>
    </p>
    
    <!-- 外部链接 -->
    <p>
        了解更多：<a href="https://developer.mozilla.org/zh-CN/" target="_blank" title="MDN Web Docs">MDN文档</a>
    </p>
    
    <!-- 返回顶部 -->
    <p><a href="#intro">返回顶部</a></p>
</body>
</html>

本章小结

本章我们学习了：

超链接：使用 <a> 标签创建链接，href 属性指定目标
链接类型：外部链接、内部链接、锚点链接、邮件链接、电话链接
链接属性：target、title、download
图像：使用 <img> 标签嵌入图像
图像属性：src、alt、width、height、loading
图像格式：JPEG、PNG、GIF、WebP、SVG
响应式图像：srcset、sizes、<picture>
路径：相对路径和绝对路径

下一章我们将学习列表与表格，了解如何展示结构化数据。

链接与图像 ​

超链接 ​

基本语法 ​

链接属性 ​

target 属性 ​

title 属性 ​

download 属性 ​

链接类型 ​

外部链接 ​

内部链接 ​

锚点链接 ​

邮件链接 ​

电话链接 ​

链接状态 ​

图像 ​

基本语法 ​

图像属性 ​

src 属性（必需） ​

alt 属性（必需） ​

width 和 height 属性 ​

title 属性 ​

loading 属性 ​

图像格式 ​

响应式图像 ​

图像作为链接 ​

图像映射 ​

figure和figcaption ​

路径详解 ​

相对路径 ​

绝对路径 ​

路径最佳实践 ​

综合示例 ​

本章小结 ​

下一章 ​

链接与图像

超链接

基本语法

链接属性

target 属性

title 属性

download 属性

链接类型

外部链接

内部链接

锚点链接

邮件链接

电话链接

链接状态

图像

基本语法

图像属性

src 属性（必需）

alt 属性（必需）

width 和 height 属性

title 属性

loading 属性

图像格式

响应式图像

图像作为链接

图像映射

figure和figcaption

路径详解

相对路径

绝对路径

路径最佳实践

综合示例

本章小结

下一章