代码:

<details open="open">
<summary>幸福度调查结果</summary>
<p>对人们幸福度的调查</p>
<ul>
<li>很幸福 15%:
<meter value="15" max="100" min="10" low="15" high="60"></meter>
</li>
<li>幸福 25%:</li>
<li>一般 15%:
<meter value="55" max="100" min="10" low="15" high="60"></meter>
</li>
<li>不幸福 15%:
<meter value="70" max="100" min="10" low="15" high="60"></meter>
</li>
</ul>
</details>

结果

当details标签内无open属性时,打开浏览器,ul里面的内容是隐藏的

details标签常和summary标签一起使用,为details标签添加标题。

details标签和summary标签的更多相关文章

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

    ​1.详情(details)与概要(summary)标签 (1)作用:我们希望用尽可能少的空间来表达更多的信息,利用summary标签来描述概要信息,用details标签来描述详情信息 (2)格式: ...

  2. 自学HTML5第二节(标签篇---新增标签详解)

    HTML5新增标签: <article> 标签 规定独立的自包含内容.一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源 ...

  3. Html5标签——Html5新增标签的含义和使用

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

  4. 【转】object标签和embed标签

    我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...

  5. @Autowired标签与 @Resource标签 的区别

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...

  6. struts标签与jstl标签互换

    近期在做struts切换spring mvc时发现代码中使用了大量的struts标签,对常用的struts标签做了总结,首先需要引入 <%@ taglib prefix="c" ...

  7. JSP自定义标签之简单标签入门

    在sun官方文档上有下面这样一段话. 官方文档声明 public interface SimpleTag extends JspTag Interface for defining Simple Ta ...

  8. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  9. JSTL标签之core标签的使用

    参考:http://blog.csdn.net/qq_25827845/article/details/53311722 核心标签库的导入 <%@ taglib prefix="c&q ...

随机推荐

  1. 广州Uber优步司机奖励政策(2月1日~2月7日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. I2C和SCCB协议的小区别和误区

    I2C采用的是7位地址数据,首字节最低位代表读写位,第二字节SUB寄存器高位为1表示自动加subaddress SCCB采用的是8位地址数据,比如0x42,B01000010 使用I2C协议时,第一次 ...

  3. Least Common Multiple

    地址:http://www.codewars.com/kata/5259acb16021e9d8a60010af/train/python 题目: Write a function that calc ...

  4. C语言中volatilekeyword的作用

    一.前言 1.编译器优化介绍: 由于内存訪问速度远不及CPU处理速度,为提高机器总体性能,在硬件上引入硬件快速缓存Cache,加速对内存的訪问.另外在现代CPU中指令的运行并不一定严格依照顺序运行,没 ...

  5. [Redux] Wrapping dispatch() to Log Actions

    We will learn how centralized updates in Redux let us log every state change to the console along wi ...

  6. PHP汉字转拼音的两种方法+PHP提取汉字(中文)方法

    方法一:依据ASCII码转换,GB2312库对多音字也无能为力. GB2312标准共收录6763个汉字,不在范围内的汉字是无法转换.如:中国前总理朱镕基的"镕"字. GB2312中 ...

  7. hdu2030java

    汉字统计 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissio ...

  8. java Map使用Object 做为Key的问题

    近期在看dnsjava 源码的时候,不经意间发现一个自己没有想过的问题: HashMap 如何使用key去查找对应的value的,这个问题很难用语言描述的清楚,那就使用代码来进行说明吧! public ...

  9. Java基础知识强化之网络编程笔记03:UDP之UDP协议发送数据 和 接收数据

    1. UDP协议发送数据 和 接收数据 UDP协议发送数据: • 创建发送端的Socket对象 • 创建数据,并把数据打包 • 调用Socket对象的发送方法,发送数据包 • 释放资源  UDP协议接 ...

  10. Effective C++ 笔记二 构造/析构/赋值运算

    条款05:了解C++默默编写并调用哪些函数 编译器默认声明一个default构造函数.一个copy构造函数.一个copy assignment操作符和一个析构函数.这些函数都是public且inlin ...