• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实战-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实战
2.3 状态交互元素

2.3 状态交互元素

在HTML 5中,交互元素还包含状态交互元素。所谓状态交互元素,表示页面在与用户进行数据交互时,为了增强用户的UI体验,显示在页面中的各种进度状态。状态交互元素包括<progress>与<meter>元素,下面分别进行详细的介绍。

2.3.1 progress元素

<progress>是HTML 5中新增的状态交互元素,用来表示页面中的某个任务完成的进度(进程)。例如下载文件肘,文件下载到本地的进度值,可以通过该元素动态展示在页面中,展示的方式既可以使用整数(如1?100),也可以使用百分比(如10%?100%)。

<progress>元素的属性及描述如表2-4所示。

表2-4 <progress>元素的属性及描述

<progress>元素中设置的“value”值必须小于或等于“max”属性值,且两者都必须大于0。

下面通过一个完整的实例2-6详细介绍<progress>元素在文件下载时的使用。

2.3.2 meter元素

<meter>是HTML5中新增的标记,用于表示在一定数量范围中的值,如投票中,候选人各占比例情况及考试分数等。<meter>元素仅是帮助浏览器识别HTML中的数量,而不对该数量做任何的格式修饰,元素中的6个属性会根据浏览器的特征,以最好的方式展示这个数量。

<meter>元素的属性及描述如表2-5所示。

表2-5 <meter>元素的属性及描述

注意,<meter>元素中“optimum”的属性值,表示的是最佳数量值。如果该值比属性“high”值大,表示实际值越高越好;如果该值比属性“low”值小,则表示实际值越低越好。

下面通过一个完整的实例2-7详细介绍<meter>元素在展示投票结果时的使用。

2.4 本章小结

页面中的交互操作是HTML 5新增的一项重要功能。本章通过介绍HTML 5的几个重要交互元素的使用方法,可以使读者进一步加深对HTML 5元素的了解。

当然,HTML 5新增加的元素远不止这些交互元素,在后续章节中将着重介绍一些常用的功能性很强的重要元素。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101