HTML Summary 标签

2025 年 3 月 25 日 | 阅读 2 分钟

HTML 的 <summary> 标签与 <details> 标签一起使用。它用作 <details> 元素内容的摘要、标题或图例。

它在 <details> 标签内使用。它必须有一个闭合标签。

<summary> 标签是新引入的，并在 HTML 5 中首次推出。

HTML summary 标签示例

<details>
<summary>JavaTpoint Summary</summary>
<p> JavaTpoint is a popular tutorial website.</p>
<p>You can learn various tutorials on JavaTpoint such as HTML, CSS, JavaScript, Java, Android.</p>
</details>

输出

JavaTpoint 摘要

JavaTpoint 是一个流行的教程网站。

您可以在 JavaTpoint 上学习各种教程，例如 HTML、CSS、JavaScript、Java、Android。

让我们看另一个 HTML summary 标签的例子。

<details>  
  <summary>MacBook Pro Specification</summary>  
    <ul>  
      <li><strong>13.3-inch LED-backlit glossy widescreen display</strong> with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).</li>  
      <li><strong>2.4 GHz Intel Core i5 dual-core processor</strong> with 3 MB shared L3 cache for excellent multitasking.</li>  
      <li><strong>Intel HD Graphics 3000</strong> with 384 MB of DDR3 SDRAM shared with main memory.</li>  
      <li><strong>500 GB Serial ATA hard drive</strong> (5400 RPM)</li>  
      <li><strong>4 GB installed RAM</strong> (1333 MHz DDR3; supports up to 8 GB)</li>  
    </ul>  
</details>

输出

MacBook Pro 规格