您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

如何使用html的＜time＞标签来标记日期和时间，有哪些属性可以设置？

时间：11-30来源：作者：点击数：

大白话如何使用标签来标记日期和时间，有哪些属性可以设置？

在网页里，咱们经常得展示日期和时间，HTML 里有个特别好用的标签——<time>标签，它能帮咱们把日期和时间清晰地标记出来。下面我就给你详细讲讲咋用这个标签，还有它有哪些属性可以设置。

基本用法

<time>标签的基本用法很简单，就把要标记的日期或时间写在标签中间就行。浏览器看到这个标签，就知道这里是日期或时间啦。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 time 标签</title>
</head>

<body>
    <!-- 用 time 标签标记一个具体时间 -->
    <p>我每天早上 <time>8:00</time> 起床。</p>
</body>

</html>

在这段代码里，<time>8:00</time>就把“8:00”这个时间标记出来了。这样搜索引擎或者屏幕阅读器就能更好地理解这个内容是时间。

datetime 属性

<time>标签有个超有用的属性叫datetime，它能把时间用机器能读懂的格式写出来。为啥要这么做呢？因为有时候咱们在网页上显示的时间格式，机器可能不太好理解，用datetime属性就能避免这个问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 time 标签的 datetime 属性</title>
</head>

<body>
    <!-- 用 time 标签标记一个具体日期，并使用 datetime 属性 -->
    <p>我生日是 <time datetime="2000-05-15">2000 年 5 月 15 日</time>。</p>
</body>

</html>

在这个例子中，datetime="2000-05-15"就是机器能读懂的日期格式，而2000 年 5 月 15 日是给人看的格式。

pubdate 属性（HTML5 中已废弃，但早期有用）

以前在 HTML5 里有个pubdate属性，它能标记这个时间是文章的发布时间。不过现在这个属性已经废弃了，就不建议用啦。下面给你看看以前是咋用的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 time 标签的 pubdate 属性（已废弃）</title>
</head>

<body>
    <article>
        <!-- 用 time 标签标记文章发布时间，并使用 pubdate 属性（已废弃） -->
        <time datetime="2025-04-02" pubdate>2025 年 4 月 2 日</time>
        <h1>一篇文章的标题</h1>
        <p>文章内容...</p>
    </article>
</body>

</html>

虽然现在不能用pubdate属性了，但你知道它以前是干啥的也挺有用。

总的来说，<time>标签很方便，能让日期和时间在网页里更规范，也方便机器理解。要是你需要在网页上展示日期和时间，就可以试试用这个标签。

除了datetime属性，还有哪些常用的time标签属性？

在 HTML 里，<time>标签主要用于以机器可读的格式对日期和时间进行标记。除了datetime属性，并没有其他被广泛支持和常用的属性。不过，这里为你详细介绍一下 HTML 标准里<time>标签可使用的属性。

1. `datetime`属性

datetime属性是<time>标签中最常用的属性。它以机器可读的格式来指定日期和时间，有助于搜索引擎、屏幕阅读器等工具准确识别和处理内容。

<p>会议将在 <time datetime="2025-04-10T14:30">2025 年 4 月 10 日 14:30</time> 开始。</p>

在这个例子中，datetime属性的值“2025 - 04 - 10T14:30”是符合 ISO 8601 标准的日期和时间格式，这样机器就能正确解析这个时间。

2. `pubdate`属性（已废弃）

在 HTML5 早期版本里，pubdate属性用于表明<time>标签内的时间是文章或者文档的发布时间。不过在 HTML5.1 及后续版本中，该属性已被废弃，不建议使用。

<article>
    <time datetime="2025-04-02" pubdate>2025 年 4 月 2 日</time>
    <h1>文章标题</h1>
    <p>文章内容...</p>
</article>

3. 全局属性

<time>标签同样支持 HTML 的全局属性，这些属性可以应用于任何 HTML 元素，下面是几个常见的全局属性示例：

`id`属性

id属性用于为元素指定一个唯一标识符，借助 JavaScript 或者 CSS 能对该元素进行操作。

<p>重要时刻：<time id="special-time" datetime="2025-12-31T23:59">2025 年 12 月 31 日 23:59</time></p>

`class`属性

class属性用于为元素指定一个或多个类名，通过 CSS 能够对这些类名的元素进行样式设置。

<p>活动时间：<time class="event-time" datetime="2025-05-20T19:00">2025 年 5 月 20 日 19:00</time></p>

`title`属性

title属性为元素提供额外的提示信息，当鼠标悬停在元素上时，会显示该提示信息。

<p>讲座时间：<time title="这是一场重要的讲座" datetime="2025-06-15T10:00">2025 年 6 月 15 日 10:00</time></p>

综上所述，<time>标签常用的功能性属性主要是datetime，而全局属性则可用于元素的标识、样式设置和信息提示等。

除了pubdate属性，还有哪些属性在HTML中已被废弃？

在 HTML 的发展历程中，随着技术的进步和标准的更新，有不少属性已经被废弃，下面为你介绍一些常见的已废弃属性。

1. 与文本格式相关的属性

align属性
- 此属性用于设置元素的对齐方式，像<div>、<p>、<img>等元素都曾使用过。不过现在已经被废弃，推荐使用 CSS 的text-align或margin属性来实现对齐效果。
```

<p align="center">这是一段居中的文本</p>

<p style="text-align: center;">这是一段居中的文本</p>
```
bgcolor属性
- 该属性用于设置元素的背景颜色，如<body>、<table>等元素。如今已被废弃，建议使用 CSS 的background-color属性。
```

<body bgcolor="lightblue">

<body style="background-color: lightblue;">
```

2. 与字体样式相关的属性

font属性

用于设置文本的字体、大小、颜色等样式。现在已被废弃，应使用 CSS 的font-family、font-size、color等属性来分别设置。

<!-- 废弃用法 -->
<p font="Arial, 12px, red">这是一段设置字体的文本</p>
<!-- 推荐用法 -->
<p style="font-family: Arial; font-size: 12px; color: red;">这是一段设置字体的文本</p>

size属性（用于<font>标签）
- 在<font>标签中，size属性用于设置字体大小。<font>标签本身已被废弃，建议使用 CSS 的font-size属性。
```

<font size="3">这是指定大小的文本</font>

<p style="font-size: 16px;">这是指定大小的文本</p>
```

3. 与图像相关的属性

hspace和vspace属性
- 这两个属性用于设置图像周围的水平和垂直间距。现在已被废弃，推荐使用 CSS 的margin属性。
```

<img src="example.jpg" hspace="10" vspace="10">

<img src="example.jpg" style="margin: 10px;">
```

4. 与表格相关的属性

cellpadding和cellspacing属性
- cellpadding用于设置表格单元格内容与边框的间距，cellspacing用于设置表格单元格之间的间距。现在已被废弃，建议使用 CSS 的padding和border-spacing属性。
```

<table cellpadding="5" cellspacing="2">

<table style="border-collapse: separate; border-spacing: 2px;">
    <tr>
        <td style="padding: 5px;">内容</td>
    </tr>
</table>
```