html5网页开发实例详解
HTML 5 不仅引入了一系列语义强化的元素，还在交互效果方面实现了重大变革。这意味着开发者即便不借助 JavaScript，也能够创建出满足一般需求的交互效果。在笔者看来，这是一项极具友好性的突破，通过 HTML 结构，我们可以更清晰地解读出统一的使用规范和动态语义的交互信息。
显示内容上的交互特性：details 与 summary 元素
元素介绍
details 元素用于描述文档或文档片段的信息，而 summary 元素需与 details 元素配合使用，用于说明文档的标题，并且 summary 元素必须是 details 元素的第一个子元素。
示例代码
以下是一个简单示例，展示了 summary 与 details 的使用方法：
<!DOCTYPE HTML>
<html>
<style>
details details{padding: 15px} <!-- 二级details样式 -->
</style>
<body>
<details>
<summary>交互</summary> <!-- 第一级details标题 -->
<details>
<summary>内容交互</summary> <!-- 第二级details标题 -->
<p>details与summary元素</p> <!-- 文档内容 -->
</details>
</details>
</body>
</html>
交互效果
details 与 summary 元素示例的交互效果如图 2.1 所示。
open 属性
details 元素还具备 open 属性，用于表示是否展开内容使其可见，语法如下：
<details open="open">
菜单交互：menu 与 command 元素
menu 元素
在菜单交互中，menu 元素的命运颇为坎坷。它早在 HTML 2 时代就已出现，但在 HTML 4 中被弃用。幸运的是，HTML 5 从语义角度重新启用了该元素。menu 元素通常与 li 元素一同使用，用于排列表单控件。
command 元素
command 元素按照 W3C 的说明，有单选按钮、复选框、按钮 3 种类型。不过，经笔者测试，目前市面上主流的浏览器暂时都无法使用 command 元素的特性，有兴趣的读者可以自行尝试。
状态交互类型：progress 与 meter 元素
progress 元素
元素用途
progress 元素一般用于下载或者上传时的进度显示。当状态发生变化时，可以通过设置 progress 的属性来改变元素的交互状态。
关键属性
value：进度的当前值，可以为整数或者浮点数。max：完成的值，即总量，可以为整数或者浮点数。
示例代码
以下是一个简单示例，展示了 progress 元素的使用方法：
<!DOCTYPE HTML>
<html>
<body>
下载进度：<progress value="30" max="100"></progress> <!-- 当前进度 -->
</body>
</html>
运行效果
运行效果如图 2.2 所示。
meter 元素
元素用途
meter 元素与 progress 元素非常相似，主要用于定义度量衡，表示在一定范围内的值，如投票占比、使用量等。
关键属性
value：实际度量的值，默认为 0，可以为整数或者浮点数。high：范围的上限值。low：范围的下限值。max：最大值，默认值是 1。min：最小值，默认值是 0。optimum：最佳的值，必须在min属性值与max属性值之间。
示例代码
以下是一个示例，说明 meter 元素的使用方法：
<!DOCTYPE html>
<html>
<body>
<p>投票结果：</p>
<p>小周：<meter value="20" optimum="100" high="100" low="0" max="100" min="0"></meter><span>20%</span></p>
<p>小王：<meter value="80" optimum="100" high="100" low="0" max="100" min="0"></meter><span>80%</span></p>
</body>
</html>
运行效果
meter 元素示例的运行效果如图 2.3 所示。
学习推荐
HTML5 本身并不难，真正的挑战在于缺乏足够的应用开发经验。清华大学出版社推出的《HTML 5 网页开发实例详解》是市场上唯一一本 HTML 5 实用案例书，是通过应用案例的形式学习 HTML5 的最佳著作。