id	title	challengeType	dashedName
6140c7e645d8e905819f1dd4	步驟 1	0	step-1

--description--

從標準樣板開始。添加 DOCTYPE 聲明、html 元素、 head 和 body 元素。

在 meta 元素中添加正確的 charset、title 元素和鏈接 ./styles.css 文件的 link 元素。

將 title 設置爲 Ferris Wheel。

--hints--

你的代碼應包含 DOCTYPE 引用。

assert(code.match(/<!DOCTYPE/gi));

你應該在 DOCTYPE 引用後添加一個空格。

assert(code.match(/<!DOCTYPE\s+/gi));

你應該將文檔類型定義爲 html。

assert(code.match(/<!DOCTYPE\s+html/gi));

你應該在類型之後使用 > 結束 DOCTYPE 聲明。

assert(code.match(/<!DOCTYPE\s+html\s*>/gi));

你的 html 元素應該有一個帶有值爲 en 的 lang 屬性的開始標籤。

assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));

你的 html 元素應該有一個結束標籤。

assert(code.match(/<\/html\s*>/));

你的 DOCTYPE 聲明應位於 HTML 的開頭。

assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));

你應該有一個 head 開始標籤。

assert(code.match(/<head\s*>/i));

你應該有一個 head 結束標籤。

assert(code.match(/<\/head\s*>/i));

你應該有一個 body 開始標籤。

assert(code.match(/<body\s*>/i));

你應該有一個 body 結束標籤。

assert(code.match(/<\/body\s*>/i));

head 和 body 元素應該是兄弟元素。

assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');

head 元素應該在 html 元素內。

assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));

body 元素應該在 html 元素內。

assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));

你的代碼應該有一個 meta 元素。

const meta = document.querySelector('meta');
assert.exists(meta);

你的 meta 元素應該有一個 charset 屬性，其值爲 UTF-8。

assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/i)

你的代碼應該有一個 title 元素。

const title = document.querySelector('title');
assert.exists(title);

你的項目應該有一個 Ferris Wheel 標題。

const title = document.querySelector('title');
assert.equal(title?.text?.trim()?.toLowerCase(), 'ferris wheel')

記住，標題的大小寫和拼寫很重要。

const title = document.querySelector('title');
assert.equal(title?.text?.trim(), 'Ferris Wheel');

你的代碼應該有一個 link 元素。

assert.match(code, /<link/)

你應該有一個自閉合的 link 元素。

assert(document.querySelectorAll('link').length === 1);

你的 link 元素應該在你的 head 元素中。

assert.exists(document.querySelector('head > link'));

你的 link 元素應該有一個 rel 屬性，其值爲 stylesheet。

const link_element = document.querySelector('link');
const rel = link_element.getAttribute("rel");
assert.equal(rel, "stylesheet");

你的 link 元素應該有一個 href 屬性，其值爲 styles.css。

const link = document.querySelector('link');
assert.equal(link.dataset.href, "styles.css");

--fcc-editable-region--

--fcc-editable-region--