【技术专题】HTML5 网页技术 - HTML5 链接与图片

大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

HTML5（在第二阶段目录里）

HTML5 链接与图片

一、超链接 <a>

用来创建超链接，核心属性是 href，表示链接目标。

1. href

<a href="https://www.example.com">外部网站</a>
<a href="about.html">站内页面</a>
<a href="mailto:test@example.com">发邮件</a>
<a href="tel:+8613800000000">打电话</a>
<a href="file.pdf" download>下载文件</a>

• href="https://..."：完整网址。
• href="about.html"：相对路径，链接到当前目录下的页面。
• href="mailto:..."：打开邮件客户端。
• href="tel:..."：手机拨号。
• download：提示下载。

2. target

控制链接在哪里打开：

值	含义
_self	当前窗口/标签页打开，默认值
_blank	新窗口/新标签页打开
_parent	父框架中打开
_top	顶层框架中打开
自定义名称	在指定名称的窗口/框架中打开

示例：

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

注意：使用 target="_blank" 时，建议加上：

rel="noopener noreferrer"

防止新页面通过 window.opener 操作原页面，并避免发送 Referer。

3. 锚点链接

锚点用于跳转到页面中的某个位置。HTML5 推荐用 id。

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

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

跨页面锚点：

<a href="about.html#contact">跳到"关于我们"的联系方式</a>

在 about.html 中：

<h2 id="contact">联系方式</h2>

点击后 URL 会变成类似：

about.html#contact

也可以做"回到顶部"：

<a href="#top">回到顶部</a>
<h1 id="top">页面标题</h1>

---

二、图片 <img>

是空元素，不需要闭合标签。

<img src="images/logo.png" alt="公司 Logo" title="公司 Logo" width="200" height="80">

1. src

图片的路径或 URL，必需。

<img src="images/pic.jpg" alt="风景图">
<img src="https://example.com/pic.jpg" alt="网络图片">

2. alt

替代文本，非常重要。

• 图片加载失败时显示。
• 屏幕阅读器会读出来。
• 有利于 SEO。
• 装饰性图片可以写空：alt=""。

<img src="logo.png" alt="公司 Logo">
<img src="line.png" alt="">

3. title

鼠标悬停时显示的提示文字。

<img src="logo.png" alt="公司 Logo" title="返回首页">

注意：title 不是 alt 的替代品，无障碍主要依赖 alt。

4. width 和 height

设置图片宽高，单位默认是像素，HTML 属性中只写数字，不写 px。

<img src="logo.png" alt="Logo" width="200" height="80">

建议：

• 只设一个宽或高，另一个按比例自动缩放。
• 或者用 CSS 控制。
• 同时设置 width 和 height 有助于浏览器提前预留空间，减少页面跳动。
• 响应式图片常用：

img {
  max-width: 100%;
  height: auto;
  display: block;
}

HTML5 还支持响应式图片：

<img
  src="small.jpg"
  srcset="small.jpg 480w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 1200px"
  alt="示例图片"
  loading="lazy"
>

loading="lazy" 可以实现懒加载。

"HTML5 图片懒加载"简单说就是：图片不要一开始全部加载，等用户快滚动到它、快要看见它时，再加载这张图片。

---

三、相对路径与绝对路径

1. 绝对路径

绝对路径通常指完整 URL，或从网站根目录开始的路径。

完整 URL：

<a href="https://www.example.com/about.html">关于我们</a>
<img src="https://www.example.com/images/logo.png" alt="Logo">

根路径：

<img src="/images/logo.png" alt="Logo">

/images/logo.png 表示从网站根目录开始找，不是从当前文件所在目录开始。

2. 相对路径

相对路径是相对于当前 HTML 文件的位置。

假设目录结构：

project/
├── index.html
├── about.html
├── images/
│   └── logo.png
└── pages/
    └── contact.html

在 index.html 中：

<img src="images/logo.png" alt="Logo">
<a href="about.html">关于我们</a>
<a href="pages/contact.html">联系我们</a>

在 pages/contact.html 中访问图片：

<img src="../images/logo.png" alt="Logo">

常用符号：

写法	含义
logo.png	当前目录下的文件
./logo.png	当前目录下的文件
images/logo.png	当前目录下的 images 子目录
../logo.png	上一级目录下的文件
../../logo.png	上两级目录下的文件
/images/logo.png	网站根目录下的 images 目录
https://...	完整绝对 URL

注意：

• 相对路径是相对于当前 HTML 文档，不是相对于 CSS 文件。CSS 中的 url() 是相对于 CSS 文件自身。
• 不要使用本地绝对路径，如 C:\Users\...\logo.png，上线后会失效。
• 路径大小写要统一，Linux 服务器区分大小写。

---

四、综合示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 链接与图片</title>
</head>
<body>
  <h1 id="top">HTML5 链接与图片</h1>

  <p>
    <a href="#pic">跳转到图片</a> |
    <a href="about.html">关于我们</a> |
    <a href="https://python222.java1234.com" target="_blank">
      python222
    </a>
  </p>

  <h2 id="pic">图片示例</h2>
  <img
    src="images/logo.jpg"
    alt="网站 Logo"
    title="网站 Logo 2"
    width="200"
    height="80"
  >

  <p><a href="#top">回到顶部</a></p>
</body>
</html>

一句话总结：

<a> 负责跳转，重点是 href、target 和 #id 锚点；<img> 负责显示图片，重点是 src、alt、title 和宽高；路径要分清绝对路径、根路径和相对路径。