---
id: 61437d575fb98f57fa8f7f36
title: 步骤 1
challengeType: 0
dashedName: step-1
---

# --description--

从你的标准 HTML 模板开始。 添加 `DOCTYPE` 声明、语言设置为英语的 `html` 元素、 `head` 和 `body` 元素。

在 `head` 元素中添加一个具有适当 `charset` 的 `<meta>` 标签和一个用于移动响应的 `<meta>`标签。

# --hints--

你的代码应该包含 `DOCTYPE` 引用。

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

你应该在 `DOCTYPE` 引用后面加上一个空格。

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

你应该把文档类型定义为 `html`。

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

你应该在 `DOCTYPE` 声明中的类型后面加上一个 `>`。

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

你应该有一个 `<html>` 开始标签，它应该有 `lang` 值为 `en`。

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

确保 `html` 元素有一个闭合标签。

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

你的 `DOCTYPE` 声明应该位于 HTML 的开始行。

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

你需要一个起始标签 `<head>`

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

你应该有一个闭合标签 `</head>`

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

您应该有一个 `<body>` 开始标签。

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

你应该有一个 `</body>` 闭合标签。

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

`head` 和 `body` 元素应该是兄弟元素。

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

`head` 元素应该在 `html` 元素内。

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

`body` 元素应该在 `html` 元素内。

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

你应该有两个 `meta` 元素。

```js
const meta = document.querySelectorAll('meta');
assert(meta?.length === 2);
```

一个 `meta` 元素应将 `name` 设置为 `viewport`，并将 `content` 设置为 `width=device-width, initial-scale=1.0`。

```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
assert.exists(target);
```

另一个 `meta` 元素应该将 `charset` 属性设置为 `UTF-8`。

```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
assert.exists(target);
```

# --seed--

## --seed-contents--

```html
--fcc-editable-region--

--fcc-editable-region--
```

```css

```
