---
id: 5dfa22d1b521be39a3de7be0
title: 步骤 12
challengeType: 0
dashedName: step-12
---

# --description--

在前一步骤中，你将单词 `link to cat pictures` 转换为一个链接，将它们放置在开始和结束锚点（`a`）标签之间。 你可以对元素内的单词做同样的操作，例如 `p` 元素。

在你的 `p` 元素的文本中，将单词 `cat photos` 转换为指向 `https://freecatphotoapp.com` 的链接，通过把这些单词放到开始和结束锚点标签（`a`）内来实现。


# --hints--

你应该在 `p` 元素中嵌套一个新的锚点（`a`）元素。

```js
assert($('p > a').length);
```

链接的 `href` 值应为 `https://freecatphotoapp.com`。 你可能落下了 `href` 值或者有拼写有误。

```js
const nestedAnchor = $('p > a')[0];
assert(
  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
);
```

链接的文本应该是 `cat photos`。 你可能忽略了文本或有拼写错误。

```js
const nestedAnchor = $('p > a')[0];
assert(
  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
);
```

在嵌套了锚点元素（`a`）之后，浏览器中显示的 `p` 元素应该仅为 `See more cat photos in our gallery.`。再次检查 `p` 和嵌套其中的锚点元素的文本、间距或标点。

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

# --seed--

## --seed-contents--

```html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
--fcc-editable-region--
      <p>See more cat photos in our gallery.</p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>
--fcc-editable-region--
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>
```

