html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。7 C% Z2 P" I) Y4 {
用法, u* J9 c! w& P9 n0 p1 Y% Z
一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。" x% ~; X: ~ l; O( ]# s
其大致写法如下：* G2 I7 @5 E# K8 b9 ]2 ]
<details>
7 u' ~1 {* a& ^5 Z0 r<summary>google nexus 6</summary
& T- K: e( G: M/ L8 C! c<p>商品详情：</p>
: _/ S4 V1 h6 n8 L<dl>; R8 K4 `1 q+ |* o1 ^' l7 n9 d
<dt>屏幕</dt>; _- Z) _; Z; W y- x2 M1 W
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>7 D: _6 h2 k8 ?8 J' f6 j
<dt>电池</dt># E4 i6 h* U; B
<dd>3220 mah</dd>
; M9 ?1 \* G( d8 }3 A/ X4 c<dt>相机</dt>
1 i' y; j5 e! w1 U4 f% n<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
5 a$ I8 Z I* w' s<dt>处理器</dt>* J; _4 ^- Y$ n/ R( F- h
<dd>qualcomm? snapdragon™ 805 processor</dd>8 E7 Y0 I# M8 G9 m. H( ~7 O0 e# d
</dl>
9 ~0 V# r: w" h1 }* K! _</details>
" ?/ v% @% e; S" ~6 O首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。8 H: x. v/ T% Z+ }
上面代码呈现出来的效果会是下面这样的：
) g, X, t/ r2 i0 \) i0 J3 @' Y1 b$ W/ P0 l8 z! `6 e+ M- }
html5 <details> 标签 三联
3 z1 P6 h! c. s. M5 m8 y. C7 a最开始详情是隐藏的，当点击时都会展现。- ?4 I/ d l7 C; o
open 属性6 T( ?) G$ ^, c
当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。
p! d$ H/ }0 Q* [( r1 T: g* D<details open>0 E2 t4 z' ]4 N' h9 A
<summary>google nexus 6</summary>2 x9 @+ p7 l( r: V
<p>商品详情：</p>+ j6 b) T3 c6 m3 D( K# b
<dl>1 ~4 H: Z, l- N# n5 d- N; z6 @
<dt>屏幕</dt>5 o- ?' P z7 s0 B# ]2 j% ]* b6 C B
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
% {3 s4 d- Y* s8 f& ?<dt>电池</dt>1 r z: O; g9 _5 f1 b. b
<dd>3220 mah</dd>
: M" Q$ X4 M2 h/ f g$ }8 |! z! ]. V<dt>相机</dt>+ E4 Y, x3 }, R7 l0 K9 U4 D" d
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
3 U2 n9 a$ _/ Q8 W7 J<dt>处理器</dt>1 f5 l5 u" Q& G8 O
<dd>qualcomm? snapdragon™ 805 processor</dd>
, u( t3 }# d4 H* I</dl>. U" E/ U3 w. \' F; i% n3 q
</details>
% c- ^3 O ~! G9 \5 x此时默认会把详情展开，而点击标题后会折叠起来。
4 I3 T( `8 S; v+ ]示例) L2 G: M; ]' j, b) l4 b
示例如上面那样，预览在线版本可点击此处。/ p# c1 Z3 ]5 y( @0 ^6 v; F8 ~
浏览器兼容性
7 h: q1 X; V- O$ G! {由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。
3 D1 j$ R' o+ v* |( ?; y可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。' C- f0 c7 P2 F4 A3 v) z( z+ A
' n5 L1 h1 _& e9 |6 C
& }" ]- L. K2 {更多网页制作信息请查看： 网页制作 |
|
拥抱AI搜索新时代！GEO优化成为企业流量增505网络资讯
GEO优化如何让企业流量翻倍？404网络资讯
GEO优化，企业抢占流量高地的制胜法宝404网络资讯
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡