---
id: 5dc17dc8f86c76b9248c6eb5
title: 步骤 4
challengeType: 0
dashedName: step-4
---

# --description--

注释让你在不影响浏览器显示内容的情况下，留下信息。 它也能让你的代码失效。 在 HTML 中，一个注释以 `<!--` 开始，包含数行文本，并以 `-->` 结束。 例如此注释 `<!-- TODO: Remove h1 -->` 包含着文本 `TODO: Remove h1`。

使用以下文本在 `p` 元素上方添加注释：

`TODO: Add link to cat photos`

# --hints--

你的注释应该以 `<!--` 开始。 你在定义注释的开头时缺少了一个或多个字符。

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

你的注释应以 `-->` 结束。  你在定义注释的结尾时缺少了一个或多个字符。

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

你的代码不应该有多余的开始/结束注释的字符。 你有一个多余的 `<!--` 或 `-->` 显示在浏览器中。

```js
const noSpaces = code.replace(/\s/g, '');
assert(noSpaces.match(/<!--/g).length < 2 && noSpaces.match(/-->/g).length < 2);
```

你的注释应该包含文本 `TODO: Add link to cat photos`。

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

你的注释应该在 `p` 元素之上。 你把顺序写错了。

```js
assert(
  code
    .replace(/\s/g, '')
    .match(
      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
    )
);
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    <h1>CatPhotoApp</h1>
    <h2>Cat Photos</h2>
--fcc-editable-region--

    <p>See more cat photos in our gallery.</p>

--fcc-editable-region--
  </body>
</html>
```

