gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g
2020-10-06 23:10:08 +05:30

2.6 KiB
Raw Blame History

id, challengeType, videoUrl, forumTopicId, title
id challengeType videoUrl forumTopicId title
587d78aa367417b2b2512aec 0 https://scrimba.com/p/pVMPUv/cra9bfP 301096 定义 HTML 文档的 head 和 body

Description

html的结构主要分为两大部分：head、body。关于网页的描述都应该放入head标签，网页的内容都应该放入body标签。 比如link、meta、title和style都应该放入head标签。 这是网页布局的一个例子： 
<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
  </head>
  <body>
    <!-- page contents -->
  </body>
</html>

Instructions

给网页添加head和body，head元素应该包含title，body元素应该包含h1和p。

Tests

tests:
  - text: '网页应该只有一个<code>head</code>元素。'
    testString: assert($('head').length == 1);
  - text: '网页应该只有一个<code>body</code>元素。'
    testString: assert($('body').length == 1);
  - text: '<code>head</code>应该是<code>html</code>的子元素。'
    testString: assert($('html').children('head').length == 1);
  - text: '<code>body</code>应该是<code>html</code>的子元素。'
    testString: assert($('html').children('body').length == 1);
  - text: '<code>title</code>应该是<code>head</code>的子元素。'
    testString: assert(code.match(/<head>\s*?<title>\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));

Challenge Seed

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

Solution