---
id: 5dc23991f86c76b9248c6eb8
title: 步骤 6
challengeType: 0
dashedName: step-6
---

# --description--

在上一步中，你将 `h1` 元素、`h2` 元素、注释和 `p` 元素嵌套在 `main` 元素中。 这叫作 *嵌套*。 嵌套的元素（子元素）的位置应该放在被他们嵌套的元素（父元素）中新的一行并且右侧保留两个空格的间距的后面。 这个间距被称为缩进，它被用来使 HTML 更容易读。

`h1` 元素、`h2` 元素和注释比下面代码中的 `main` 元素多缩进了两个空格。 使用键盘上的空格键在 `p` 元素前面再添加两个空格，使其缩进得当。

# --hints--

你的代码应该有一个 `h2` 元素，其中包含 `Cat Photos` 文本。 你可能意外地删除了它，或者它缺少了开始和结束标签，或者是文本的内容被改变了。

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

你不应添加示例中的 `ul` 或 `li` 元素。

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

不应更改 `h2` 元素行上的缩进。 它的开始标签前应该有 6 个空格。 可以重启步骤来恢复原始缩进。

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

你的代码应该有注释。 你从之前的步骤中删除了注释。

```js
assert(code.match(/<!--.*-->/));
```

评论的文本应该是 `TODO: Add link to cat photos`。 不要更改注释的文本或间距。

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

你不应更改注释元素行上的缩进。 它的开始标签前应该有 6 个空格。 可以重启步骤来恢复原始缩进。

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

你的代码应该有一个 `p` 元素。 你删除了前一步骤中的 `p` 元素。

```js
assert(document.querySelector('p'));
```

`p` 元素的文本应该是 `See more cat photos in our gallery.` 不要更改 `p` 元素的文本、间距或标点符号。

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

开始 `p` 标签缩进应该和 `h2` 和注释元素一致。 它的开始标签前应该有 6 个空格。

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

