2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
id: 587d774e367417b2b2512a9f
|
2020-12-16 07:37:30 +00:00
|
|
|
title: 使用 main 元素包裹主题内容
|
2018-10-10 22:03:03 +00:00
|
|
|
challengeType: 0
|
2020-02-11 09:06:41 +00:00
|
|
|
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
|
|
|
forumTopicId: 301018
|
2021-01-13 02:31:00 +00:00
|
|
|
dashedName: jump-straight-to-the-content-using-the-main-element
|
2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --description--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-03-12 14:30:30 +00:00
|
|
|
HTML5 引入了一些新元素,给予开发者更多的选择,也包含辅助功能。 HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-03-05 15:43:24 +00:00
|
|
|
默认情况下,浏览器呈现这些元素的方式类似于普通的 `div`。 但是,在适当的地方使用它们会让标记文本具有更多的含义。 仅标签名称就可以表示它所包含的信息类型,这给内容增加了语义含义。 辅助技术可以获取这种信息,为用户提供更好的页面摘要或导航选项。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-03-12 14:30:30 +00:00
|
|
|
`main` 标签用于呈现网页的主体内容,且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息, 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-03-12 14:30:30 +00:00
|
|
|
`main` 标签也有一个内嵌的特性,以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接,那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
Camper Cat 对他的忍者武器页面有一些新的想法。 请帮他在 `header` 标签和 `footer` 标签(在接下来的挑战中会详细介绍)之间添加一个有开始和结束标记的 `main` 标签。 现在保持 `main` 标签为空。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
应存在一个 `main` 标签。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert($('main').length == 1);
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
`main` 标签应位于 `header` 标签与 `footer` 标签之间。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
2020-02-11 09:06:41 +00:00
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
# --seed--
|
|
|
|
|
|
|
|
## --seed-contents--
|
|
|
|
|
|
|
|
```html
|
|
|
|
<header>
|
|
|
|
<h1>Weapons of the Ninja</h1>
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer></footer>
|
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --solutions--
|
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
```html
|
|
|
|
<header>
|
|
|
|
<h1>Weapons of the Ninja</h1>
|
|
|
|
</header>
|
|
|
|
<main>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
<footer></footer>
|
|
|
|
```
|