HTML5教程：detalis標簽使用詳細說明
2024-09-05 07:18:34
供稿：網友
網頁制作Webjx文章簡介：details標簽的出現，為我們帶來了更好的用戶體驗，不必為這種收縮展開的效果再編寫JS來實現。 details標簽的出現，為我們帶來了更好的用戶體驗，不必為這種收縮展開的效果再編寫JS來實現。
注：目前僅Chrome支持此標簽。
details有一個新增加的子標簽——summary，當鼠標點擊summary標簽中的內容文字時，details標簽中的其他所有元素將會展開或收縮。
detalis標簽：
案例1：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習</title> </head>
<body> <details> <summary>網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習</summary> <p>網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習</p> </details> </body> </html>
如果details中不存在summary標簽會怎樣呢，其實當details元素內沒有summary標簽的時候，瀏覽器在解析的時候會提供一個默認的文字，比如“查看詳細”諸如此類的本地化文字，瀏覽器同樣再會提供一個諸如上下箭頭之類的圖標。比如下面的案例2就是一個不存在summary子標簽的例子。
案例2：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習</title> </head>
<body> <details> <p>網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習</p> </details> </body> </html>
有的時候，我們需要detalis中的內容默認為展開狀態怎么辦？
其實HTML5也已經為我們想到了，如果有著方面的需求，我們只需要加入一個屬性即可，如案例3。
Open屬性：
將案例1的代碼修改后如下：
案例3：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5每日一練之details展開收縮標簽的應用</title> </head>
<body> <details open> <summary>網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習</summary> <p>網頁教學網提供最新的網頁制作、網頁設計、網頁特效，為個人網站提供網頁素材模板和網頁視頻學習</p> </details> </body> </html>
由此可見，HTML5為我們的確帶來了很大方便。
