資料結構
網路
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 次瀏覽
廣告