返回列表 发新帖

html5

411.2k 10
swmozowtfl 发表于 2015-7-10 20:45:03|湖北 | 查看全部 阅读模式
html5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。
+ T* c6 T: [+ C7 z, I2 `; Y用法
+ s9 K2 J# e) c2 U. H2 {一般情况下,details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。
$ Q. ]. _/ y+ P2 ~其大致写法如下:6 d0 d: f' I4 E% O7 F
<details>: J1 k0 U7 R" T- n+ }3 w6 S, _
<summary>google nexus 6</summary1 q8 o" Y! b8 e
<p>商品详情:</p>
$ ?9 t4 I/ Z" V/ y4 J. e<dl>
1 d5 C3 l% }. @% l9 U  w: E: T. |$ r<dt>屏幕</dt>+ E5 o$ L5 L! v( @
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
; A9 ^5 p: _8 v<dt>电池</dt>
" Z  l6 X7 ]5 M" ^/ S+ G; |<dd>3220 mah</dd>
2 G% `! t7 j* k$ M' E8 ]<dt>相机</dt>
' M$ _) |: ?  r8 t3 J. A. s<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>% j# \6 Y& k  [5 |1 G
<dt>处理器</dt>
+ u% `" e% j8 C% H  G<dd>qualcomm? snapdragon&#8482; 805 processor</dd>
/ }1 W4 x! b5 {5 p2 ?0 T</dl>
' @; O, [: D, u0 \3 n5 `</details>9 m8 w* @7 l9 `8 h8 o2 Z6 G" ^
首先是<details>标签,里面接着是标题<summary>,这里面的内容一般简短,具有总结性,会展示在页面。接着可以跟任意类型的html元素作为详情内容,这些内容需要在点击<summary>才会呈现。( J- q9 \, q7 }2 J7 S/ u+ p7 W
上面代码呈现出来的效果会是下面这样的:
. X- b5 M8 ?8 ~4 R

8 P& j$ A$ M* A& y+ h) I                               
登录/注册后可看大图

* ^, A# Q" L" ~html5 <details> 标签 三联
+ g$ B7 X, o. {& b) P最开始详情是隐藏的,当点击时都会展现。/ H3 C( z) v% Z
open 属性9 r) J" G1 F$ @; z( w& Q1 ^
当然,你也可以通过给<details>标签设置open属性让它默认为展开状态。
2 R' z: t8 X" n0 ^1 g5 }% d<details open>
0 G* v3 s4 o& m: H8 J- Z<summary>google nexus 6</summary>0 @7 {# S- [% d; n5 d
<p>商品详情:</p>
  h" s  l, `4 Z( n2 H<dl>& w" U( y+ x" m3 ^7 a/ r( }( o( X0 ^7 ~0 e
<dt>屏幕</dt>
' {( x5 @$ N- P" m<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
: y& O, c' I- O6 Q9 {1 f# O<dt>电池</dt>
+ f  Y6 v; G  F8 y$ W- @6 T# `+ v<dd>3220 mah</dd>
9 y9 Y4 L% E0 j& |& g0 O9 H<dt>相机</dt>
9 `9 R# L/ n/ L7 n/ s9 X<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>" G+ Q: c. c1 V5 {" c' T
<dt>处理器</dt>
$ ~0 ]0 W8 s1 ?<dd>qualcomm? snapdragon&#8482; 805 processor</dd>
- v8 Y0 u" U2 P5 [# g8 x</dl>) {) A+ X. Y# h5 |& i/ r$ k
</details>) E) S0 Y! n3 b& Z
此时默认会把详情展开,而点击标题后会折叠起来。" o4 b# k% k; w/ J+ L; z* c, D
示例
7 d1 v' V1 \) S& o, @0 }示例如上面那样,预览在线版本可点击此处。
. @) J! N0 [: I( p浏览器兼容性/ g3 T) `5 A: ~9 z$ F8 d8 ]
由于是html5新标签,浏览器支持情况不是很理想。从来自caniuse的数据来看,目前仅chrome, safari 8+ 和opera 26+支持此标签。7 g6 B4 k1 @. ^5 o2 ?" l' u
可喜的是,如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话,会发现,国产的uc浏览器也支持了此标签。- b2 }( I  _( P! m- }$ Q5 I0 d

1 R( j  v/ i% D$ h0 p# v* J# f. I: R                               
登录/注册后可看大图

/ @$ u5 O. l' q% f" h8 q6 J0 O6 b* s) I# H) a% U6 c# G% m5 B! Q
更多网页制作信息请查看: 网页制作

回复|共 10 个

seazvyt 发表于 2016-2-14 21:22:19|德国 | 查看全部
楼主说的是什么?我是小白,好像还没看明白!
Mqokjdvq 发表于 2016-2-14 21:21:16|Reserved | 查看全部
(⊙o⊙)…好长啊,我虽然回复不了那么多字,但十五字还是有的。
alapScady 发表于 2016-2-14 21:22:19|INNA | 查看全部
晕倒`````不要造我的谣言哦~~小心我打你pp~~嘿嘿~~~~
wwdu926a 发表于 2016-2-14 21:21:59|丹麦 | 查看全部
@,@..是什么意思呀?
seazvyt 发表于 2016-2-14 21:21:49|日本 | 查看全部
哈哈 我支持你
tohme 发表于 2016-3-10 11:40:51|美国 | 查看全部
风沙就是由无数松散沙粒组成的,但是他们却又紧密的联系在一起,那股叱诧风云,横击 而过的气概相信大家在作者的文章里也能体会的出来。如果有读者还不能体会的,请参考
effoggikeftor 发表于 2016-3-10 11:40:04|罗马尼亚 | 查看全部
哈哈 怎么说来眼睛小真的很好 哈 哈哈~~~~
Acropozelan 发表于 2016-3-10 11:40:29|澳大利亚 | 查看全部
下流~~~~加~~~~~至极~~~~~~
GoodyFouppy 发表于 2016-3-10 11:41:08|欧洲和中东地区 | 查看全部
楼猪.重量级人物阿.
bqtklouu 发表于 2016-3-10 11:40:04|日本 | 查看全部
刚才我还看见了呢.

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表