73. figure 与 search

本节目标：掌握 figure/figcaption 的使用场景，了解 search 标签的作用。

这两个标签一个你很熟悉（figure），一个比较新（search）。

figure + figcaption：媒体内容分组

<figure> 包裹自包含的媒体内容。<figcaption> 是它的标题或说明。

<figure>
  <img src="chart.png" alt="2026年月度访问量统计">
  <figcaption>图 1：2026 年各月网站访问量统计</figcaption>
</figure>

关键点：figcaption 是 figure 的第一个或最后一个子元素。

可以包含什么

<!-- 图片 -->
<figure>
  <img src="photo.jpg" alt="风景">
  <figcaption>山间日出</figcaption>
</figure>

<!-- 代码块 -->
<figure>
  <pre><code>const a = 1;</code></pre>
  <figcaption>代码示例 1：变量声明</figcaption>
</figure>

<!-- 引用 -->
<figure>
  <blockquote>
    "Stay hungry, stay foolish."
  </blockquote>
  <figcaption>—— 史蒂夫·乔布斯</figcaption>
</figure>

<!-- 视频 -->
<figure>
  <video src="demo.mp4" controls></video>
  <figcaption>产品演示视频</figcaption>
</figure>

figure 不局限于图片。任何自包含的内容都可以放进去。

figure 与主内容的关系

figure 的内容应该和主内容相关。但删除 figure，主内容仍然完整。

<article>
  <p>根据最新的调查数据显示，移动端流量已超过桌面端。</p>

  <figure>
    <img src="traffic-chart.png" alt="流量对比图">
    <figcaption>图 2：移动端与桌面端流量对比</figcaption>
  </figure>

  <p>这表明移动优化变得越来越重要。</p>
</article>

删除 figure，文章仍然通顺。

figure 可以放在 aside、article、section 等容器里。搜索图片的 alt 属性仍然要写，不要因为有了 figcaption 就省略 alt。

search：搜索区域

<search> 是 HTML Living Standard 引入的新标签。它标识页面中的搜索区域。

<search>
  <form action="/search" method="get">
    <input type="search" name="q" placeholder="搜索...">
    <button type="submit">搜索</button>
  </form>
</search>

search 和 form 的区别

普通的 <form> 只是一个表单。<search> 则明确告诉浏览器和搜索引擎：“这是搜索框”。

屏幕阅读器读到 search 标签时，会提示用户”这是搜索区域”。搜索引擎也可能特别对待这个区域。

常见用法

<!-- 页面顶部搜索 -->
<header>
  <h1>我的网站</h1>
  <search>
    <form action="/search">
      <input type="search" name="q" placeholder="搜索文章...">
      <button type="submit">搜索</button>
    </form>
  </search>
</header>

<!-- 搜索结果页 -->
<search>
  <form action="/search">
    <input type="search" name="q" value="HTML5">
    <select name="type">
      <option value="all">全部</option>
      <option value="article">文章</option>
      <option value="video">视频</option>
    </select>
    <button type="submit">搜索</button>
  </form>
</search>

search 本质上是带语义的 div。它不会改变 form 的提交行为，只是让结构含义更明确。

完整示例

<body>
  <header>
    <h1>技术文档</h1>
    <search>
      <form action="/search" method="get">
        <input type="search" name="q" placeholder="搜索文档...">
        <button type="submit">搜索</button>
      </form>
    </search>
  </header>

  <main>
    <article>
      <h2>Flexbox 布局指南</h2>
      <p>Flexbox 是一种强大的 CSS 布局方式。</p>

      <figure>
        <img src="flexbox-term.png" alt="Flexbox 术语图解">
        <figcaption>图 1：Flexbox 的主轴和交叉轴</figcaption>
      </figure>

      <p>理解主轴方向是使用 Flexbox 的关键。</p>

      <figure>
        <pre><code>
.container {
  display: flex;
  justify-content: center;
}
        </code></pre>
        <figcaption>代码 1：水平居中的 Flex 写法</figcaption>
      </figure>
    </article>
  </main>
</body>

search 标记搜索区，figure 分组图片和代码。语义明确。