html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。3 L; I- w- b* v6 |( a
用法$ ?$ ~$ {1 z% p
一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。2 ~# C% h4 q- o, }( e2 E
其大致写法如下：! y: I: |3 O- P0 V" @3 l
<details>
5 P* i' v+ W5 r& n# V<summary>google nexus 6</summary
1 ?4 h2 _ D" b# ]3 b7 d<p>商品详情：</p>
( L7 S/ E4 r- s+ R. }& U<dl>
- E/ x. h# w% Y& c! o. f# Q/ w<dt>屏幕</dt>1 m1 z. O! X+ O- w1 w. l" w
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>. m% ~ H7 u8 U/ y/ g6 _ N' X
<dt>电池</dt>
3 U( G# t# N W3 s: R$ j; v8 p<dd>3220 mah</dd>; B$ q9 `% V2 T4 l" V! @. @
<dt>相机</dt>3 U; K) T. `: `
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>' p# x4 D* Q/ m# U
<dt>处理器</dt>
0 B$ `9 S0 K9 h7 k( o& A<dd>qualcomm? snapdragon™ 805 processor</dd>; X( s! |* z. C0 a |4 {
</dl>
' R8 `! ~! n7 L6 h% N, z' {2 C</details>1 P0 ?0 ^, s$ s3 `
首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。' Q! O7 m \. [
上面代码呈现出来的效果会是下面这样的：
/ ?1 | X- ?9 r, C* N
3 {* o: h- e9 [4 \# v8 `( \html5 <details> 标签 三联& c; r* Y& b* \% Y, [: B" a
最开始详情是隐藏的，当点击时都会展现。0 J0 |) r4 o- H, p& f
open 属性. Z* x# l$ ~# r, [5 v8 N, a: m
当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。% ?% v% y) v8 a# ?
<details open>
0 g: [" n0 K2 P& d& q. e% h+ f<summary>google nexus 6</summary>
2 F% N" V3 i# p9 Z. w5 e<p>商品详情：</p>
$ {0 v( h, O/ H8 _7 Z* L5 a<dl>: x( _( m3 I) O( s
<dt>屏幕</dt>- A8 C* q- X' i; C. K+ H; H; T8 V9 ]
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
( B7 w) D9 |$ x P: ^* _<dt>电池</dt>) o% y# R0 f4 R! f! ?1 F
<dd>3220 mah</dd>
$ {& d% j, |$ ?- [<dt>相机</dt>
( L6 W$ J! j/ K2 T- _+ t0 M<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
3 B0 f. E; Y; X<dt>处理器</dt>
8 `) }1 C$ m4 |- d& `$ s<dd>qualcomm? snapdragon™ 805 processor</dd>
) ]) ~: `% X0 Y- B5 @; s$ o0 K</dl>0 |- x& E8 [: n% i6 b
</details>
: |# ]9 O: ?$ {; D此时默认会把详情展开，而点击标题后会折叠起来。' R9 O# r$ O8 b+ U. o- o. p
示例4 O( \% ?, @; y1 m; x& h `
示例如上面那样，预览在线版本可点击此处。
, o, N' x/ Y0 @0 Y& h# y6 y. b# c浏览器兼容性
& o5 N7 |& u5 V; H }# S' `. B# b由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。6 p5 P, J- y# Z) H! z4 u
可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。. J3 g; i, e* W2 K' _; |' y. S
% j% n; [- j3 a% }* T
$ k7 Z* h- |- s+ I7 A) M
更多网页制作信息请查看： 网页制作 |
|
拥抱AI搜索新时代！GEO优化成为企业流量增505网络资讯
GEO优化如何让企业流量翻倍？404网络资讯
GEO优化，企业抢占流量高地的制胜法宝404网络资讯
8 B0 S- |5 w" |+ l# H; h4 U1 Y* L
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡