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所示。
时间： 2024-11-10 07:27:20