html5中details标签作用
html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
标签定义及使用说明
<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 元素的内容对用户是不可见的，除非设置了 open 属性。
用法
一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和手风琴插件差不多。在markdown里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容，其大致写法如下：
<details><p>我是一段被隐藏的内容</p>
</details>这还没有加任何一行的 js ，我们点击后， details 标签上会多一个 open 的属性，被隐藏的内容就展示出来了默认情况下，简要文字为 "详情" ，想要修改这个文字，要搭配 summary 标签来使用，比如：
<details><summary>点击查看更多</summary><p>我是一段被隐藏的内容</p>
</details>我在使用这个标签的时候，会出现一个棕色的边框（我网页背景是黑色，字体是白色），请问怎么能不显示这个边框？
可以在css中添加属性border:none; 设置这个就不会出现边框了；
open 属性
最开始详情默认是隐藏的，当点击时都会展现。你也可以通过给<details>标签设置open属性让它默认为展开状态。
兼容性
由于是HTML5新标签，浏览器支持情况不是很理想。从来自caniuse来看，目前仅Chrome, Safari 8+ 和Opera 26+支持此标签。
可喜的是，如果你在caniuse开启了「显示来自UC浏览器的结果」 选项的话，会发现，国产的UC浏览器也支持了此标签。
html5中details标签作用相关推荐
- HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
- HTML5中Nav元素作用及应用场景知识点
HTML5中Nav元素作用及应用场景知识点,Nav元素一般用来做导航栏,链接到本页面的某个位置或者是其他页面.元素标签 将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读 ...
- HTML中可以有多个meta吗,HTML5中meta标签有三个主要属性是什么
HTML5中meta标签有三个主要属性是什么 发布时间:2020-10-22 13:46:11 来源:亿速云 阅读:88 作者:小新 小编给大家分享一下HTML5中meta标签有三个主要属性是什么,相 ...
- php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
- php中的ol标签,html5中ol标签的用法详解
这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下 定义和用法 标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异 在 HTML ...
- 解决html5中video标签无法播放mp4问题的办法
解决html5中video标签无法播放mp4问题的办法 参考文章: (1)解决html5中video标签无法播放mp4问题的办法 (2)https://www.cnblogs.com/it-tsz/p ...
- CSS中的长度单位和HTML5中多媒体标签的使用
CSS中的长度单位和HTML5中多媒体标签的使用 第一部分.长度单位 1.基本长度单位 2.长度单位的换算 第二部分.vw.vh.vmin.vmax 1.vw.vh.vmin.vmax的含义 2.vw ...
- vue3-video-play视频组件的使用（一）——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
- html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法 发布时间:2021-06-12 12:44:51 来源:亿速云 阅读:71 作者:小新 这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
最新文章
- c#switch语句判断成绩_Go的条件判断语句
- 统计消息总数_和公牛一战，库里创三个记录，耀眼的还是三分球总数
- Magicodes.IE之总体教程
- python3中的rang()函数
- Gitlab+Git实现版本控制系统
- sklearn机器学习之特征工程
- spring5.0学习笔记9
- java.util.BitSet 研究
- Java基础算法--排序
- Padavan设置无线中继
- MAC 下的SVN客户端 Versions、SmartSVN、Cornerstone
- PC项目中常用的方法总结 (不定时更新)
- java怎么取map中的key值,Java获取map中key和value的方法
- E. Array Shrinking
- Keil无法跳转到（go to definition）函数定义的地方，而是出现Browser
- 【加解密】在线加密工具推荐
- 这是一篇让你少走弯路的 JNI/NDK 实例教程(转)
- Qt框架类图大全，类继承关系一图搞定
- Tab 平板电脑重量比拚
- 高考后二十年的人生轨迹