freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md

---
id: 587d778c367417b2b2512aa9
title: 使用 HTML5 的 datetime 属性标准化时间
challengeType: 0
videoUrl: 'https://scrimba.com/c/cmzMgtz'
forumTopicId: 301025
dashedName: standardize-times-with-the-html5-datetime-attribute
---

# --description--

继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 `time` 元素是一个行内元素，用于在一个页面上显示日期或时间。 `datetime` 属性包含的有效格式。 辅助设备可以获取这个值。 这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。

举个例子：

```html
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
```

# --instructions--

Camper Cat 格斗的调查结果出来了！ 用 `time` 标签包裹文本 `Thursday, September 15<sup>th</sup>`，添加一个 `datetime` 属性，将属性值设置为 `2016-09-15`。

# --hints--

应存在一个 `time` 元素和一个内容文本为 `Thank you to everyone for responding to Master Camper Cat's survey.` 的 `p` 元素。

```js
assert(timeElement);
```

`time` 元素的内容文本应为 `Thursday, September 15<sup>th</sup>`。

```js
assert(
  timeElement &&
    timeElement?.innerHTML?.trim() === 'Thursday, September 15<sup>th</sup>'
);
```

`time` 元素应包含非空的 `datetime` 属性。

```js
assert(datetimeAttr && datetimeAttr?.length);
```

`datetime` 的属性值应为 `2016-09-15`。

```js
assert(datetimeAttr === '2016-09-15');
```

# --seed--

## --after-user-code--

```html
<script>
const pElement = [...document.querySelectorAll("article > p")]
  .filter(x => x?.textContent?.includes("Thank you to everyone for responding to Master Camper Cat's survey."));
const timeElement = pElement[0] ? pElement[0].querySelector("time") : null;
const datetimeAttr = timeElement?.getAttribute("datetime");
</script>
```

## --seed-contents--

```html
<body>
  <header>
    <h1>Tournaments</h1>
  </header>
  <article>
    <h2>Mortal Kombat Tournament Survey Results</h2>

    <!-- Only change code below this line -->

    <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>

    <!-- Only change code above this line -->

    <section>
      <h3>Comments:</h3>
      <article>
        <p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
        <p>Johnny Cage better be there, I'll finish him!</p>
      </article>
      <article>
        <p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
        <p>Wow, much combat, so mortal.</p>
      </article>
      <article>
        <p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
        <p>Looks like I'll be busy that day.</p>
      </article>
    </section>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```

# --solutions--

```html
<body>
  <header>
    <h1>Tournaments</h1>
  </header>
  <article>
    <h2>Mortal Kombat Tournament Survey Results</h2>

    <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>

    <section>
      <h3>Comments:</h3>
      <article>
        <p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
        <p>Johnny Cage better be there, I'll finish him!</p>
      </article>
      <article>
        <p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
        <p>Wow, much combat, so mortal.</p>
      </article>
      <article>
        <p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
        <p>Looks like I'll be busy that day.</p>
      </article>
    </section>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00			`---`
			`id: 587d778c367417b2b2512aa9`
chore(i18n,learn): processed translations (#41454) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> 2021-03-12 07:30:30 -07:00			`title: 使用 HTML5 的 datetime 属性标准化时间`
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00			`challengeType: 0`
fix(i18n): update Chinese translation of applied accessibility (#37920) 2020-02-11 17:06:41 +08:00			`videoUrl: 'https://scrimba.com/c/cmzMgtz'`
			`forumTopicId: 301025`
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com> 2021-01-13 03:31:00 +01:00			`dashedName: standardize-times-with-the-html5-datetime-attribute`
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00			`---`

chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			`# --description--`

chore(i18n,curriculum): update translations (#41945) 2021-04-30 00:43:46 +09:00			继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 `time` 元素是一个行内元素，用于在一个页面上显示日期或时间。 `datetime` 属性包含的有效格式。辅助设备可以获取这个值。这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00
fix(i18n): update Chinese translation of applied accessibility (#37920) 2020-02-11 17:06:41 +08:00			`举个例子：`
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00
chore(i8n,curriculum): processed translations (#41544) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> 2021-03-20 09:47:30 -06:00			```html
			`<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>`
			```
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00
			`# --instructions--`
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00
chore(i18n,curriculum): update translations (#41945) 2021-04-30 00:43:46 +09:00			Camper Cat 格斗的调查结果出来了！用 `time` 标签包裹文本 `Thursday, September 15<sup>th</sup>`，添加一个 `datetime` 属性，将属性值设置为 `2016-09-15`。
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			`# --hints--`
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00
chore(i8n,curriculum): processed translations (#41544) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> 2021-03-20 09:47:30 -06:00			应存在一个 `time` 元素和一个内容文本为 `Thank you to everyone for responding to Master Camper Cat's survey.` 的 `p` 元素。
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00
			```js
chore(i18n,learn): processed translations (#44750) 2022-01-11 22:27:22 +05:30			`assert(timeElement);`
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			```

Chinese translation of responsive-web-design (#40607) 2021-01-08 11:20:48 -08:00			`time` 元素的内容文本应为 `Thursday, September 15<sup>th</sup>`。
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00
			```js
			`assert(`
chore(i18n,learn): processed translations (#44750) 2022-01-11 22:27:22 +05:30			`timeElement &&`
			`timeElement?.innerHTML?.trim() === 'Thursday, September 15<sup>th</sup>'`
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			`);`
fix(i18n): update Chinese translation of applied accessibility (#37920) 2020-02-11 17:06:41 +08:00			```

Chinese translation of responsive-web-design (#40607) 2021-01-08 11:20:48 -08:00			`time` 元素应包含非空的 `datetime` 属性。
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			```js
chore(i18n,learn): processed translations (#44750) 2022-01-11 22:27:22 +05:30			`assert(datetimeAttr && datetimeAttr?.length);`
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			```
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00
Chinese translation of responsive-web-design (#40607) 2021-01-08 11:20:48 -08:00			`datetime` 的属性值应为 `2016-09-15`。
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00
chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			```js
			`assert(datetimeAttr === '2016-09-15');`
Add languages Russian, Arabic, Chinese, Portuguese (#18305) 2018-10-10 18:03:03 -04:00			```
fix(i18n): update Chinese translation of applied accessibility (#37920) 2020-02-11 17:06:41 +08:00
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com> 2021-01-13 03:31:00 +01:00			`# --seed--`

			`## --after-user-code--`

			```html
			`<script>`
chore(i18n,learn): processed translations (#44750) 2022-01-11 22:27:22 +05:30			`const pElement = [...document.querySelectorAll("article > p")]`
			`.filter(x => x?.textContent?.includes("Thank you to everyone for responding to Master Camper Cat's survey."));`
			`const timeElement = pElement[0] ? pElement[0].querySelector("time") : null;`
			`const datetimeAttr = timeElement?.getAttribute("datetime");`
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com> 2021-01-13 03:31:00 +01:00			`</script>`
			```

			`## --seed-contents--`

			```html
			`<body>`
			`<header>`
			`<h1>Tournaments</h1>`
			`</header>`
			`<article>`
			`<h2>Mortal Kombat Tournament Survey Results</h2>`

			`<!-- Only change code below this line -->`

			`<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>`

			`<!-- Only change code above this line -->`

			`<section>`
			`<h3>Comments:</h3>`
			`<article>`
			`<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>`
			`<p>Johnny Cage better be there, I'll finish him!</p>`
			`</article>`
			`<article>`
			`<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>`
			`<p>Wow, much combat, so mortal.</p>`
			`</article>`
			`<article>`
			`<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>`
			`<p>Looks like I'll be busy that day.</p>`
			`</article>`
			`</section>`
			`</article>`
			`<footer>© 2018 Camper Cat</footer>`
			`</body>`
			```

chore(learn): Applied MDX format to Chinese curriculum files (#40462) 2020-12-16 00:37:30 -07:00			`# --solutions--`

feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com> 2021-01-13 03:31:00 +01:00			```html
			`<body>`
			`<header>`
			`<h1>Tournaments</h1>`
			`</header>`
			`<article>`
			`<h2>Mortal Kombat Tournament Survey Results</h2>`

			`<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>`

			`<section>`
			`<h3>Comments:</h3>`
			`<article>`
			`<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>`
			`<p>Johnny Cage better be there, I'll finish him!</p>`
			`</article>`
			`<article>`
			`<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>`
			`<p>Wow, much combat, so mortal.</p>`
			`</article>`
			`<article>`
			`<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>`
			`<p>Looks like I'll be busy that day.</p>`
			`</article>`
			`</section>`
			`</article>`
			`<footer>© 2018 Camper Cat</footer>`
			`</body>`
			```