資料結構
網路
關係型資料庫管理系統
作業系統
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>
摘要標記支援 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>
更新於： 10-10-2023
215 次瀏覽
廣告