htm5之<details>标签

最新推荐文章于 2025-11-29 17:19:36 发布
最新推荐文章于 2025-11-29 17:19:36 发布 · 206 阅读 · 0
文章标签：

#details #html5

本文详细介绍了HTML5 details标签的功能、属性及其在实际应用中的使用方法，包括Chrome和Safari浏览器的支持情况，以及如何通过open属性控制标签的可见状态。

 

   本文内容来自w3school：http://www.w3school.com.cn/html5/tag_details.asp

 

   个人学习积累用！

 

 

HTML 5 <details> 标签

 

      -----------用于描述文档或文档某一个部分的细节。

 

 

  •   目前Chrome和Safari支持details标签

        具体可以看：http://caniuse.com/#search=details

 

  •   是HTML5新增标签
  
<details open="open">
     <summary>Copyright 2012.</summary>
     <p>All pages......</p>
</details>
 
 
 

属性值

值描述
open规定在 HTML 页面上 details 应该是可见的。
HTML ＜details＞ 标签
玄链教育
06-04 1057
details> 标签用于描述文档或文档某个部分的细节。
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
热门推荐
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
HTML5的<details>和<summary>
yanglize的博客
07-20 5024
是一个全新的HTML5元素，功能是描述文档某个部分的细节。标记常与标记配合使用。在默认情况下，不显示中的内容。当与标记配合使用时，在单击标记后才会显示元素中设置的内容。元素的常用属性如下所示： 1）open:值为open，功能是定义details是否可见。 2）subject:值为sub_id，功能是设置元素所对应项目的ID号。 3）draggable:值为true或false，功能是设置是
HTML5 Details标签学习笔记
weixin_30888413的博客
12-22 271
HTML5的Details标签 浏览器：chrome 12以上 刚被添加到chrome中的元素，让人喜欢。 点击标签时显示和隐藏内容。之前这种效果是用javascript 实现的，FAQ页面中经常使用这个功能。 创建一个标签 <details> 　　<summary>Who goes to college?</summary> 　　<p&gt...
html5为details定义标题,HTML <details> 标签
weixin_33901449的博客
07-20 666
HTML 标签 标签用于创建一个可展开折叠的元件，用户可以从中检索其他附加的信息。实例使用 元素：Copyright 1999-2011. - by Refsnes Data. All Rights Reserved.All content and graphics on this web site are the property of the company Refsnes Data.尝试...
HTML5--》details
Calamus
05-08 228
&#13; &lt;details&gt;是HTML5的新标签，用于描述文档或文档某个部分的细节。&#13; 目前只有 Chrome 和 Safari 6 支持 &lt;details&gt; 标签。&#13; 与 &lt;summary&gt; 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。&#13; 值：&#13; op...
html5中details标签作用
高先生的猫
04-24 4006
html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。 标签定义及使用说明 <details> 标签规定了用户可见的或者隐藏的需求的补充细节。 <details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。 <details> 元素的内容对用户是不可见的，除非设置了 open 属性。 用法 一般情况下，details用来对显示在页面的
<!DOCTYPE=htm> <i-- blibli:shiloh b站shiloh创建 欢迎各位交流学习-> <html> <head> <title>shiloh</title> </head> <body> <h1>Enter your QQinformation</h1>I <p> welcome you are the most handsome person in the world</p > <br> <form> <div> <label>QQnumber</label> <input type="text' name='QQ number placeholder='enter your qq number'> </diy> <div> <input type='submit' name="submit" value='Submit'> </div> </form> </html> 完善该代码，让其更加真实可信，最好带有图片
06-24
</p><p>主要特点：</p><ul><li>特点一：高效节能</li><li>特点二：操作简单</li><li>特点三：持久耐用</li></ul></div></section><sectionclass="features"><divclass="feature-card"><!--特征图标--><imgsrc=...
HTML----基础案例（与笔记对应）
sumuqi的博客
03-22 1317
案例1 !DOCTYPE html> <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </html> 案例2 <html...
HTML中<object>元素及图像映射的使用指南
# HTML 中 <object> 元素及图像映射的使用指南 ## 1. <object> 元素概述 W3C 在 HTML 4 中引入了 `<object>` 元素，旨在将所有媒体类型嵌入文档，不仅包括图形，还涵盖 MP3 ...在这些情况下，`<object>` 元素用于包
HTML标签之 <details> 与 <summary>
奇舞周刊
03-24 2978
众所周知，HTML5已经出了很多年，其迭代版本都出到了HTML5.3。这其中有趣的 API 跟 标签有许多，这里就简单介绍两个：<details>跟<sum...
html5<details>标签。
酒香逢
02-24 3013
原文地址：http://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/注：本文只有原文部分内容，且对内容有过修改，需要看原文请移步上方连接 ↑↑↑&lt;details&gt; 标签是 HTML5 中的新标签，目前浏览器支持程度有所欠缺，最新支持情况可以点击https://caniuse.com&lt;det...
android ndef sdk,如何从检测到的NFC标签(NDEF消息)中读取. An...
weixin_33371440的博客
05-27 268
相似问题-How to read detected NFC tag (NDEF content) details in android?我希望我的Android应用程序能够读取和解析检测到的NDEF消息.我已经编辑了AndroidManifest.xml以检测nfc标签,并且添加了如下所示的意图过滤器我认为这很好,因为当我使用SDK附带的NFCDemo示例应用程序创建MockNDEFtags时,当...
html中details标签的作用,html5 details标签的作用是什么？
weixin_35349608的博客
06-15 2649
html5 标签的定义及使用说明：HTML5 中新增的标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。 标签用于描述文档或文档某个部分的细节。 标签规定了用户可见的或者隐藏的需求的补充细节。 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 标签里边。 元素的内容对用户是不可见的，除非设置了 open 属性。html5 标签的使用方法：一般情况下，detai...
基于Echarts+HTML5可视化数据大屏展示-物流大数据展示
qq_36595761的博客
11-24 1187
本文介绍了一个物流大数据可视化展示系统的前端实现。系统采用HTML+CSS+JavaScript技术栈，使用jQuery库实现页面交互功能，包含三个主要区域：左侧展示基本信息、包裹量排名和商品分类占比；中间区域显示数量统计、地图可视化及月统计数据；右侧区域呈现商品销售排行。系统采用响应式设计，通过JavaScript动态调整字体大小以适应不同屏幕尺寸，并实现了文字滚动效果。整体布局清晰，通过可视化图表直观展示物流相关数据指标，为数据分析提供直观的交互界面。
如何使用 HTML5 的 Canvas + JavaScript 实现炫酷的游戏得分特效?
具有多年编程开发经验，分享开发中的经验和优秀案例
11-29 1517
这篇文章介绍了如何使用Canvas实现动态得分文字特效。资源均为免费下载，由于上传限制的问题 ，图片不清晰，可以自己把文件下载下来查看
（45页PPT）智慧口某省市场发展前景及投资研究报告.ppt
12-03
（45页PPT）智慧口某省市场发展前景及投资研究报告.ppt
3D打印机调度问题的研究。目标是同时降低完成时间和成本.zip
最新发布
12-03
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Bot468__30192_1764666289903.zip
12-03
Bot468__30192_1764666289903.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值