html 标签的使用方法详解-html教程-PHP中文网

html 标签的使用方法详解

黄舟

发布： 2017-06-21 10:34:42

原创

10847人浏览过

tml5 中新增的

标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。

用法

一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。

其大致写法如下：

<details>
    <summary>Google Nexus 6</summary>
    <p>商品详情：</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10624">
                            <img src="https://img.php.cn/upload/webcode/000/000/014/176302800879420.jpg" alt="保洁家政服务公司网站模板(响应式)1.4.2">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10624">保洁家政服务公司网站模板(响应式)1.4.2</a>
                            <p>人人站CMS是全新内核且开源免费的PHP企业网站开发建设管理系统，是一套高效、简洁、 强悍的PHP CMS源码，能够满足各类企业网站开发建设的需要。系统采用简单的模板标签，只要懂HTML就可快速开发企业网站。官方提供了大量网站模板免费下载和使用，将致力于为广大站长和企业提供简单易用的网站开发建设解决方案。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="保洁家政服务公司网站模板(响应式)1.4.2">
                                <span>7</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10624" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="保洁家政服务公司网站模板(响应式)1.4.2">
                        </a>
                    </div>
                
    <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>

登录后复制

首先是

标签，里面接着是标题

，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的HTML元素作为详情内容，这些内容需要在点击

才会呈现。

立即学习“前端免费学习笔记（深入）”；

上面代码呈现出来的效果会是下面这样的：

最开始详情是隐藏的，当点击时都会展现。

open 属性

当然，你也可以通过给

标签设置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>

登录后复制

此时默认会把详情展开，而点击标题后会折叠起来。

示例

示例如上面那样，预览在线版本可点击此处。

浏览器兼容性

由于是HTML5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅Chrome, Safari 8+ 和Opera 26+支持此标签。

可喜的是，如果你在caniuse开启了「显示来自UC浏览器的结果」选项的话，会发现，国产的UC浏览器也支持了此标签。