HTML 链接与图片：<a> 与 <img> 标签

HTML 构建了互联网的骨架，而 <a> 标签（超链接）与 <img> 标签（图片）则是让网页“活起来”的核心元素。前者将各个页面串联成网，后者赋予网页视觉表现力。掌握这两个标签的用法，是编写实用网页的第一步。

一、使用 <a> 标签创建超链接

<a> 标签定义了超链接，用于从一张页面链接到另一张页面。它最核心的属性是 href（Hypertext Reference），用于指定链接的目标地址。

1. 创建基础文本链接。
   在代码中 输入 <a> 标签，并在 href 属性中填入目标 URL，在标签对之间 填写 用户可见的文本。

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

   浏览器会将这段文本渲染为蓝色并带有下划线，用户 点击 后即可跳转。

2. 设置链接在新标签页打开。
   默认情况下，链接会在当前窗口跳转。为了保持用户停留在原页面，添加 target 属性并赋值为 _blank。

   <a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>

3. 配置安全性属性。
   当使用 target="_blank" 时，为了防止新页面通过 JavaScript 恶意操作原页面，务必同时 添加 rel="noopener noreferrer" 属性。

   <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
       安全的新窗口链接
   </a>

4. 创建页面内部锚点链接。
   用于跳转到当前页面的特定位置（例如长文的目录跳转）。

   • 第一步：给目标元素 设置 id 属性。

     <h2 id="section1">第一章</h2>

   • 第二步：在链接的 href 中 使用 # 加上该 ID。

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

5. 生成功能性链接。
   href 不仅可以接网址，还可以接其他协议。

   • 编写邮件链接：使用 mailto: 协议。

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

   • 编写电话链接：使用 tel: 协议（主要在移动端有效）。

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

二、使用 <img> 标签插入图片

与 <a> 不同，<img> 标签是自闭合标签（空元素），不需要结束标签。它的核心属性是 src（Source，源文件路径）和 alt（Alternative，替代文本）。

1. 插入基础图片。
   在代码中 输入 <img 标签，指定 src 为图片的网络地址或本地路径。

   <img src="photo.jpg">

2. 添加替代文本。
   务必 设置 alt 属性。当图片加载失败、网络缓慢或用户使用屏幕阅读器时，浏览器会显示这段文字，这对无障碍访问至关重要。

   <img src="photo.jpg" alt="一张夕阳下的海滩照片">

3. 定义图片尺寸。
   使用 width（宽）和 height（高）属性控制显示大小，单位默认为像素。

   • 设置具体数值：

     <img src="photo.jpg" alt="海滩照片" width="500" height="300">

   • 注意：如果只设置其中一个，另一个会按原始比例自动缩放。建议同时设置两个属性以减少页面布局的抖动（CLS）。

4. 启用延迟加载。
   为了提升页面加载速度，特别是当页面上有很多图片时，添加 loading="lazy" 属性。这会让浏览器仅在图片滚动到视口附近时才加载。

   <img src="photo.jpg" alt="海滩照片" loading="lazy">

三、组合使用：图片作为链接

在网页设计中，经常需要 点击 图片跳转到新页面，例如 Logo 跳转到首页。只需将 <img> 标签 嵌套 在 <a> 标签内部即可。

1. 嵌套标签。
   将 <img> 标签放置在 <a> 和 </a> 之间。

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

2. 优化显示效果。
   默认情况下，作为链接的图片周围可能会出现蓝色边框。在现代开发中，通常通过 CSS 去除边框，但如果需要在 HTML 中快速处理，可以 添加 border="0"（仅作演示，推荐使用 CSS 控制）。

四、详解文件路径

正确引用文件是链接和图片显示的前提。路径主要分为绝对路径和相对路径。

绝对路径

包含协议（如 https://）的完整网络地址，或者从根目录开始的完整磁盘路径。它指向的位置是固定的。

• 使用场景：引用外部网站的资源（如 CDN 图片库、其他网站链接）。
• 示例：

  <img src="https://www.cdn.com/images/logo.png">
  <a href="https://www.baidu.com">百度</a>

相对路径

相对于当前 HTML 文件所在位置的路径。这是引用本地项目文件的标准方式。

假设当前 HTML 文件位于 D:\project\index.html，目录结构如下：

D:\project\
├── index.html
├── images\
│   └── photo.jpg
└── pages\
    └── about.html

五、属性速查表

为了方便快速查阅，以下是两个标签最常用属性的总结。