HTML5 details标签的基础知识_F11 - 专业站长和开发者的学习网站

本站首页收藏本站

广告位联系

APP正在开发中...

返回顶部

分享到

HTML5 details标签的基础知识

html5 来源：互联网作者：佚名发布时间：2024-11-09 11:47:06 人浏览

摘要

定义和用法 details标签规定用户可以根据需要打开和关闭的其他详细信息。 details标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下，小部件是关闭的。打开时，它会展开并显

定义和用法

<details> 标签规定用户可以根据需要打开和关闭的其他详细信息。

<details> 标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下，小部件是关闭的。打开时，它会展开并显示其中的内容。

任何类型的内容都可以放在 <details> 标签中。

提示：<summary> 标签与 <details> 结合使用，可为详细信息指定可见的标题。用户点击标题时，会显示出 <details> 定义的内容。

另请参阅：

HTML DOM 参考手册：Details 对象

浏览器支持

表中的数字注明了首个完全支持该元素的浏览器版本。

Chrome	Edge	Firefox	Safari	Opera
12.0	79.0	49.0	6.0	15.0

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <details> 元素：

details {

display: block;

}

属性

属性	值	描述
open	open	规定详细信息应该对用户可见（打开）。

实例

例子 1

定义用户可以按需打开和关闭的详细信息：

<summary>脚本之家介绍</summary>

<p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>

</details>

效果

脚本之家介绍

例子 2

使用 CSS 设置 <details> 和 <summary> 的样式：

<html>

<style>

details > summary {

padding: 4px;

width: 200px;

background-color: #eeeeee;

border: none;

box-shadow: 1px 1px 2px #bbbbbb;

cursor: pointer;

}

details > p {

background-color: #eeeeee;

padding: 4px;

margin: 0;

box-shadow: 1px 1px 2px #bbbbbb;

}

</style>

<body>

<summary>脚本之家介绍</summary>

</details>

</body>

</html>

details与summary标签

一，details标签

用于描述文档或文档某个部分的内容

二，summary标签

与details配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

您可能感兴趣的文章 :

原文链接 :

Tag : html5(168)

HTML5 details标签的基础知识

定义和用法 details标签规定用户可以根据需要打开和关闭的其他详细信息。 details标签通常用于创建用户可以打开和关闭的交互式小部件。默
HTML5使用details标签：展开/收缩信息

details 标签提供了一种替代JavaScript的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于details 标签，单击
HTML5实现本地摄像头拍照与照片上传的方法介绍

HTML5通过input type=file标签及其capture属性，允许网页调用本地摄像头进行拍照，提升了用户交互体验。本文将详细介绍如何使用HTML5和JavaScri
HTML5元素定位的介绍

1.元素定位为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。元素定位有四种，可
html5浏览器中实现高德地图定位功能(推荐)

HTML5是当前Web开发中最常用的技术之一，而地图应用又是其中一个非常常见的需求。高德地图是国内最受欢迎的地图服务提供商之一，他们提
使用HTML5新增的表单元素来增强表单功能介绍

随着HTML5标准的推广和普及，网页表单的设计也得到了极大的改进。HTML5引入了许多新的表单控件和属性，不仅提升了用户体验，还简化了前
HTML5中Checkbox标签介绍

在HTML5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本文将深入解析Checkbox标签的基本属性、样式自
HTML5中使用Noto Sans CJK字体的步骤

在HTML5中使用Noto Sans CJK字体的详细指南在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK是 Google 提供的一个优秀的免费字体系列，
HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属
Html5播放hls格式的视频代码

一、什么情况下需要播放当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这