HTML figure与details语义化标签

语义化标签增强文档结构，提升可访问性和SEO效果。

figure图片容器

基本用法

<figure>
  <img src="photo.jpg" alt="风景照片">
  <figcaption>黄山日出美景</figcaption>
</figure>

• 包裹独立内容单元（图片、图表、代码等）
• 与figcaption搭配提供描述
• 可移动不影响文档流

代码示例展示

<figure>
  <pre><code>
function hello() {
  console.log('Hello World');
}
  </code></pre>
  <figcaption>JavaScript基础函数示例</figcaption>
</figure>

图表容器

<figure>
  <svg width="200" height="100">
    <!-- SVG图表内容 -->
  </svg>
  <figcaption>2024年销售趋势图</figcaption>
</figure>

figcaption图片说明

基本用法

<figcaption>图片说明文字</figcaption>

• figure内唯一标题元素
• 可位于figure任意位置（顶部或底部）

位置控制

<!-- 说明在上方 -->
<figure>
  <figcaption>说明文字（上）</figcaption>
  <img src="image.jpg" alt="图片">
</figure>

<!-- 说明在下方 -->
<figure>
  <img src="image.jpg" alt="图片">
  <figcaption>说明文字（下）</figcaption>
</figure>

多语言说明

<figure>
  <img src="artwork.jpg" alt="艺术作品">
  <figcaption>
    <span lang="zh">蒙娜丽莎</span>
    <span lang="en">Mona Lisa</span>
  </figcaption>
</figure>

details折叠面板

基本用法

<details>
  <summary>点击展开</summary>
  <p>这里是隐藏的内容，点击summary后展开显示。</p>
</details>

• 默认折叠状态
• 点击summary展开/收起
• 无需JavaScript实现交互

默认展开

<details open>
  <summary>默认展开的内容</summary>
  <p>通过open属性设置初始展开状态。</p>
</details>

嵌套使用

<details>
  <summary>第一章</summary>
  <details>
    <summary>1.1 基础概念</summary>
    <p>基础概念内容...</p>
  </details>
  <details>
    <summary>1.2 进阶内容</summary>
    <p>进阶内容...</p>
  </details>
</details>

FAQ示例

<section>
  <h2>常见问题</h2>

  <details>
    <summary>如何注册账户？</summary>
    <p>点击首页"注册"按钮，填写邮箱和密码即可完成注册。</p>
  </details>

  <details>
    <summary>忘记密码怎么办？</summary>
    <p>点击登录页"忘记密码"链接，通过邮箱验证重置密码。</p>
  </details>

  <details>
    <summary>如何联系客服？</summary>
    <p>发送邮件至support@example.com，或拨打客服电话。</p>
  </details>
</section>

summary折叠标题

基本用法

<summary>可点击的标题</summary>

• details的第一个子元素
• 点击触发展开/收起
• 显示三角形指示器

样式定制

<style>
details summary {
  cursor: pointer;
  list-style: none; /* 移除默认三角形 */
}

details summary::-webkit-details-marker {
  display: none; /* Chrome移除三角形 */
}

details[open] summary::before {
  content: '▼ ';
}

details summary::before {
  content: '▶ ';
}
</style>

<details>
  <summary>自定义样式标题</summary>
  <p>展开内容...</p>
</details>

自定义图标

<style>
details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

details[open] .icon {
  transform: rotate(90deg);
}
</style>

<details>
  <summary>
    <span class="icon">➤</span>
    点击展开
  </summary>
  <p>展开内容...</p>
</details>

JavaScript事件

toggle事件

const details = document.querySelector('details');

details.addEventListener('toggle', (e) => {
  if (details.open) {
    console.log('展开');
  } else {
    console.log('收起');
  }
});

手动控制

// 打开
details.open = true;
details.setAttribute('open', '');

// 关闭
details.open = false;
details.removeAttribute('open');

标签对比表

使用场景

要点总结

• figure包裹独立内容单元（图片/图表/代码）
• figcaption为figure提供说明标题
• details实现原生折叠交互
• summary是details的可点击标题
• open属性控制details初始展开状态
• toggle事件监听展开/收起变化