HTML标签之常见格式标签(2)

<meter>标签

<meter>标签表示度量衡,只用于已知最大值和最小值的情况下,常用于表示磁盘的用量。属性HTML5新标签。

<meter value="70" min="0" max="100" high="70" low="20" optimum="0.6">70%</meter>


<meter value="0.7" min="0" max="1" high="0.7" low="0.2" optimum="0.6">70%</meter>


value:表示当前值。
min:表示已知的最小值。
max:表示已知的最大值。
high:界定为高的值的范围。当value的值高于此值时,表示磁盘即将满盘。
low:界定为低的值的范围。当value的值低于此值时,表示磁盘空间充足。
optimum:表示度量的最优值。

<!DOCTYPE html>
<html lang="zh">
<head> 
<meta charset="utf-8"> 
<title>meter</title> 
</head>
<body>

<p>展示给定的数据范围:</p>
<meter value="5" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter><br><br>

<meter value="0.3" min="0" max="1" high="0.7" low="0.2" optimum="0.5">30%</meter><br>

<meter value="0.1" min="0" max="1" high="0.7" low="0.2" optimum="0.5">10%</meter><br>	
	
<meter value="0.8" min="0" max="1" high="0.7" low="0.2" optimum="0.5">80%</meter><br>	
	
<p><strong>注意:</strong> IE 浏览器不支持 meter 标签。</p>

</body>
</html>

<progress>标签


<progress>标签表示任务进度或进程,与JS一起使用。属性HTML5新标签。

当前任务完成度:<progress value="50" max="100"></progress>

value:当前任务完成值。
max:任务所需完成值。


<ruby>标签
<ruby>定义ruby注音,与<rt>、<rp>标签一起使用。HTML5新标签。

<ruby>标签中有三个元素:<rb>表示注音的对象、<rt>表示注音内容、<rp>表示不支持<ruby>标签的浏览器所显示的内容。

1、若浏览器支持<ruby>标签:

<ruby>
  <rb>中</rb><rp>(</rp><rt>zhong</rt><rp>)</rp>
  <rb>国</rb><rp>(</rp><rt>guo</rt><rp>)</rp>
</ruby>

效果如下:


2、若浏览器不支持<ruby>标签:

<ruby>
  <rb>中</rb><rp>(</rp><rt>zhong</rt><rp>)</rp>
  <rb>国</rb><rp>(</rp><rt>guo</rt><rp>)</rp>
</ruby>


<sub>、<sup>标签

<sub>定义下标文本。<sub>下标内容</sub>

<sup>定义上标文本。<sup>上标内容</sup>

<p>x<sub>a</sub></p>
	
<p>x<sup>a</sup></p>




<wbr>标签


<wbr>标签规定在文本中的何处适合添加换行符。单词太长时,可以定义在何处换行。



<time>标签


<time>标签定义公历时间或日期,时间或日期是可选的。一般用于表示文章、写作完成的时间。

<p>我每天<time>8:00</time>准时起床</p>


由元素内容给定时间:

<time datetime="2019-01-01">情人节约会</time>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值