浅谈HTML5新增和废弃的标签

2020-04-21 07:02:57易采站长站整理

​</dl>

运行结果:

2、新增加其它元素

2.1、meter

表示特定范围内的数值,可用于工资、数量、百分比等 max表示最大值,min表示最小值,value代表当前值。


<meter max="100" min="0" value="60" style="width: 300px;"></meter>

可以用js控制让它从0变化到100。

2.2、time

time。表示时间值,属性datetime强调时间大会时间:<time>2015-10-6</time>


<time>2015-10-6</time>

我们在每天早上 <time>8:30</time> 开始上课。 我在<time datetime="2017-02-14">情人节</time>有个约会。

因为该标签是一个语义标签,在浏览器上查看时没有特别的效果,基本与没有设置标签的效果相同。

2.3、progress

用来表示进度条


<h3>progress</h3>
<progress value="75" max="100"></progress>

max:最大值,完成时的值

value:当前值

2.4、datalist

该标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。

当与input组合时既可以完成选择有可以输入。


<input type="text" list="countries" />
<datalist id="countries">
<option value="中国"></option>
<option value="美国"></option>
<option value="日本"></option>
</datalist>

2.5、mark元素

主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。 HTML5<mark></mark>;HTML4 <span></span>。

2.6、ruby元素

定义 ruby 注释(中文注音或字符)。 与 <ruby> 以及 <rt> 标签一同使用。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

2.7、rt元素

定义字符(中文注音或字符)的解释或发音。

2.8、rp元素

在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

2.9、wbr元素

表示软换行。与br元素的区别:br元素表示此处必须换行;wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时),不换行,而宽度不够时主动在此处换行。