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

本节书摘来自异步社区《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所示。

《HTML5 开发实例大全》——1.9 使用 summary 标记元素实现交互相关推荐

《HTML5 开发实例大全》——1.26 使用鼠标光标拖动网页中的文字
本节书摘来自异步社区<HTML5 开发实例大全>一书中的第1章,第1.26节,作者: 张明星更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.26 使用鼠标光 ...
《HTML5 开发实例大全》——1.32 在表单中使用 object 元素插入一个Flash
本节书摘来自异步社区<HTML5 开发实例大全>一书中的第1章,第1.32节,作者: 张明星更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.32 在表单中使 ...
bk3432开发的应用实例_《Javaweb开发实例大全》限时免费啦！
Java Web,是用Java技术来解决相关web互联网领域的技术栈.web包括:web服务端和web客户端两部分.Java在客户端的应用有Java Applet,不过使用得很少,Java在服务器端的 ...
Java开发实例大全(PDF)：603个典型事例及源码分析和24个应用方向
内容简介 <Java开发实例大全(基础卷)>筛选.汇集了Java开发从基础知识到高级应用各个层面约600个实例,每个实例按实例说明.关键技术.设计过程.详尽注释.秘笈心法的顺序进行了分析解 ...
c51汇编语言典型例子详解,51单片机典型开发实例大全.pdf
51单片机典型开发实例大全提供电子技术最新最实用设计方案 --单片机 C51 编程规范 typedef unsigned char INT8U; // 无符号 8 位整型变量 // typedef ...
Android开发实例大全
<Android开发实例大全> 基本信息作者: 王东华丛书名: Android移动开发技术丛书出版社:电子工业出版社 ISBN:9787121173172 上架时间:2012-8-1 ...
PHP开发实例大全（基础卷）适合菜鸟新手学习
<PHP开发实例大全(基础卷)>筛选.汇集了PHP开发从基础知识到高级应用各个层面的大量实例及源代码,共有600个左右,每个实例及源代码按实例说明.关键技术.设计过程.详尽注释.秘笈心法的 ...
C#开发实例大全（提高卷）
下载地址:网盘下载内容简介 · · · · · · <C#开发实例大全(提高卷)>筛选.汇集了C#开发从基础知识到高级应用各个层面约600个实例及源代码,每个实例都按实例说明.关键技术 ...
Java开发实例大全提高篇——XML篇
第3篇 XML篇第10章初识XML 10.1 XML语言基础实例297 简单的XML <?xml version="1.0" encoding="UT ...

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

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

《HTML5 开发实例大全》——1.9 使用 summary 标记元素实现交互相关推荐

最新文章

热门文章