好的，我整理了一份 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️⃣ 小贴士

  1. SEO & 无障碍
    • 所有图片都应写 alt 文本
    • 超链接可添加 title 提示
  2. 安全性
    • target="_blank" 搭配 rel="noopener noreferrer"，防止安全问题
  3. 性能优化
    • 使用 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>

🔹 小贴士

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