HTML5 <details> 标签

当前位置 : 首页 > 网页制作 > html5 > HTML5 <details> 标签

HTML5 <details> 标签

来源: 作者: 时间:2016-01-30 08:53
HTML5 中新增的details标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。用法一般情况下,details用来对显示在页面的内容做进一步骤解释。其展现出来的效
HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。
 
 
用法
一般情况下,details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。
 
其大致写法如下:
 
 
<details>
<summary>Google Nexus 6</summary>
<p>商品详情:</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>电池</dt>
<dd>3220 mAh</dd>
<dt>相机</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>处理器</dt>
<dd>Qualcomm® Snapdragon™ 805 processor</dd>
</dl>
</details>
首先是<details>标签,里面接着是标题<summary>,这里面的内容一般简短,具有总结性,会展示在页面。接着可以跟任意类型的HTML元素作为详情内容,这些内容需要在点击<summary>才会呈现。
 
上面代码呈现出来的效果会是下面这样的:
 
5 details tag
 
最开始详情是隐藏的,当点击时都会展现。
 
 
open 属性
当然,你也可以通过给<details>标签设置open属性让它默认为展开状态。
 
 
<details open>
<summary>Google Nexus 6</summary>
<p>商品详情:</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>电池</dt>
<dd>3220 mAh</dd>
<dt>相机</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>处理器</dt>
<dd>Qualcomm® Snapdragon™ 805 processor</dd>
</dl>
</details>
此时默认会把详情展开,而点击标题后会折叠起来。
 
 
Tag:
网友评论

<