The Odin Project 教程：HTML 链接与图像完全指南

原创于 2025-06-04 09:01:43 发布

· 202 阅读

版权

The Odin Project 教程：HTML 链接与图像完全指南

curriculum TheOdinProject/curriculum: The Odin Project 是一个免费的在线编程学习平台，这个仓库是其课程大纲和教材资源库，涵盖了Web开发相关的多种技术栈，如HTML、CSS、JavaScript以及Ruby on Rails等。项目地址: https://gitcode.com/gh_mirrors/cu/curriculum

前言

在构建网页时，链接和图像是两个最基础也最重要的元素。链接让互联网真正成为"网"，而图像则让网页从单调的文本变得丰富多彩。本文将深入探讨如何在 HTML 中正确使用链接和图像，涵盖从基础概念到高级用法的所有内容。

链接基础

锚元素（Anchor Element）

链接在 HTML 中通过 <a> 标签（锚元素）创建。最基本的链接语法如下：

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

其中 href 属性（hypertext reference 的缩写）指定了链接的目标地址。如果不提供 href 属性，这个锚元素就只是一个普通的文本，不会产生任何链接效果。

链接打开方式

默认情况下，链接会在当前浏览器标签页中打开。但有时我们希望链接在新标签页中打开，这时可以使用 target 属性：

<a href="https://example.com" target="_blank">在新标签页打开</a>

然而，仅使用 target="_blank" 会带来潜在的安全风险。恶意网站可以通过 window.opener API 访问原始页面。为了防范这种称为"反向标签劫持"（Reverse Tabnabbing）的攻击，我们应该同时使用 rel 属性：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  安全地在新标签页打开
</a>

noopener：阻止新打开的页面通过 JavaScript 访问原始页面
noreferrer：额外隐藏来源页面的信息（HTTP Referer 头）

链接类型详解

绝对链接 vs 相对链接

绝对链接

绝对链接包含完整的 URL，包括协议（如 https://）、域名和路径。它用于链接到外部网站：

<a href="https://www.example.com/about">关于我们</a>

相对链接

相对链接只包含路径部分，用于链接到同一网站内的其他页面。它相对于当前页面的位置来解析：

<a href="about.html">关于页面</a>
<a href="pages/contact.html">联系页面</a>
<a href="../images/logo.png">上一级目录的图片</a>

相对链接的路径解析规则：

目录结构最佳实践

合理的目录结构能显著提高项目的可维护性。推荐的结构如下：

项目根目录/
├── index.html
├── images/
│   └── logo.png
└── pages/
    ├── about.html
    └── contact.html

在这种结构中：

从 index.html 链接到 about.html：href="pages/about.html"
从 about.html 链接回首页：href="../index.html"
从 about.html 引用图片：href="../images/logo.png"

图像使用指南

基本图像标签

HTML 使用 <img> 元素嵌入图像，这是一个自闭合标签（不需要闭合标签）。最基本的用法：

<img src="path/to/image.jpg" alt="描述文字">

关键属性

src：图像路径（可以是绝对或相对路径）
alt：替代文本，在图像无法显示时展示，也对屏幕阅读器很重要
width/height：指定图像的显示尺寸（单位是像素，不需要加"px"）

<img src="images/dog.jpg" alt="一只可爱的金毛犬" width="300" height="200">

图像路径解析

与链接类似，图像路径也分为绝对路径和相对路径。在复杂的目录结构中，正确使用 ../ 来导航到上级目录非常重要。

例如，如果结构如下：

project/
├── index.html
├── images/
│   └── photo.jpg
└── blog/
    └── post.html

在 post.html 中引用 photo.jpg 应该使用：

<img src="../images/photo.jpg" alt="示例照片">

图像版权注意事项

在使用网络上的图像时，务必注意版权问题。推荐的做法：

使用明确标注为可自由使用的图像（如 Creative Commons 许可）
即使允许免费使用，也应按照要求署名（Attribution）
考虑使用专业的免费图库如 Unsplash、Pexels 等
在自己的项目中添加 README 文件说明图片来源

高级技巧与最佳实践

响应式图像

虽然本教程主要关注基础，但了解响应式图像的概念也很重要。可以通过以下方式实现：

<img src="image.jpg" 
     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 768px,
            1200px"
     alt="响应式图像示例">