首页 » 编程语言 » html » 正文

HTML5标签:time元素的使用方法及作用

html元素中的<time> 标签是html5新增的标签,用于定义日期或时间的,下面,就我们就一起详细了解一下<time>标签的使用方法及作用。

<time> 标签的定义

<time> 标签定义日期或24小时制的时间;

<time> 标签能够以机器可读的方式对日期和时间进行编码,不仅可以让搜索引擎也能够生成更智能的搜索结果,还可以让其他应用程序读取日期或时间,做出更加智能的处理;

<time> 标签和其他普通标签一样,不会在浏览器中呈现任何特殊效果;

<time> 标签不被所有的主流浏览器支持

<time> 标签是html5新增的标签

<time> 标签语法

<time> 标签的语法书写格式如下:

<time datetime="日期或时间" >元素内容</time>

datetime="日期或时间",提供的是可以被搜索引擎或其他应用程序读取或识别的时间,但要想被正确读取,必须使用通用的日期和时间格式,日期通用格式“年-月-日”,时间通用格式为24小时制,比如上午10点,就是10:00,晚上8点,就是20:00;

<time> 标签内的元素内容可以是任何格式的日期或时间,只要datetime属性设置的日期和时间是通用格式即可。

<time> 标签用法

<time> 标签在html5中只有两个属性,分别是datetime和pubdate,下面分别根据这两个属性来讲解<time> 标签的具体用法。

第一种:没有任何属性的用法

没有定义时间或日期时,则由<time> 元素内的具体内容决定。

<time>2019年12月20日</time>

以上代码中,没有定义datetime属性,所以,时间或日期以“2019年12月20日”为准;

正因如此,在没有定义datetime属性,或datetime属性值为空时,<time> 元素的内容需要是规范的时间或日期格式。

第二种:有datetime属性的用法

1、只有日期,日期格式为:年-月-日。

<time datetime="2019-12-20">2019年12月20日</time>

2、只有时间,时间采用24小时制。

<time datetime="17:30">下午5点半</time>

3、同时有日期和时间,日期和时间的中间用大写的“T”字母隔开。

<time datetime="2019-12-20T19:00">2019年12月20日晚上7点</time>

4、在同时有日期和时间的情况下,还可以添加不同地区的时差。

<time datetime="2019-12-20T16:00+05:00">中国时间2019年12月20日下午5点<time>

在时间后用“-”和“+”号后面表示时差:“-”表示比当地时间早,“+”表示比当地时间晚;如果是本地时间,则没有时差,则不需要加上时差。

5、在时间后面加上“Z”表示给机器编码时使用UTC时间标准;

<time datatime="2019-12-20T19:00Z">2019年12月20日晚上7点</time>

第三种:可选属性pubdate的用法

在<time> 标签中使用pubdate属性,则表示一篇文章或一个文档页面的发布日期,比如<time>所在的<article>。

<article>
<header>
<h1>文章标题</h1>
<p>存稿时间:
<time datetime="2019-12-19" >2019年12月19日</time>
</p>
<p>发布日期:
<time datetime="2019-12-20" pubdate>2019年12月20日</time>
</p>
</header>
<p>文章的正文内容</p>
</article>

以下三种pubdate属性的用法是一样的,使用其中任何一种效果都是一样的:

<time datetime="2019-12-20" pubdate>2019年12月20日</time>
<time datetime="2019-12-20" pubdate="">2019年12月20日</time>
<time datetime="2019-12-20" pubdate="pubdate">2019年12月20日</time>

注意:在 HTML5中,true或false并非有效的属性值,当解释器发现存在布尔属性时,它将直接解释为true。如果需要将属性设为false,将这个属性去掉即可。

注意事项:

<time> 标签的元素内容可以是任何格式的日期或时间,也可以是其他文本内容,确保datetime属性设置的是通用日期或时间格式即可:

<time datetime="2019-10-1">国庆节</time>



欢迎您发表评论或留言