5.4 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d78aa367417b2b2512aec | Визначення head та body документа HTML | 0 | https://scrimba.com/p/pVMPUv/cra9bfP | 301096 | define-the-head-and-body-of-an-html-document |
--description--
Ви можете додати інший рівень організації у вашому документі HTML в межах тегів html
з елементами head
та body
. Будь-яка розмітка з інформацією про вашу сторінку буде у тезі head
. Тоді будь-яка розмітка із вмістом сторінки (яка показується для користувача) буде у тезі body
.
Елементи метаданих, такі як link
, meta
, title
, та style
, як правило, всередині елементу head
.
Ось приклад макету сторінки:
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
--instructions--
Відредагуйте відмітку так, щоб в ній були head
та body
. Елемент head
повинен містити тільки title
, а елемент body
повинен містити тільки h1
та p
.
--hints--
На сторінці має бути тільки один елемент head
.
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
assert(headElems && headElems.length === 1);
На сторінці повинен бути тільки один елемент body
.
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
assert(bodyElems && bodyElems.length === 1);
Елемент head
повинен бути потоком елементу html
.
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
.
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);
Елемент head
повинен міститися навколо елементу title
.
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);
Елемент body
повинен міститися навколо обох елементів h1
та p
.
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--
<!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--
<!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>