details和summary标签

用于文档说明，有自带收缩、展开功能

<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

</body>
</html>

http://www.w3school.com.cn/tiy/t.asp?f=html5_summary

时间： 2024-10-04 01:00:48

details和summary标签的相关文章

HTML5每日一练之details展开收缩标签的应用

details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. detalis标签: 案例1: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conte

HTML连载10-details标签&summary标签&marquee标签

?1.详情(details)与概要(summary)标签 (1)作用:我们希望用尽可能少的空间来表达更多的信息,利用summary标签来描述概要信息,用details标签来描述详情信息 (2)格式: <details> <summary>概要信息</summary> 详细信息 </details> 我们可以看到有一个倒三角形点击这个三角形,便可以将详细信息折叠或者展开.在HTML中,例如:淘宝网的一个实例,我们把鼠标放到汉字选项的时候,可以看到右边展开了一些

三个不常用的HTML元素：<details>、<summary>、<dialog>

前面的话 HTML5不仅新增了语义型区块级元素及表单类元素,也新增了一些其他的功能性元素,这些元素由于浏览器支持等各种原因,并没有被广泛使用文档描述 <details>主要用于描述文档或文档某个部分的细节,与<summary>配合使用可以为<details>定义标题.标题是可见的,用户点击标题时,显示出details [注意]这两个标签只有chrome和opera支持 <details> 该标签仅有一个open属性,用来定义details是否可见(默认为不

h5交互元素details标签

details是h5新增的交互元素,details与 summary 标签配合使用可以为 details 定义标题.默认情况下,不显示 details 标记中的内容.当用户点击标题时,会显示出 details. details元素的常用属性如下: open:值为open,功能是定义details是否可见. subject:值为sub_id,功能是设置元素所对应项目的ID号. draggable:值为true或false,功能是设置是否可以拖动元素,默认值是false. 简单的details示例:

html5新增的标签和使用的方法

html5新增的标签: /*<article> 标签定义独立的内容.*/ <article> <h1>标题</h1> <a href="#">你好</a> <p>这是一段文件内容</p> </article> /*<aside> 标签定义其所处内容之外的内容. 提示:提示:<aside> 的内容可用作文章的侧栏.*/ <p>Me and my

深入剖析 HTML5

作为新一代的 HTML 标准,HTML5 不仅强化了 Web 网页的表现性能,还追加了本地数据库等 Web 应用的功能.虽然 HTML5 标准仍处于完善之中.然而,大部分新版本的浏览器已经能够支持某些 HTML5 的功能了.HTML5 标准所描述的功能非常强大,如:它提供了一些新的元素和属性,例如 <nav>(网站导航块)和 <footer> 等等,这种标签将有利于搜索引擎的索引整理.同样,也加入很多新的 JavaScript 对象和方法,使得我们可以基于更多的接口 API 开发功

web前端入门到实战：纯HTML做出几个实用网页效果

在我们以往看到的页面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我将介绍如何使用纯HTML打造属于自己的实用效果. 1.?**折叠手风琴** 使用Details和Summary标签可以创建没有JavaScript代码的可折叠手风琴. 效果: ? HTML <details> <summary>Languages Used</summary> <p>This page was written in HTML and CSS. The CSS was

HTML5 <details> 标签

HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法一般情况下,details用来对显示在页面的内容做进一步骤解释.其展现出来的效果和jQuery手风琴插件差不多. 其大致写法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <details> <summary>Google Nexus 6</summary> <p>商品详情:</p> <

html5常用标签

一.主体结构 header 页面头部,不同与<head></head> aside 边栏 nav 外部链接集合 section 章节或段落 article 类似文章.摘要或留言POST等形式的记录(一般搭配内嵌头部.尾部.底部结构使用) hggroup 类似子标题,标题信息.可选标题.TAG标签这样的数据,还是英文更好理解一些,heading of a section address 联系信息,一般用在article或body锚元素周围 footer 页脚二.HTML 5元素标记