--- id: 587d78aa367417b2b2512aec title: Define the Head and Body of an HTML Document challengeType: 0 videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP' forumTopicId: 301096 localeTitle: 定义 HTML 文档的 head 和 body --- ## Description
html的结构主要分为两大部分：head、body。关于网页的描述都应该放入head标签，网页的内容都应该放入body标签。 比如link、meta、title和style都应该放入head标签。 这是网页布局的一个例子： ```html ```
## Instructions
给网页添加head和body，head元素应该包含title，body元素应该包含h1和p。
## Tests
```yml tests: - text: '网页应该只有一个head元素。' testString: assert($('head').length == 1); - text: '网页应该只有一个body元素。' testString: assert($('body').length == 1); - text: 'head应该是html的子元素。' testString: assert($('html').children('head').length == 1); - text: 'body应该是html的子元素。' testString: assert($('html').children('body').length == 1); - text: 'title应该是head的子元素。' testString: assert(code.match(/\s*?\s*?.*?\s*?<\/title>\s*?<\/head>/gi)); - text: '<code>h1</code>和<code>p</code>都应该是<code>body</code>的子元素。' testString: 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)); ``` </section> ## Challenge Seed <section id='challengeSeed'> <div id='html-seed'> ```html <!DOCTYPE html> <html> <title>世上最萌的猫咪

世上最萌的猫咪

在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。

```
## Solution