2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
|
id: 587d78aa367417b2b2512aec
|
2020-12-16 07:37:30 +00:00
|
|
|
|
title: 定义 HTML 文档的 head 和 body
|
2018-10-10 22:03:03 +00:00
|
|
|
|
challengeType: 0
|
2019-12-26 12:05:59 +00:00
|
|
|
|
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
|
|
|
|
|
forumTopicId: 301096
|
2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --description--
|
|
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
`html` 的结构主要分为两大部分：`head` 和 `body`。网页的描述应放入 `head` 标签，网页的内容则应放入 `body` 标签。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
比如 `link`、`meta`、`title` 和 `style` 都应放入 `head` 标签。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
2019-12-26 12:05:59 +00:00
|
|
|
|
这是网页布局的一个例子：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<!-- metadata elements -->
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- page contents -->
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --instructions--
|
|
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
请给网页添加 `head` 和 `body`，`head` 元素应包含 `title`；`body` 元素应该包含 `h1` 和 `p`。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
|
|
|
# --hints--
|
|
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
网页应只有一个 `head` 元素。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
assert($('head').length == 1);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
网页应只有一个 `body` 元素。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
|
assert($('body').length == 1);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
`head` 应为 `html` 的子元素。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
|
assert($('html').children('head').length == 1);
|
|
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
`body` 应为 `html` 的子元素。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
|
assert($('html').children('body').length == 1);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
`title` 应为 `head` 的子元素。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
|
|
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
|
`h1` 和 `p` 都应为 `body` 的子元素。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
|
assert(
|
|
|
|
|
|
code.match(
|
|
|
|
|
|
/<body>\s*?(((<h1>\s*?.*?\s*?<\/h1>\s*?)(<p>(.*\s*)*?<\/p>\s*?))|((<p>\s*?.*?\s*?<\/p>\s*?)(<h1>(.*\s*)*?<\/h1>\s*?)))<\/body>/gi
|
|
|
|
|
|
)
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --solutions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
