如何使用details元素和summary元素
下面就是规范中的描述
The details element represents a disclosure widget from which the user can obtain additional information or controls.
— WHATWG HTML5 specification
理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在details我们可以放入我们任何想放入的内容.
浏览器的支持情况
在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 details 元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.
details 的使用 ***
这里有两个相关的元素:details和可选的
让我们来看下面的代码:
1 2 3 4 details summaryShow/Hide me/summary pPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas./p /details
你可以通过下面的链接察看效果see this in action over at j *** in.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.
OPen 属性
在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将detail默认的视觉属性通过布尔值作修改，让其当我们加载页面的时候是展开的：
1 2 3 4 details open summaryShow/Hide me/summary pPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas./p /details
注意，这里并没有 closed 属性，因为只要你移除 open 属性，执行的就是 closed 属性效果。
summary元素
我们已经简要的看了
的作用。因为它是短语内容，我们可以使用内联 (inline)标签 span;。我们为什么会有这种想法呢？也许这样子能更方便的通过而外样式控制显示效果或者像 spec 建议的那样：为一个表单元素增加一个 label标签。如果他能生效的话，至少能让我很顺手：
1 2 3 4 details summarylabel for="name"Name:/label/summary input type="text" id="name" name="name" / /details
常理看，我们点击 summary 的任何位置都应该展开 detail元素的内容。但是在这个例子中，我们点击summary并没有展开内容，因为你点击的是label他会将焦点放到 input标签-即使那部分内容被隐藏在details标签。
很明显，在这点需要更好的声明，你认为这个地方应该发生什么事情呢？可能某个浏览器生产商能看一下这个效果。
details元素多层嵌套
你可以在details中嵌套details，可以完美的案例查看这个效果：
1 2 3 4 5 6 7 8 9 10 11 12 13 details summaryQuestion 1/summary pstrongPellentesque habitant morbi tristique/strong senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. emAenean ultricies mi vitae est./em Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, codecommodo vitae/code, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. a href="#"Donec non enim/a in turpis pulvinar facilisis. Ut felis./p details summaryRelated documents/summary ul lia href="#"Lorem ipsum dolor sit amet, consectetuer adipiscing elit./a/li lia href="#"Aliquam tincidunt mauris eu risus./a/li lia href="#"Lorem ipsum dolor sit amet, consectetuer adipiscing elit./a/li lia href="#"Aliquam tincidunt mauris eu risus./a/li /ul /details /details
使用案例
在哪些情况时会用到 details?FAQ表可能是我们更先涌现的想法。大家经常使用手风琴效果是用在FAQ列表，所以 details 是这一效果的更佳效果。
考虑到这一系列内容，它可能被固定在某一区域，当我们滚动内容的时候。像这样子？
你也可以使用details来操作博客的评论内容，用户简介，下载列表，复杂的表单，或者像规范中描述下面的应用：
An example of the details element from the spec
实际上，只要你看看我写的wordpress，会发现有大量的使用 details的机会。让我们在评论中了解一下你的观点和想法。
样式格式化
你如何对这个定义样式？同时，在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例：
1 2 3 4 5 details summary::-webkit-details-marker { background: red; color: #fff; font-size: 500%; }
我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们如何将默认的组件Icon自定义呢？那就是用 属性选择器 (attribute selector),你可以用来检测 details元素是打开的还是关闭的，然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果，使用 :after pseudo-element元素定义成我们喜欢的背景图片：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 summary::-webkit-details-marker { display: none } summary:after { background: red; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 20px; } details[open] summary:after { content: "-"; }
在上面的例子中，我们使用文本 “+”和“-”来定义这个组件的状态，根据你的设计需要，你可能希望使用 :before来代替 :after，这两个为类元素都可以使用 image.
details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生，下面是我们装饰后的效果，下面是截屏效果：
Styled details element in Chrome
如果我们可以用过css的动画效果来修饰打开和关闭时的状态，这样设计就更完美了，但是目前为止我们还没有办法做到这点。
可访问性
不幸的是在我们写这篇文章的时候，detailsh还无法通过键盘访问，Steve Faulkner 写到：
Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.
自己试一下，如果你使用鼠标打开 details 元素，你可以使用键盘到达内容部分，但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态，不过我们相信这个小国很快会被改进。
向后兼容
在我们抱怨其在IE6中无法生效之前，感谢这些聪明的人们，我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站very handy collection of cross-browser polyfills，这两个都需要 jQuery:
details fallback via jQuery by Mathias Bynens
Another details alternative, also based on jQuery by Manuel Bieh
1 2 3 4 5 script if (!("open" in document.createElement("details"))) { alert("No details"); } /script
更新：感谢的评论。上面的代码并不是100%可靠，因为他在某些chrome版本下会失败。你可以使用this Modernizr snippet。
我们为何使用这种类型的交互？
言归正传，为什么会有这个效果在HTML5中？就像其它HTML5的效果，使用这种效果能够更简单。比如时间选择，Date pickers, sliders, progress indicators, 现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么？如果是 tabs 标签那就好了。
总结
在这篇文章中，我们阐述了如何去使用details和summary元素。details是一个新元素，通过和summary元素通过浏览器可以创造手风琴的交互效果。
目前，details只能在 Chrome 工作，不过我们期待这会在不久的将来有所改变。这里只有一个css trick我们可以使用 ::-webkit-details-marker,但是我们拥有很多的其它css。让我们在评论中知道关于details元素你在这方面的经验和想法。
中文原文：details 和 summary 元素
英文原文：The details and summary elements
http://www.alixixi.com/web/a/2011090273705.shtml
html5里面新增的用于网页布局的标签有哪些
article标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:article/article
HTML4:div/div
aside标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:asideAside 的内容是独立的内容，但应与文档内容相关。/aside
HTML4:divAside 的内容是独立的内容，但应与文档内容相关。/div
audio 标签定义声音，比如音乐或其他音频流。
HTML5:audio src="someaudio.wav"您的浏览器不支持 audio 标签。/audio
HTML4:object type="application/ogg" data="someaudio.wav"param name="src" value="someaudio.wav"/object
canvas 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:canvas id="myCanvas" width="200" height="200"/canvas
HTML4:object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"/object
command 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: command onclick=cut()" label="cut"
HTML4: none
datalist 标签定义可选数据的列表。与 input 元素配合使用，就可以 *** 出输入值的下拉列表。
HTML5: datalist/datalist
HTML4: see combobox.
details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 legend 一起使用，来 *** detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: details/details
HTML4: dl style="display:hidden"/dl
embed 标签定义嵌入的内容，比如插件。
HTML5: embed src="horse.wav" /
HTML4: object data="flash.swf" type="application/x-shockwave-flash"/object
figcaption 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的之一个或最后一个子元素的位置。
HTML5: figurefigcaptionPRC/figcaption/figure
HTML4: none
figure 标签用于对元素进行组合。使用 figcaption 元素为元素组添加标题。
HTML5: figurefigcaptionPRC/figcaptionpThe People's Republic of China was born in 1949.../p/figure
HTML4: dlh1PRC/h1pThe People's Republic of China was born in 1949.../p/dl
footer 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: footer/footer
HTML4: div/div
header 标签定义 section 或 document 的页眉。
HTML5: header/header
HTML4: div/div
hgroup 标签用于对网页或区段（section）的标题进行组合。
HTML5: hgroup/hgroup
HTML4: div/div
keygen 标签定义生成密钥。
HTML5: keygen
HTML4: none
mark主要用来在视觉上向用户呈现那些需要突出的文字。mark标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: mark/mark
HTML4: span/span
meter 标签定义度量衡。仅用于已知更大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: meter/meter
HTML4: none
nav 标签定义导航链接的部分。
HTML5: nav/nav
HTML4:ul/ul
output 标签定义不同类型的输出，比如脚本的输出。
HTML5: output/output
HTML4: span/span
progress 标签运行中的进程。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: progress/progress
HTML4: none
rp 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: ruby汉 rtrp(/rpㄏㄢˋrp)/rp/rt/ruby
HTML4: none
rt 标签定义字符（中文注音或字符）的解释或发音。
HTML5: ruby汉 rt ㄏㄢˋ /rt/ruby
HTML4: none
ruby 标签定义 ruby 注释（中文注音或字符）。
HTML5: ruby汉 rtrp(/rpㄏㄢˋrp)/rp/rt/ruby
HTML4: none
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: section/section
HTML4: div/div
source 标签为媒介元素（比如 video 和 audio）定义媒介资源。
HTML5: source
HTML4: param
summary 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的之一个子元素。
HTML5: detailssummaryHTML 5/summaryThis document teaches you everything you have to learn about HTML 5./details
HTML4: none
time 标签定义日期或时间，或者两者。
HTML5: time/time
HTML4: span/span
video 标签定义视频，比如电影片段或其他视频流。
HTML5: video src="movie.ogg" controls="controls"您的浏览器不支持 video 标签。/video
HTML4:object type="video/ogg" data="movie.ogv"param name="src" value="movie.ogv"/object
Html5新增的标签有哪些
article标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
aside标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
audio 标签定义声音，比如音乐或其他音频流。
canvas 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
command 标签定义命令按钮，比如单选按钮、复选框或按钮。
datalist 标签定义可选数据的列表。与 input 元素配合使用，就可以 *** 出输入值的下拉列表。
details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 legend 一起使用，来 *** detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
embed 标签定义嵌入的内容，比如插件。
figcaption 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的之一个或最后一个子元素的位置。
figure 标签用于对元素进行组合。使用 figcaption 元素为元素组添加标题。
footer 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
header 标签定义 section 或 document 的页眉。
hgroup 标签用于对网页或区段（section）的标题进行组合。
keygen 标签定义生成密钥。
mark主要用来在视觉上向用户呈现那些需要突出的文字。mark标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
meter 标签定义度量衡。仅用于已知更大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
nav 标签定义导航链接的部分。
output 标签定义不同类型的输出，比如脚本的输出。
progress 标签运行中的进程。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进程。
rp 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
rt 标签定义字符（中文注音或字符）的解释或发音。
ruby 标签定义 ruby 注释（中文注音或字符）。
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
source 标签为媒介元素（比如 video 和 audio）定义媒介资源。
summary 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的之一个子元素。
time 标签定义日期或时间，或者两者。
video 标签定义视频，比如电影片段或其他视频流。
html 标签的使用
border:none; 设置这个就不会出现边框了；
不过你那个标签 是html5的吧，以前没见过。呵呵~~
HTML details 元素的样式可以修改吗
HTML details 元素的样式可以修改：
可以修改；就是details这个标签的兼容性不太好！
http://www.w3school.com.cn/tags/tag_details.asp