html5 details標籤的作用是什麼？標籤的使用方法介紹(附使用實例)-H5教程-PHP中文網

首頁

web前端

H5教程

html5 details標籤的作用是什麼？標籤的使用方法介紹(附使用實例)

寻∝梦

Aug 22, 2018 pm 01:58 PM

html5

html5 details標籤的作用以及

標籤的使用方法有哪些？詳細的內容就讓我們來看看這篇文章為大家介紹的關於html details標籤的定義和使用說明，還有關於html5 details標籤的具體使用方法

html5

標籤的定義及使用說明：

HTML5 中新增的

標籤允許使用者建立一個可展開折疊的元件，讓一段文字或標題包含一些隱藏的資訊。

標籤用來描述文件或文件某個部分的細節。

標籤規定了使用者可見的或隱藏的需求的補充細節。

標籤用來供使用者開啟關閉的互動式控制項。任何形式的內容都能被放在

標籤裡邊。

元素的內容對使用者是不可見的，除非設定了 open 屬性。

html5

標籤的使用方法：

一般情況下，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>

首先是

標籤，裡面接著是標題

，這裡面的內容一般簡短，具有總結性，會展示在頁面。接著可以跟著任意類型的HTML元素作為詳情內容，這些內容需要在點擊

才會呈現。

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 | PHP中文网(php.cn)!</summary> 
                <p>PHP中文网,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範例：

html5 details標籤的作用是什麼？ <details>標籤的使用方法介紹(附使用實例)

目前只有 Chrome 和 Safari 6 支援

標籤。

個人認為details標籤以後應該會有更多的瀏覽器的支持，因為它的出現，讓初學者便利了很多，現在多學點總是好的，等以後推廣了就可以隨意的使用了，這篇文章就到這裡。有問題的可以在下面提問。

【個人的相關推薦】

html em標籤的作用是什麼？和標籤的區別

#html5 table標籤的樣式介紹（另附html5 table css居中的實例）

以上是html5 details標籤的作用是什麼？標籤的使用方法介紹(附使用實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

解構H5代碼：標籤，元素和屬性Apr 18, 2025 am 12:06 AM

HTML5代碼由標籤、元素和屬性組成：1.標籤定義內容類型，用尖括號包圍，如。 2.元素由開始標籤、內容和結束標籤組成，如內容。 3.屬性在開始標籤中定義鍵值對，增強功能，如。這些是構建網頁結構的基本單位。

了解H5代碼：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo