浅谈HTML5新语义元素

本文详细介绍了HTML5中的新语义元素<mark>、<meter>、<progress>和<time>的使用方法及应用场景,包括如何标记高亮文本、测量范围、进度条和日期时间。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

可以使用HTML5的一些新语义元素来定义内容,包括<mark>、<meter>、<progress>和<time>

<mark>元素用来标记用作参考的高亮文本,在使用搜索引擎时,此类文本总是会出现,搜索的关键字在搜索结果中以高亮显示(通常为粗体),与<strong><em>元素不同,<mark>不会改变文本的重要性,它仅仅是高亮显示。

<meter>元素用来标记一个标量测量范围,例如报告中的星级评分、测验中的字母打分和百分比或分数。包含以下6个属性
1、Value—通过meter显示的测量数值。例如,测验分数可以写成<meter value=”91”>A-</meter>。此属性不可缺少,但可以直接写入元素中,例如:<meter>3 out of 15</meter>中的值为3而最大值为15。
2、Min—范围最小值。
3、Max—范围最大值。例如:<meter value=”91” min=”0” max=”100”>A-</meter>
4、Low—将上边界标记为meter中”low”部分的点。
5、High—将下边界标记为meter中”high”部分的点。通过low、high可以将meter的范围切割为3部分,例如:
<meter value=”5” low=”3” high=”7”>1 to 10</meter>
6、Optimum—标记范围中最优部分的点。
还可以使用title属性来注明英寸、天数或元等单位。使用<meter>元素来定义范围,并提供与范围有关的更多信息。<meter>元素的内容可以有value属性定义的文本。
注意:
Meter并不用于测量,除非存在已知最大值,否则将meter用作测量时不正确的

<progress>元素是一种用来标记需要一定时间才能完成的事件的进度的表单元素,主要包括以下事件。
1、正在下载或上传
2、正在执行的计算
3、游戏下载

I am <progress max=”24” value=”12” title=”chapters”>half way</progress> through the book

目前支持<progress>元素的浏览器并不多,仅在Opera和Chrome上可用。然而可以在不支持的浏览器上使用polyfill(如http://blogupstairs.com/html5-polyfill-progress-element)或是配合检测脚本与jQuery插件来使用<progress>。检测浏览器是否支持<progress>的代码如下:

return ‘value’ in document.createElement(‘progress’);

<time>元素用于标记日期或时间。还可以通过添加datetime属性来用数字精确标记日期和时间,或是添加pubdate属性将文档中最近的一个上级<article>元素作为一个整体将出版日期及时间标记出来。
Datatime属性可以包含日期、时间,或两者兼而有之,根据RFC 339的书写格式如下
1、日期—YYYY-MM-DD
2、时间—HH:MM:SS,使用24小时制,秒数可以忽略。
3、时区时间—HH:MM:SSZ。Z代表通用协调时间,或者+00:00。
4、时间及日期—YYYY-MM-DDTHH:MM:SS+时区。中国的T单纯用来分隔日期及时间。
不需要让<time>元素中的文字显示为完整日期或时间。例如:

<time datetime=”2018-10-26”>October 26,2018</time>
<time datetime=”2018-10-26”>October 26</time>
<time datetime=”00:00:00 - 08:00”>Midnight</time>

需要注意的是,<time>元素无法标记公元前的datetime值,同时也无法为”March 2018”这类不精确的日期编码。遇到这种情况时,需要用到微格式。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值