如何在 HTML 中指定詳細資訊對使用者可見?
本文將介紹如何在 HTML 中指定詳細資訊對使用者可見。
使用者可以使用 `` 標籤開啟和關閉更多詳細資訊,該標籤指定了詳細資訊。建立使用者可以使用 `` 標籤開啟和關閉的互動式視窗小部件。視窗小部件預設處於關閉狀態。當您開啟它時,它會展開,顯示內容。details 標籤是任何型別內容的容器。
語法
以下是 `` 標籤的語法
<details> <summary> Text content </summary> <div> Content . . . </div> </details>
讓我們深入研究以下示例,以更深入地瞭解如何在 HTML 中指定詳細資訊對使用者可見。
示例 1
在以下示例中,我們使用 details 元素建立互動式視窗小部件。
<!DOCTYPE html> <html> <head> <style> summary { font-size:40px; color:lightgreen; font-weight:bold; } </style> </head> <body> <details> <summary>TUTORIALSPOINT</summary> <p>A computer science portal for eveyone</p> <div>It is a computer science portal where you can learn programming.</div> </details> </body> </html>
執行上述指令碼後,它將生成一個包含互動式視窗小部件的輸出,該視窗小部件允許使用者開啟或隱藏文字。
透過點選互動式視窗小部件,其內部的文字將顯示給使用者,並在需要時可以關閉它。
示例 2
考慮以下示例,其中我們使用 CSS 來設定 `` 和 `` 的樣式。
<!DOCTYPE html> <html> <head> <style> summary { padding: 4px; width: 200px; background-color: #A3E4D7 ; border: none; box-shadow: 1px 1px 2px #A569BD ; cursor: pointer; } p { background-color: #85929E ; padding: 4px; margin: 0; box-shadow: 1px 1px 2px#A569BD; } </style> </head> <body> <details> <summary>MS DHONI</summary> <p>Mahendra Singh Dhoni is an Indian former international cricketer who was captain of the Indian national cricket team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014.</p> </details> </body> </html>
當指令碼執行時,它將生成一個輸出,顯示指令碼中使用的 `
標籤。
廣告