HTML网页编程之折叠标签（html table折叠）

网页编程之折叠标签。

HTML<details>标签，同学们好，这里是免费少儿编程知识分享，每天一行代码谁都能学会！今天分享的知识是创建一个可以折叠的元素，也就是说可以通过点击来切换显示和隐藏，通常用于词语解释或者对某些内容进行注解。

折叠的好处是在最开始的时候可以不用去占用网页上的空间，不用的时候也可以像这样收起来，不影响其他内容的显示。用到了HTML5新增的details标签和summary标签。

先来看看今天实例的运行效果，网页上有一个大大的H1标签，这只是为了排版效果，下方才是重点。可以看到有简介，浏览器支持说明123，这些文字的前方无一例外的都有一个三角箭头，点击之后就可以展开和收起相应的内容。展开之后箭头会变成向下的状态，收起之后就会指向右方，随便点击看一看都是这样的没有问题。

效果各位同学都已经看到了，来看看实现的代码吧。首先要说明一下，details 和 summary 标签是必须要一起出现的，单独出现是没有任何效果的。summary 标签必须是在details标签内部，FPail向浏览器声明了将在此插入一个可以折叠的元素。

而 TRair标签告诉了浏览器，这个折叠元素的标题是什么，也就是刚才点击的内容部分是什么。在details标签中，但是没有在summary标签中的内容，就是可以被折叠的内容本身。每一个 details 标签和 fully 标签必须一一对应。

说人话就是一个details标签，里面只能出现一个 iTunes，samml，samml，samml，这个屁标签是可有可无的。如果说没有，它内容就会和标题贴在一起。

为了美观还是加上一个比较好

而有了这个标签之后也确实能减少很多重复的工作。

目前国内大多数浏览器都支持极速模式，即采用Stot内核，因此一般情况下它都能正常显示。具体情况还需视个人情况而定。

今天的分享就到这里，希望各位同学能够认真练习三遍，即使不看视频也能独立完成。所有案例和相关文档都可向我索取。下期再见，想学习编程，记得关注哦。