HTML5教程：detalis标签使用详细说明
2024-09-05 07:18:34
供稿：网友
网页制作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为我们的确带来了很大方便。
