《HTML5 开发实例大全》——1.9 使用< summary >标记元素实现交互

最新推荐文章于 2021-12-20 10:14:41 发布

weixin_34081595

最新推荐文章于 2021-12-20 10:14:41 发布

阅读量111

点赞数

原文链接：https://yq.aliyun.com/articles/97704

版权

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.9节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.9 使用< summary >标记元素实现交互

https://yqfile.alicdn.com/ff51224fc6e74576b1d2587a54377eb2ee76b59d.png" >

实例说明

在全新的HTML 5中，标记< summary >包含了< details >元素的标题，元素< details >能够描述有关文档或文档片段的详细信息。< summary >是HTML 5中新增的一个标记，常包含于< details >元素中，配合< details >元素使用。在两者结合起来使用的代码中，< summary >元素的功能是说明文档的标题；< details >元素的功能是说明文档的详细信息。< summary >元素是< details >元素中的第一个子元素，二者经常同时出现在页面中。

在本实例中，在页面中分别加入一个< details >元素和一个< summary >元素，当显示< details >元素内容时，其子元素< summary >以字体加粗的形式展示在页面中。

具体实现

使用Dreamweaver创建一个名为“009.html”的文件，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>交互元素<summary>的使用</title>
<style type="text/css"> 
　body{ 
　padding:5px; 
　font-size:12px
　}
　summary{ 
　　font-weight:bold;
　}
　details {
　　overflow: hidden;
　　height: 0; 
　padding-left:200px;
　　position: relative;
　　display: block;
　}
　details[open] {
　　height:auto;
　}
</style>
</head>
<body>
　<details open="open">
　　<summary>页面说明</summary>
　　今天是2012年5月26日
　</details>
</body>
</html>

在上述代码中，为了突出显示< summary >元素，增加了一个加粗的字体效果。从代码的结构中可以看出，< summary >元素包含在< details >元素中，是< details >元素的子元素，应该在摆放位置时尽量放在第一个。执行后的效果如图1-17所示，单击文字左侧的小三角形符号后，所有文字将隐藏消失，如图1-18所示。