数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法律研究如何用 HTML5 来显示给定 <details> 的摘要？
要为 <details> 标记显示可见标题，我们使用 <summary> 标记。要隐藏或查看详细信息，请单击标题。<detail> 标记的第一个子元素是 <summary> 元素。
语法
以下是摘要元素的使用方式——
<details> <summary> text … </summary> </details>
summary 标记支持 HTML 中的全局和事件属性。
示例
以下示例尝试为 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>
更新时间：2023 年 10 月 10 日
215 次浏览
广告