HTML5超链接和图片基础用法详解

lichongyang

1 周前

好的，我整理了一份 HTML5 超链接 (<a>) 和图片 (<img>) 的基础用法详解，内容从基础语法到高级属性，以及常见示例，方便学习或文档使用。

1️⃣ HTML5 超链接 `<a>` 标签

基本语法

&lt;a href="https://www.example.com">访问示例网站&lt;/a>

href：指定链接目标地址
文本内容：显示给用户点击
点击后会在当前窗口打开链接（默认行为）

常用属性

属性	说明
`href`	链接 URL，可为绝对路径或相对路径
`target`	打开方式：`_self`（当前页）、`_blank`（新窗口/标签）、`_parent`、`_top`
`rel`	关系类型：`nofollow`、`noopener`、`noreferrer` 等，安全优化
`download`	强制下载链接指向的文件
`title`	鼠标悬停显示的提示信息

示例 1：新窗口打开

&lt;a href="https://www.example.com" target="_blank" rel="noopener">打开示例网站&lt;/a>

示例 2：下载文件

&lt;a href="files/sample.pdf" download>下载 PDF 文件&lt;/a>

示例 3：锚点链接（页面内跳转）

&lt;a href="#section2">跳到第二部分&lt;/a>

&lt;h2 id="section2">第二部分&lt;/h2>
&lt;p>这是第二部分内容。&lt;/p>

示例 4：邮箱和电话链接

&lt;a href="mailto:abc@example.com">发送邮件&lt;/a>
&lt;a href="tel:+8613800000000">拨打电话&lt;/a>

2️⃣ HTML5 图片 `<img>` 标签

基本语法

&lt;img src="images/pic.jpg" alt="示例图片">

src：图片路径（相对或绝对）
alt：替代文本（图片无法显示或屏幕阅读器使用）

常用属性

属性	说明
`src`	图片地址
`alt`	替代文字
`width` / `height`	图片显示宽高（像素）
`title`	鼠标悬停提示文字
`loading`	延迟加载：`lazy` 或 `eager`
`crossorigin`	跨域设置：`anonymous` 或 `use-credentials`

示例 1：基本图片

&lt;img src="https://picsum.photos/300/200" alt="示例图片">

示例 2：指定宽高

&lt;img src="https://picsum.photos/300/200" alt="示例图片" width="300" height="200">

示例 3：懒加载图片（HTML5 新特性）

&lt;img src="https://picsum.photos/300/200" alt="懒加载示例" loading="lazy">

示例 4：图片作为链接

&lt;a href="https://www.example.com" target="_blank">
    &lt;img src="https://picsum.photos/150/100" alt="示例图片链接">
&lt;/a>

3️⃣ 综合示例：超链接 + 图片

&lt;h2>HTML5 图片与超链接综合示例&lt;/h2>

&lt;p>点击图片打开示例网站：&lt;/p>
&lt;a href="https://www.example.com" target="_blank" rel="noopener">
    &lt;img src="https://picsum.photos/200/120" alt="示例图片" width="200">
&lt;/a>

4️⃣ 小贴士

SEO & 无障碍
- 所有图片都应写 alt 文本
- 超链接可添加 title 提示
安全性
- target="_blank" 搭配 rel="noopener noreferrer"，防止安全问题
性能优化
- 使用 loading="lazy" 延迟加载图片
- 对超链接、图片统一加 CSS 样式保持页面美观

下面给你一个 HTML5 超链接创建方法的完整详解，涵盖各种创建方式、属性用法和实战示例。

1️⃣ 基本超链接创建

&lt;a href="https://www.example.com">访问示例网站&lt;/a>

<a> 标签用于创建超链接
href 指定目标地址
点击后默认在当前窗口打开

2️⃣ 新窗口打开链接

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

target="_blank"：在新窗口或标签页打开
rel="noopener"：安全防护，避免新窗口获取原页面对象

3️⃣ 邮箱和电话链接

&lt;a href="mailto:abc@example.com">发送邮件&lt;/a>
&lt;a href="tel:+8613800000000">拨打电话&lt;/a>

mailto:：点击打开默认邮箱客户端
tel:：点击在移动设备上拨打电话

4️⃣ 页面内锚点链接

&lt;a href="#section2">跳到第二部分&lt;/a>

&lt;section id="section2">
  &lt;h2>第二部分内容&lt;/h2>
&lt;/section>

href="#id"：跳转到页面内指定 ID 元素

5️⃣ 下载文件链接

&lt;a href="files/sample.pdf" download>下载 PDF 文件&lt;/a>

download：提示浏览器下载链接文件而非打开

6️⃣ 图片作为超链接

&lt;a href="https://www.example.com" target="_blank">
  &lt;img src="https://picsum.photos/200/120" alt="示例图片">
&lt;/a>

图片嵌套在 <a> 中，即点击图片跳转链接

7️⃣ 综合示例（可直接结合你的页面使用）

&lt;header>
  &lt;h1>HTML5 超链接示例&lt;/h1>
&lt;/header>

&lt;nav>
  &lt;a href="#home">首页&lt;/a>
  &lt;a href="#gallery">图片展示&lt;/a>
  &lt;a href="#contact">联系我们&lt;/a>
&lt;/nav>

&lt;section id="home">
  &lt;p>欢迎访问示例网站 &lt;a href="https://www.example.com" target="_blank">点击访问&lt;/a>&lt;/p>
&lt;/section>

&lt;section id="gallery">
  &lt;a href="https://picsum.photos/id/1015/600/400" target="_blank" rel="noopener">
    &lt;img src="https://picsum.photos/id/1015/200/120" alt="示例图片" loading="lazy">
  &lt;/a>
&lt;/section>

&lt;section id="contact">
  &lt;p>邮箱: &lt;a href="mailto:abc@example.com">abc@example.com&lt;/a>&lt;/p>
  &lt;p>电话: &lt;a href="tel:+8613800000000">+86 138 0000 0000&lt;/a>&lt;/p>
&lt;/section>

🔹 小贴士

超链接必须写 href，否则无法跳转
外部链接建议加 target="_blank" + rel="noopener noreferrer"
图片、文件、邮箱、电话均可作为超链接目标
页面内锚点便于长页面快速导航

1️⃣ HTML5 超链接 <a> 标签

基本语法

常用属性

示例 1：新窗口打开

示例 2：下载文件

示例 3：锚点链接（页面内跳转）

示例 4：邮箱和电话链接

2️⃣ HTML5 图片 <img> 标签

基本语法

常用属性

示例 1：基本图片

示例 2：指定宽高

示例 3：懒加载图片（HTML5 新特性）

示例 4：图片作为链接

3️⃣ 综合示例：超链接 + 图片

4️⃣ 小贴士

1️⃣ 基本超链接创建

2️⃣ 新窗口打开链接

3️⃣ 邮箱和电话链接

4️⃣ 页面内锚点链接

5️⃣ 下载文件链接

6️⃣ 图片作为超链接

7️⃣ 综合示例（可直接结合你的页面使用）

🔹 小贴士

1️⃣ HTML5 超链接 `<a>` 标签

2️⃣ HTML5 图片 `<img>` 标签