141 lines
4.6 KiB
Markdown
141 lines
4.6 KiB
Markdown
|
---
|
|||
|
|
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>
|
|||
|
|
```
|