溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下html5中details標簽的作用是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
html5 <details>標簽的定義及使用說明：
HTML5 中新增的<details>標簽允許用戶創建一個可展開折疊的元件，讓一段文字或標題包含一些隱藏的信息。
<details> 標簽用于描述文檔或文檔某個部分的細節。
<details> 標簽規定了用戶可見的或者隱藏的需求的補充細節。
<details> 標簽用來供用戶開啟關閉的交互式控件。任何形式的內容都能被放在 <details> 標簽里邊。
<details> 元素的內容對用戶是不可見的，除非設置了 open 屬性。
html5 <details>標簽的使用方法：
一般情況下，details用來對顯示在頁面的內容做進一步驟解釋。其展現出來的效果和jQuery手風琴插件差不多。
其大致寫法如下：
<details> <summary>Google Nexus 6</summary> <p>商品詳情：</p> <dl> <dt>屏幕</dt> <dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd> <dt>電池</dt> <dd>3220 mAh</dd> <dt>相機</dt> <dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd> <dt>處理器</dt> <dd>Qualcomm? Snapdragon? 805 processor</dd> </dl> </details>
首先是<details>標簽，里面接著是標題<summary>，這里面的內容一般簡短，具有總結性，會展示在頁面。接著可以跟任意類型的HTML元素作為詳情內容，這些內容需要在點擊<summary>才會呈現。
details是h6新增的交互元素，details與 summary 標簽配合使用可以為 details 定義標題。默認情況下，不顯示 details 標記中的內容。當用戶點擊標題時，會顯示出 details。
details標簽的出現，為我們帶來了更好的用戶體驗，不必為這種收縮展開的效果再編寫JS來實現。
details有一個新增加的子標簽——summary，當鼠標點擊summary標簽中的內容文字時，details標簽中的其他所有元素將會展開或收縮。
html5 detalis標簽實例1：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一練之details標簽的應用</title>
</head>
<body>
<details>
<summary>HTML5|CSS3|PHP | 億速云(php.cn)!</summary>
<p>億速云,WEB前端開發論壇,教程資源完全免費PHP網站，打造最好的編程網站</p>
</detalis>
</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>HTML5每日一練之details展開收縮標簽的應用</title>
</head>
<body>
<details>
<p>HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇，打造最好的HTML5/CSS3論壇</p>
</details>
</body>
</html>有的時候，我們需要detalis中的內容默認為展開狀態怎么辦？
其實HTML5也已經為我們想到了，如果有著方面的需求，我們只需要加入一個屬性即可，如案例3。
html5 details標簽的作用之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>HTML5|CSS3|論壇 | 前端開發網(W3Cfuns.com)!</summary>
<p>HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇，打造最好的HTML5/CSS3論壇</p>
</details>
</body>
</html>由此可見，HTML5為我們的確帶來了很大方便。
html5 details標簽的作用之details標簽的常用屬性的用法：
open:值為open，功能是定義details是否可見。
subject:值為sub_id，功能是設置元素所對應項目的ID號。
draggable:值為true或false,功能是設置是否可以拖動元素，默認值是false。
簡單的details示例：
目前只有 Chrome 和 Safari 6 支持 <details> 標簽。
以上是html5中details標簽的作用是什么的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
