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是h5新增的互動元素，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 | topic.alibabacloud.com(php.cn)!</summary> <p>topic.alibabacloud.com,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> 標籤。
個人認為details標籤以後應該會有更多的瀏覽器的支援，因為它的出現，讓初學者便利了很多，現在多學點總是好的，等以後推廣了就可以隨意的使用了，本篇文章就到這裡。有問題的可以在下面提問。
【個人的相關推薦】
html em標籤的作用是什嗎？<em>和<i>標籤的區別
html5 table標籤的樣式介紹（另附html5 table css置中的執行個體）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
