HTML5教程:detalis标签使用详细说明

2012-02-19 15:51:54  来源:网页教学网 

网页制作Webjx文章简介:details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。

details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。
注:目前仅Chrome支持此标签。

details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩。

detalis标签:

案例1:
  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • <title>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习</title>
  • </head>

  • <body>
  • <details>
  • <summary>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习</summary>
  • <p>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习</p>
  • </details>
  • </body>
  • </html>



如果details中不存在summary标签会怎样呢,其实当details元素内没有summary标签的时候,浏览器在解析的时候会提供一个默认的文字,比如“查看详细”诸如此类的本地化文字,浏览器同样再会提供一个诸如上下箭头之类的图标。比如下面的案例2就是一个不存在summary子标签的例子。


案例2:
  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • <title>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习</title>
  • </head>

  • <body>
  • <details>
  • <p>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习</p>
  • </details>
  • </body>
  • </html>



有的时候,我们需要detalis中的内容默认为展开状态怎么办?
其实HTML5也已经为我们想到了,如果有着方面的需求,我们只需要加入一个属性即可,如案例3。


Open属性:

将案例1的代码修改后如下:

案例3:
  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • <title>HTML5每日一练之details展开收缩标签的应用</title>
  • </head>

  • <body>
  • <details open>
  • <summary>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习</summary>
  • <p>网页教学网提供最新的网页制作、网页设计、网页特效,为个人网站提供网页素材模板和网页视频学习</p>
  • </details>
  • </body>
  • </html>


由此可见,HTML5为我们的确带来了很大方便。
更多