如何在 HTML5 中显示给定 <details> 的摘要?

htmlfront end technologyweb development更新于 2024/7/28 8:44:17

要显示 <details> 标签的可见标题，我们使用 <summary> 标签。要隐藏或查看详细信息，请点击标题。<detail> 标签的第一个子元素是 <summary> 元素。

语法

以下是 summary 元素 − 的用法

<details>
   <summary> text … </summary>
</details>

HTML 中的 summary 标签支持全局属性和事件属性。

示例

以下示例尝试在 HTML5 中显示给定 <details> 的摘要 −

<!DOCTYPE html>
<html>
<body>
   <h1>The summary element</h1>
   <details>
      <summary>Survey Results</summary>
      <p>Students were asked to rate the food in the cafeteria on a scale of 1 to 10. The average result obtained was 7.</p>
   </details>
</body>
</html>

示例

现在让我们看看如何在 HTML 中将 CSS 属性应用于给定详细信息的摘要。以下是使用 CSS 设置 <summary> 和 <details> 样式的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      details>summary {
         padding: 4px;
         width: 200px;
         background-color: yellow;
         border: none;
         box-shadow: 1px 1px 2px #bbbbbb;
         cursor: pointer;
      }

      details>p {
         background-color: pink;
         padding: 4px;
         margin: 0;
         box-shadow: 1px 1px 2px #bbbbbb;
      }
   </style>
</head>
<body>
   <h1>The summary element</h1>
   <details>
      <summary>Survey Results</summary>
      <p>Students were asked to rate the food in the cafeteria on a scale of 1 to 10. The average result obtained was 7.</p>
   </details>
</body>
</html>

示例

以下是 <summary> 标签的另一个示例 -

<!doctype html>
<html>
<head>
   <title> Details element </title>
   <style>
      details {
         padding: 10px;
         background-color: gray;
         font-size: 14px;
      }
      summary {
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h2>Summary for a given Details in HTML</h2>
   <details>
      <summary> About HTML <details> tag </summary>
      <p>To display a visible heading for details tag we use summary tag</p>
      <p>To hide or view the details , click the heading </p>
   </details>
   <p><b>Note:</b><cite>The first child element of detail tag is summary element</cite></p>
</body>
</html>