免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

2.1.1  最新的交互元素——内容交互、菜单交互、状态交互

    HTML 5不仅仅只带来了一堆在语义上进行强化了的元素,同时在交互效果上也进行了极大的改变。也就是说,使用者可以在不使用JavaScript的情况下也能制作出满足一般需求的交互效果,这在笔者看来是一个非常友善的突破,可以通过HTML结构读出更多统一的使用规范和动态语义的交互信息。

     首先看显示内容上的交互特性,这里向读者介绍的是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>

details与summary元素示例的交互效果如图2.1所示。


免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)_第1张图片

图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>

meter元素示例的运行效果如图2.3所示。

免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)_第2张图片

图2.3  meter元素投票示例



    HTML5并不难,难的是没有那么多的应用开发经验,清华大学出版社推出的《HTML 5网页开发实例详解》是市场上唯一 一本HTML 5实用案例书,是通过应用案例的形式学习HTML5的最佳著作。关注新浪围脖@我的图书我做主,留下邮箱,我们免费赠送“大众点评”工程师为本书量身定制的HTML5R视频

免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)_第3张图片


你可能感兴趣的:(html5,实例,网页开发)