可以使用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”这类不精确的日期编码。遇到这种情况时,需要用到微格式。