html5 details标签的作用是什么？<details>标签的使用方法介绍(附使用实例)-Tutorial H5-php.cn

Rumah

hujung hadapan web

Tutorial H5

html5 details标签的作用是什么？<details>标签的使用方法介绍(附使用实例)

寻∝梦

Aug 22, 2018 pm 01:58 PM

html5

html5 details标签的作用以及a5e9d42b316b6d06c62de0deffc36939标签的使用方法都有哪些？详细的内容就让我们看看本篇文章为大家介绍的关于html details标签的定义和使用说明，还有关于html5 details标签的具体使用方法

html5 a5e9d42b316b6d06c62de0deffc36939标签的定义及使用说明：

HTML5 中新增的a5e9d42b316b6d06c62de0deffc36939标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。

a5e9d42b316b6d06c62de0deffc36939 标签用于描述文档或文档某个部分的细节。

a5e9d42b316b6d06c62de0deffc36939 标签规定了用户可见的或者隐藏的需求的补充细节。

a5e9d42b316b6d06c62de0deffc36939 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 a5e9d42b316b6d06c62de0deffc36939 标签里边。

a5e9d42b316b6d06c62de0deffc36939 元素的内容对用户是不可见的，除非设置了 open 属性。

html5 a5e9d42b316b6d06c62de0deffc36939标签的使用方法：

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

首先是a5e9d42b316b6d06c62de0deffc36939标签，里面接着是标题631fb227578dfffda61e1fa4d04b7d25，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的HTML元素作为详情内容，这些内容需要在点击631fb227578dfffda61e1fa4d04b7d25才会呈现。

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示例：

目前只有 Chrome 和 Safari 6 支持 a5e9d42b316b6d06c62de0deffc36939 标签。

个人认为details标签以后应该会有更多的浏览器的支持，因为它的出现，让初学者便利了很多，现在多学点总是好的，等以后推广了就可以随意的使用了，本篇文章就到这里。有问题的可以在下面提问。

html5 table标签的样式介绍（另附html5 table css居中的实例）

Atas ialah kandungan terperinci html5 details标签的作用是什么？<details>标签的使用方法介绍(附使用实例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Kod H5: Amalan Terbaik untuk Pemaju WebApr 16, 2025 am 12:14 AM

Amalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.

H5: Evolusi piawaian dan teknologi webApr 15, 2025 am 12:12 AM

Piawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.

Adakah H5 adalah singkat untuk HTML5? Meneroka butiranApr 14, 2025 am 12:05 AM

H5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.

H5 dan HTML5: Istilah yang biasa digunakan dalam pembangunan webApr 13, 2025 am 12:01 AM

H5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.

Apa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AM

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

H5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AM

Alat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.

Warisan HTML5: Memahami H5 pada masa kiniApr 10, 2025 am 09:28 AM

Html5hassignificlylylectransformedwebdevelopmentbyintroducingsemanticelements, enhancingmultimediasupport, andimprovingperformance.1) itmadewebebsitesmoreaccessibleandseo-friendlywithSemhyViVeShive, dan

Kod H5: Kebolehcapaian dan HTML SemantikApr 09, 2025 am 12:05 AM

H5 meningkatkan kebolehaksesan laman web dan kesan SEO melalui unsur -unsur semantik dan atribut ARIA. 1. Gunakan, dan lain -lain untuk mengatur struktur kandungan dan meningkatkan SEO. 2. Atribut Aria seperti ARIA-Label meningkatkan kebolehcapaian, dan pengguna teknologi bantuan boleh menggunakan laman web dengan lancar.

See all articles