html<details>标签代表用户可以根据需要查看或隐藏的附加详细信息。
它与标签一起使用,<summary>提供图例,可单击以根据需要展开/折叠详细信息。如果没有<summary>标签,浏览器应显示其自己的摘要/图例。
该<details>元素接受“流内容”,这意味着它接受可以在<body>HTML 文档中出现的大多数 HTML 元素。
标签<details>的写法为,在开始和结束标签之间插入<details></details>一个<summary>标签。可展开/可折叠的内容跟在标签后面<summary>(但也包含在元素的开始和结束标签之间<details>)。
<details> <summary>点击打开</summary> <p>可折叠内容...</p> </details>
<details>与标签一起使用<summary>来创建可扩展的内容。
<details> <summary>点击展开</summary> <p>如果您的浏览器支持此元素,它应该允许您展开和折叠这些详细信息。.</p> </details>
多个<details>元素
你可以有多个<details>元素,每个元素都会展开和折叠自己的内容。这时<summary>标签就派上用场了,否则你会看到一大堆标题细节没有其他东西可以区分它们。
该<details>标签可用于显示/隐藏 HTML 文档<body>元素中出现的大多数元素。其中包括文本、表单控件、图像等。<details>元素样式
也可以使用css为<details>元素添加样式。不仅如此,您还可以使用它为元素的各种状态(即open和closed)以及<summary>元素的状态设置样式<details>。换句话说,您可以根据用户是展开还是折叠控件,为<details>和元素指定不同的样式。<summary>
该<details>元素接受以下属性。
open指定详细信息是否应打开(对用户可见)或关闭(对用户隐藏)。
全局属性
以下属性是所有 HTML 元素的标准属性。因此,您可以将这些属性与 标签<details>以及所有其他 HTML 标签一起使用。
accesskey
autocapitalize
class
contenteditable
data-*
dir
draggable
hidden
id
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
part
slot
spellcheck
style
tabindex
title
translate
有关这些属性的完整解释,请参阅HTML 5 全局属性。
事件处理程序
事件处理程序内容属性可让您从 HTML 中调用脚本。当发生某个“事件”时,将调用该脚本。每个事件处理程序内容属性处理不同的事件。
onabort
onauxclick
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onlanguagechange
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
onscroll
onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel
大多数事件处理程序内容属性可以在所有 HTML 元素上使用,但某些事件处理程序对其使用时间以及适用元素有特定的规则。
本文来源:重庆seo博客
本文地址:https://focusonseo.cn/htmlbiaoqian/166.html
文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为重庆seo博客原创文章,转载或复制请以超链接形式并注明出处。