HTML5是一些独立特性的集合,其中不仅添加了许多web页面特性,而且其本身也是一个应用程序。
details元素和summary元素
details元素用于描述文档或文档某个部分的细节。
summary元素经常与details元素配合使用作为details元素的第一个子元素,用于details定义标题。
标题是可见的,当用户单击标题时,会显示或隐藏details中的其他内容。
下面通过一个案例对details元素和summary元素的用法进行演示:
运行效果如图所示:
progress元素
progress元素用于表示一个任务完成的进度。这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成;
也可以用0到某个最大数字之间的数字来表示准确的进度完成情况。
progress元素的常用属性值有以下2个:
- value:已经完成的工作量
- max:总共有多少工作量
需要注意的是,value和max属性的值必须大于0,且value的值要小于或等于max的值。
下面通过一个案例对progress元素的用法进行演示:
运行效果如图所示:
meter元素
meter元素用于表示指定范围内的数值。
meter元素的常用属性:
属性 |
说明 |
high |
定义度量的值位于哪个值之上会被界定为高 |
low |
定义度量的值位于哪个值之下会被界定为低 |
max |
定义最大值,默认值为1 |
min |
定义最小值,默认值为0 |
optimum |
定义什么样的值为最佳值。如果该值高于high属性的值,意味着值越高越好;如果该值低于low属性的值,这意味着越低越好 |
value |
定义度量的值 |
下面通过一个案例对meter元素的用法进行演示:
运行效果如图所示:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战