97 lines
2.5 KiB
Markdown
97 lines
2.5 KiB
Markdown
|
---
|
||
|
|
id: 614385513d91ae5c251c2052
|
||
|
|
title: 步驟 2
|
||
|
|
challengeType: 0
|
||
|
|
dashedName: step-2
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
添加一個帶有文本 `Magazine` 的 `title` 元素，一個 `link` 元素爲 `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap` 字體樣式表，一個 `link` 元素爲 `https://use.fontawesome.com/releases/v5.8.2/css/all.css` FontAwesome 樣式表和一個 `link` 爲 `./styles.css` 樣式表。
|
||
|
|
|
||
|
|
你的字體樣式表將加載三種不同的字體：`Anton`、`Baskervville` 和 `Raleway`。
|
||
|
|
|
||
|
|
# --hints--
|
||
|
|
|
||
|
|
你的代碼應該包含三個自閉合的 `link` 元素。
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelectorAll('link').length === 3);
|
||
|
|
```
|
||
|
|
|
||
|
|
你的 `link` 元素應該在你的 `head` 元素中。
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelectorAll('head > link').length === 3);
|
||
|
|
```
|
||
|
|
|
||
|
|
你的三個 `link` 元素應該有一個 `rel` 屬性，其值爲 `stylesheet`。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const links = [...document.querySelectorAll('link')];
|
||
|
|
assert(links.every(link => link.getAttribute('rel') === 'stylesheet'));
|
||
|
|
```
|
||
|
|
|
||
|
|
你的其中一個鏈接元素應將 `href` 設置爲 `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap`。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const links = [...document.querySelectorAll('link')];
|
||
|
|
assert(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap'));
|
||
|
|
```
|
||
|
|
|
||
|
|
你的鏈接元素之一應將 `href` 設置爲 `https://use.fontawesome.com/releases/v5.8.2/css/all.css`。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const links = [...document.querySelectorAll('link')];
|
||
|
|
assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css'));
|
||
|
|
```
|
||
|
|
|
||
|
|
你的 `link` 元素之一應該有一個 `href` 屬性，其值爲 `styles.css`。
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert.match(code, /<link[\s\S]*?href\s*=\s*('|"|`)(\.\/)?styles\.css\1/)
|
||
|
|
```
|
||
|
|
|
||
|
|
你的代碼應該有一個 `title` 元素。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const title = document.querySelector('title');
|
||
|
|
assert.exists(title);
|
||
|
|
```
|
||
|
|
|
||
|
|
你的項目應該有一個標題爲 `Magazine`。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const title = document.querySelector('title');
|
||
|
|
assert.equal(title?.text?.trim()?.toLowerCase(), 'magazine')
|
||
|
|
```
|
||
|
|
|
||
|
|
請記住，標題的大小寫和拼寫很重要。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const title = document.querySelector('title');
|
||
|
|
assert.equal(title?.text?.trim(), 'Magazine');
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
--fcc-editable-region--
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
</head>
|
||
|
|
--fcc-editable-region--
|
||
|
|
<body>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
|
||
|
|
```
|