<details>是HTML5的新标签，用于描述文档或文档某个部分的细节。

目前只有 Chrome 和 Safari 6 支持 <details> 标签。

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

值：

open：值为open，功能是定义details是否可见

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>交互元素details元素的使用</title>

 <style type="text/css" >

 body{font-size:12px;}

 span{font-weight:bold;}

 details{

     overflow:hidden;

     height:0;

     padding-left:200px;

     position:relative;

     display:block;

     }

 details[open]{height:auto;}

 </style>

 </head>

 <body>

 <span>隐藏</span>

 <details>

 <summary>我的网站</summary>

 www.calamus.cn

 </details>

 <span>显示</span>

 <details open="open">

 <summary>我的网站</summary>

 www.calamus.cn

 </details>

 </body>

 </html>

chrome下的效果图

HTML5--》details的更多相关文章

  1. [转] 《高性能HTML5》读后整理的Web性能优化内容

    读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...

  2. 【03】《论道html5》（全）

    [03]   <论道html5>   共320页. 魔芋:已看完.   读后感:html5各个新特性的介绍.介绍了canvas,web socket,audio,video,web wor ...

  3. HTML5 标签 details 展开 搜索

    details有一个新增加的子标签--summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. 默认状态为 收缩状态 设置为展开状态为 <d ...

  4. 《HTML5》 Audio/Video全解

    一.标签解读 <audio> 标签属性 <audio id="media" src="http://www.abc.com/test.mp3" ...

  5. HTML5 Drop API

    转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

  6. HTML5魔法堂：全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  7. 【HTML5】使用多媒体

    HTML5 支持直接在浏览器中播放音频和视频文件,不需要使用Abode Flash这样的插件. 1. 使用 video 元素 可以用video 元素在网页里嵌入视频内容. 其基本用法如下: <! ...

  8. html和xhtml和html5一些区别和笔记

    XHTML,HTML XHTML 与 HTML 4.01 标准没有太多的不同, XHTML1.0是XML风格的HTML4.01,标签的规范更加严格 , W3C一直是推崇XHTML这种严格类型的语法, ...

  9. HTML5性能优化

    HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5 ...

  10. HTML5性能优化[转]

    在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5>前两章高度相 ...

随机推荐

  1. OkHttp 源码分析

    在工作中用到封装HTTP传输的OkHTTP,OkHttp是相对成熟的解决方案,同时也是开源项目.本文将从源码角度看下OkHttp是如何实现一些网络操作的. HTTP GET: OkHttpClient ...

  2. POJ 1066 Treasure Hunt（计算几何）

    题意:给出一个100*100的正方形区域,通过若干连接区域边界的线段将正方形区域分割为多个不规则多边形小区域,然后给出宝藏位置,要求从区域外部开辟到宝藏所在位置的一条路径,使得开辟路径所需要打通的墙壁 ...

  3. c++学习-多态性

    强制转换父类对象为子类 #include<iostream> #include<string> #include <typeinfo> using namespac ...

  4. 关于maven的一些常见用法

    1: 查看插件的目标信息:mvn help:describe 2: 生成javadoc并指定编码:mvn javadoc:javadoc -Dencoding=UTF-8 -Dcharset=UTF- ...

  5. 编写一个程序对Largest函数进行测试,找出一组数据的最大值

    源程序代码: import java.util.Scanner; public class findmax { public static void main(String[] args) { // ...

  6. 转__Android开源项目（三 完结篇）

    http://www.csdn.net/article/2013-05-21/2815370-Android-open-source-projects-finale/1 截至目前,在GitHub“最受 ...

  7. Java中的hashCode 方法

    http://www.cnblogs.com/dolphin0520/p/3681042.html

  8. HTTP 错误 500.19 - Internal Server Error

    ylbtech-Error-IIS: HTTP 错误 500.19 - Internal Server Error 1.A,错误代码返回顶部 错误摘要 HTTP 错误 500.19 - Interna ...

  9. windows下Gulp入门详细教程 &&gulp安装失败的原因（红色）

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  10. PHP每日签到时怎么实现

    以淘宝网领取淘金币的签到系统为例:目标:第一天签到增加5个积分:第二天连续签到则增加8个积分:第三天连续签到,增加11个积分,第 四天连续签到,增加15个积分:第五天连续签到,增加19个积分:第六天连 ...