介绍
小编给大家分享一下html5中细节标签的作用是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> html5 & lt; details>标签的定义及使用说明:
html5中新增的& lt; details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。
& lt; details>标签用于描述文档或文档某个部分的细节。
& lt; details>标签规定了用户可见的或者隐藏的需求的补充细节。
& lt; details>标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在& lt; details>标签里边。
& lt; details>元素的内容对用户是不可见的,除非设置了开放属性。
<强> html5 & lt; details>标签的使用方法:
一般情况下,用细节来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。
其大致写法如下:
& lt; details>
& lt; summary>谷歌Nexus 6 & lt;/summary>
& lt; p>商品详情:& lt;/p>
& lt; dl>
& lt; dt>屏幕& lt;/dt>
& lt; dd> 5.96“2560 x1440像素原AMOLED显示屏(493 ppi) & lt;/dd>
& lt; dt>电池& lt;/dt>
& lt; dd> 3220 mAh
& lt; dt>相机& lt;/dt>
& lt; dd> 13议员与光学图像稳定后置2 mp front-facing
& lt; dt>处理器& lt;/dt>
& lt; dd>高通吗?金鱼草?805 processor
& lt;/dl>
& lt;/details> 首先是& lt; details>标签,里面接着是标题& lt; summary>,这里面的内容一般简短,具有总结性,会展示在页面。接着可以跟任意类型的HTML元素作为详情内容,这些内容需要在点击& lt; summary>才会呈现。
细节是代替新增的交互元素,细节与总结标签配合使用可以细节为定义标题。默认情况下,不显示细节标记中的内容。当用户点击标题时,会显示出细节。
细节标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。
细节有一个新增加的子标签——总结,当鼠标点击总结标签中的内容文字时,细节标签中的其他所有元素将会展开或收缩。
<强> html5 detalis标签强实例1:
& lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=utf-8"比;
& lt; title> HTML5每日一练之细节标签的应用& lt;/title>
& lt;/head>
& lt; body>
& lt; details>
PHP & lt; summary> HTML5 | CSS3 | | (php.cn) ! & lt;/summary>
& lt; p>、WEB前端开发论坛,教程资源完全免费PHP网站,打造最好的编程网站& lt;/p>
& lt;/detalis>
& lt;/body>
& lt;/html> 如果细节中不存在总结标签会怎样呢,其实当细节元素内没有总结标签的时候,浏览器在解析的时候会提供一个默认的文字,比如“查看详细”诸如此类的本地化文字,浏览器同样再会提供一个诸如上下箭头之类的图标。比如下面的案例2就是一个不存在总结子标签的例子:
实例2:
& lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=utf-8"比;
& lt; title> HTML5每日一练之细节展开收缩标签的应用& lt;/title>
& lt;/head>
& lt; body>
& lt; details>
& lt; p> HTML5论坛,CSS3论坛,CSS论坛,网前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5和CSS3论坛& lt;/p>
& lt;/details>
& lt;/body>
& lt;/html> 有的时候,我们需要detalis中的内容默认为展开状态怎么办?
其实HTML5也已经为我们想到了,如果有着方面的需求,我们只需要加入一个属性即可,如案例3 .
<强> HTML5细节标签的作用之开放属性的用法:
将案例1的代码修改后如下:
实例3:
& lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=utf-8"比;
& lt; title> HTML5每日一练之细节展开收缩标签的应用& lt;/title>
& lt;/head>
& lt; body>
& lt; open>细节;
& lt; summary> HTML5 | CSS3 |论坛|前端开发网(W3Cfuns.com) ! & lt;/summary>
& lt; p> HTML5论坛,CSS3论坛,CSS论坛,网前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5和CSS3论坛& lt;/p>
& lt;/details>
& lt;/body>
& lt;/html> 由此可见,HTML5为我们的确带来了很大方便。
