freeCodeCamp/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-b.../60b69a66b6ddb80858c51578.md

1.9 KiB

id title challengeType dashedName
60b69a66b6ddb80858c51578 步驟 1 0 step-1

--description--

首先設置你的 HTML 結構。 添加一個 <!DOCTYPE> 聲明和一個 html 元素,其中 lang 屬性設置爲 en。 在 html 元素中,添加一個 head 元素和一個 body 元素。

--hints--

代碼應包含 DOCTYPE 引用。

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

應該在 DOCTYPE 引用之後包含一個空格。

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

應該將文檔類型定義爲 html

assert(code.match(/html/gi));

應該在類型之後使用 > 關閉 DOCTYPE 聲明。

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

DOCTYPE 聲明應位於 HTML 的開頭。

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

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

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

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

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

應該有一個 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));

headbody 元素應該是兄弟元素。

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'));

--seed--

--seed-contents--


--fcc-editable-region--

--fcc-editable-region--