Web学习网站

Appearance

<figure> 标签 ​

<figure> 标签用于定义独立的媒体内容，如图片、图表、照片、代码等，并可选择性地包含标题说明。

概述 ​

<figure> 标签是 HTML5 中引入的语义化标签，用于定义独立的内容，如图像、图表、照片、代码等。它通常与 <figcaption> 标签一起使用，为媒体内容提供标题或说明。

语法 ​

html
<figure>
  <!-- 媒体内容 -->
  <figcaption>标题说明</figcaption>
</figure>

基本用法 ​

图片与标题 ​

html
<figure>
  <img src="image.jpg" alt="描述图片内容">
  <figcaption>图片的标题说明</figcaption>
</figure>

代码示例 ​

html
<figure>
  <pre><code>
function hello() {
  console.log("Hello, World!");
}
  </code></pre>
  <figcaption>JavaScript 函数示例</figcaption>
</figure>

实际示例 ​

图片画廊 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>figure 标签示例</title>
  <style>
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      padding: 2rem;
    }
    
    figure {
      margin: 0;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    figure img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    figcaption {
      padding: 1rem;
      text-align: center;
      font-style: italic;
      color: #666;
      background-color: #f8f9fa;
    }
    
    @media (max-width: 768px) {
      .gallery {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <h1>图片画廊</h1>
  
  <div class="gallery">
    <figure>
      <img src="https://via.placeholder.com/400x300/FF6B6B/FFFFFF?text=图片1" alt="日出">
      <figcaption>美丽的日出景象</figcaption>
    </figure>
    
    <figure>
      <img src="https://via.placeholder.com/400x300/4ECDC4/FFFFFF?text=图片2" alt="山脉">
      <figcaption>雄伟的山脉风景</figcaption>
    </figure>
    
    <figure>
      <img src="https://via.placeholder.com/400x300/45B7D1/FFFFFF?text=图片3" alt="海洋">
      <figcaption>宁静的海洋景色</figcaption>
    </figure>
  </div>
</body>
</html>

技术文档中的代码示例 ​

html
<article>
  <h1>JavaScript 基础教程</h1>
  
  <p>在 JavaScript 中，函数是一等公民，可以作为参数传递：</p>
  
  <figure>
    <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}

function processUser(name, greetingFunction) {
  return greetingFunction(name);
}

console.log(processUser("张三", greet)); // 输出: Hello, 张三!</code></pre>
    <figcaption>JavaScript 中的函数作为参数传递示例</figcaption>
  </figure>
  
  <p>箭头函数提供了更简洁的语法：</p>
  
  <figure>
    <pre><code>// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

// 单参数箭头函数
const square = x => x * x;</code></pre>
    <figcaption>JavaScript 箭头函数语法示例</figcaption>
  </figure>
</article>

表格与说明 ​

html
<article>
  <h1>销售数据报告</h1>
  
  <p>下表显示了本季度的销售数据：</p>
  
  <figure>
    <table>
      <thead>
        <tr>
          <th>月份</th>
          <th>销售额 (万元)</th>
          <th>增长率</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1月</td>
          <td>120</td>
          <td>-</td>
        </tr>
        <tr>
          <td>2月</td>
          <td>135</td>
          <td>12.5%</td>
        </tr>
        <tr>
          <td>3月</td>
          <td>158</td>
          <td>17.0%</td>
        </tr>
      </tbody>
    </table>
    <figcaption>2023年第一季度销售数据</figcaption>
  </figure>
</article>

与相关标签的区别 ​

与 <div> 的区别 ​

html
<!-- 不推荐：使用 div 包装图片和标题 -->
<div>
  <img src="image.jpg" alt="图片描述">
  <p>图片标题</p>
</div>

<!-- 推荐：使用语义化的 figure 标签 -->
<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>图片标题</figcaption>
</figure>

与单独使用图片的区别 ​

html
<!-- 没有关联标题的图片 -->
<img src="image.jpg" alt="图片描述">

<!-- 有关联标题的图片 -->
<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>图片的详细说明</figcaption>
</figure>

位置灵活性 ​

html
<!-- figcaption 可以在 figure 的开头 -->
<figure>
  <figcaption>图表说明</figcaption>
  <img src="chart.png" alt="销售图表">
</figure>

<!-- figcaption 也可以在 figure 的结尾 -->
<figure>
  <img src="chart.png" alt="销售图表">
  <figcaption>图表说明</figcaption>
</figure>

响应式图片 ​

html
<figure>
  <picture>
    <source media="(max-width: 768px)" srcset="image-mobile.jpg">
    <source media="(max-width: 1200px)" srcset="image-tablet.jpg">
    <img src="image-desktop.jpg" alt="响应式图片">
  </picture>
  <figcaption>根据屏幕尺寸显示不同版本的图片</figcaption>
</figure>

最佳实践 ​

  1. 语义化使用：只在表示独立媒体内容时使用 <figure> 标签
  2. 配合使用：通常与 <figcaption> 标签配合使用提供标题说明
  3. 内容独立：<figure> 中的内容应该是独立的，移除后不影响主内容理解
  4. 位置灵活：<figcaption> 可以放在 <figure> 的开头或结尾
  5. 适当使用：不是所有图片都需要用 <figure> 包装，只有需要标题说明的才使用

浏览器兼容性 ​

<figure> 标签在所有现代浏览器中都得到支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

对于不支持的旧浏览器，可以通过 CSS 显示声明为块级元素：

css
figure {
  display: block;
}

注意事项 ​

  1. <figure> 标签是块级元素
  2. <figure> 应该包含独立的媒体内容
  3. <figcaption> 可以作为 <figure> 的第一个或最后一个子元素
  4. <figure> 标签没有默认样式，需要通过 CSS 设置
  5. 不要将 <figure> 用作布局容器

相关标签 ​