首先看显示内容上的交互特性，这里向读者介绍的是details与summary两个元素。details元素用来描述文档或文档片段的信息，summary元素与details元素一同使用，用于说明文档的标题，同时，summary元素应为details元素的第一个子元素。通过一个简单的示例展示summary与details的使用，代码如下：
点击(此处)折叠或打开
-
<pre name=\"code\" class=\"html\"><!DOCTYPE HTML>
-
<html>
-
<style>details details{padding:15px}</style> <!-- 二级details样式-->
-
<body>
-
<details>
-
<summary>交互</summary> <!-- 第一级detauls标题-->
-
<details>
-
<summary>内容交互</summary> <!-- 第二级detauls标题-->
-
<p>details与summary元素</p> <!-- 文档内容 -->
-
</details>
- </details></body></html>
图2.1 details与summary元素示例
details同时还具备open属性，用于表示是否展开可见，语法如下：
点击(此处)折叠或打开
- <details open=\"open\">
菜单交互中，命运最坎坷的应属menu元素，这个早在HTML 2时代就出现的元素，居然在HTML 4时遭到弃用，幸运的是HTML 5从语义的角度重新拾回menu元素。menu元素出现时常与li元素一同使用，用于排列表单控件。另外一个是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所示。
图2.2 progress元素
meter元素与progress元素非常相似，主要用于定义度量衡，表示在一定范围内的值，如投票占比、使用量等。meter元素有6个关键属性：
- 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>
图2.3 meter元素投票示例
HTML5并不难，难的是没有那么多的应用开发经验，清华大学出版社推出的《HTML 5网页开发实例详解》是市场上唯一 一本HTML 5实用案例书，是通过应用案例的形式学习HTML5的最佳著作
