freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of...

---
id: 587d78aa367417b2b2512aec
title: 定义 HTML 文档的 head 和 body
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
forumTopicId: 301096
dashedName: define-the-head-and-body-of-an-html-document
---

# --description--

`html` 的结构主要分为两大部分：`head` 和 `body`。 网页的描述应放入 `head` 标签， 网页的内容（向用户展示的）则应放入 `body` 标签。

比如 `link`、`meta`、`title` 和 `style` 都应放入 `head` 标签。

这是网页布局的一个例子：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta />
  </head>
  <body>
    <div>
    </div>
  </body>
</html>
```

# --instructions--

标记文本的结构主要分为两大部分：`head` 和 `body`。 `head` 元素应只包含 `title`，`body` 元素应该包含 `h1` 和 `p`。

# --hints--

网页应只有一个 `head` 元素。

```js
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
assert(headElems && headElems.length === 1);
```

网页应只有一个 `body` 元素。

```js
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
assert(bodyElems && bodyElems.length === 1);
```

`head` 应为 `html` 的子元素。

```js
const htmlChildren = code
  .replace(/\n/g, '')
  .match(/<html\s*>(?<children>.*)<\/html\s*>/);
let foundHead;
if (htmlChildren) {
  const { children } = htmlChildren.groups;

  foundHead = children.match(/<head\s*>.*<\/head\s*>/);
}
assert(foundHead);
```

`body` 应为 `html` 的子元素。

```js
const htmlChildren = code
  .replace(/\n/g, '')
  .match(/<html\s*>(?<children>.*?)<\/html\s*>/);
let foundBody;
if (htmlChildren) {
  const { children } = htmlChildren.groups;
  foundBody = children.match(/<body\s*>.*<\/body\s*>/);
}
assert(foundBody);
```

`title` 应为 `head` 的子元素。

```js
const headChildren = code
  .replace(/\n/g, '')
  .match(/<head\s*>(?<children>.*?)<\/head\s*>/);
let foundTitle;
if (headChildren) {
  const { children } = headChildren.groups;
  foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
}
assert(foundTitle);
```

`h1` 和 `p` 都应为 `body` 的子元素。

```js
const bodyChildren = code
  .replace(/\n/g, '')
  .match(/<body\s*>(?<children>.*?)<\/body\s*>/);
let foundElems;
if (bodyChildren) {
  const { children } = bodyChildren.groups;
  const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
  const ps = children.match(/<p\s*>.*<\/p\s*>/g);
  const numH1s = h1s ? h1s.length : 0;
  const numPs = ps ? ps.length : 0;
  foundElems = numH1s === 1 && numPs === 1;
}
assert(foundElems);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html>
  <title>The best page ever</title>

  <h1>The best page ever</h1>
  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

</html>
```

# --solutions--

```html
<!DOCTYPE html>
<html>
 <head>
  <title>The best page ever</title>
 </head>
 <body>
  <h1>The best page ever</h1>
  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 </body>
</html>
```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								---
 								id: 587d78aa367417b2b2512aec
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								title: 定义 HTML 文档的 head 和 body
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								challengeType: 0
-												fix(i18n): update Chinese translation of basic html and html5 (#37911)

Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
											
										
										
											2019-12-26 12:05:59 +00:00
+								videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
 								forumTopicId: 301096
-												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 02:31:00 +00:00
+								dashedName: define-the-head-and-body-of-an-html-document
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								---
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --description--
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								`html` 的结构主要分为两大部分：`head` 和 `body`。 网页的描述应放入 `head` 标签， 网页的内容（向用户展示的）则应放入 `body` 标签。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								比如 `link`、`meta`、`title` 和 `style` 都应放入 `head` 标签。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
-												fix(i18n): update Chinese translation of basic html and html5 (#37911)

Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
											
										
										
											2019-12-26 12:05:59 +00:00
+								这是网页布局的一个例子：
 								```html
 								<!DOCTYPE html>
 								<html>
 								  <head>
-												chore(i8n,learn): processed translations (#41061)

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
											
										
										
											2021-02-16 21:01:20 +00:00
+								    <meta />
-												fix(i18n): update Chinese translation of basic html and html5 (#37911)

Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
											
										
										
											2019-12-26 12:05:59 +00:00
+								  </head>
 								  <body>
-												chore(i8n,learn): processed translations (#41061)

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
											
										
										
											2021-02-16 21:01:20 +00:00
+								    <div>
 								    </div>
-												fix(i18n): update Chinese translation of basic html and html5 (#37911)

Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
											
										
										
											2019-12-26 12:05:59 +00:00
+								  </body>
 								</html>
 								```
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --instructions--
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								标记文本的结构主要分为两大部分：`head` 和 `body`。 `head` 元素应只包含 `title`，`body` 元素应该包含 `h1` 和 `p`。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
 								# --hints--
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								网页应只有一个 `head` 元素。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
 								```js
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
 								assert(headElems && headElems.length === 1);
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								网页应只有一个 `body` 元素。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
 								assert(bodyElems && bodyElems.length === 1);
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								```
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								`head` 应为 `html` 的子元素。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								const htmlChildren = code
 								  .replace(/\n/g, '')
 								  .match(/<html\s*>(?<children>.*)<\/html\s*>/);
 								let foundHead;
 								if (htmlChildren) {
 								  const { children } = htmlChildren.groups;
 								  foundHead = children.match(/<head\s*>.*<\/head\s*>/);
 								}
 								assert(foundHead);
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								`body` 应为 `html` 的子元素。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								const htmlChildren = code
 								  .replace(/\n/g, '')
 								  .match(/<html\s*>(?<children>.*?)<\/html\s*>/);
 								let foundBody;
 								if (htmlChildren) {
 								  const { children } = htmlChildren.groups;
 								  foundBody = children.match(/<body\s*>.*<\/body\s*>/);
 								}
 								assert(foundBody);
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								```
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								`title` 应为 `head` 的子元素。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
 								```js
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								const headChildren = code
 								  .replace(/\n/g, '')
 								  .match(/<head\s*>(?<children>.*?)<\/head\s*>/);
 								let foundTitle;
 								if (headChildren) {
 								  const { children } = headChildren.groups;
 								  foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
 								}
 								assert(foundTitle);
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								`h1` 和 `p` 都应为 `body` 的子元素。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								const bodyChildren = code
 								  .replace(/\n/g, '')
 								  .match(/<body\s*>(?<children>.*?)<\/body\s*>/);
 								let foundElems;
 								if (bodyChildren) {
 								  const { children } = bodyChildren.groups;
 								  const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
 								  const ps = children.match(/<p\s*>.*<\/p\s*>/g);
 								  const numH1s = h1s ? h1s.length : 0;
 								  const numPs = ps ? ps.length : 0;
 								  foundElems = numH1s === 1 && numPs === 1;
 								}
 								assert(foundElems);
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00: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 02:31:00 +00:00
+								# --seed--
 								## --seed-contents--
 								```html
 								<!DOCTYPE html>
 								<html>
 								  <title>The best page ever</title>
 								  <h1>The best page ever</h1>
 								  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 								</html>
 								```
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --solutions--
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00: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 02:31:00 +00:00
+								```html
 								<!DOCTYPE html>
 								<html>
 								 <head>
 								  <title>The best page ever</title>
 								 </head>
 								 <body>
 								  <h1>The best page ever</h1>
 								  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 								 </body>
 								</html>
 								```