2018-10-10 22:03:03 +00:00
---
id: bad87fee1348bd9aede08817
2020-12-16 07:37:30 +00:00
title: 将 a 嵌套在段落中
2018-10-10 22:03:03 +00:00
challengeType: 0
2019-12-26 12:05:59 +00:00
videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
forumTopicId: 18244
2021-01-13 02:31:00 +00:00
dashedName: nest-an-anchor-element-within-a-paragraph
2018-10-10 22:03:03 +00:00
---
2020-12-16 07:37:30 +00:00
# --description--
2019-12-26 12:05:59 +00:00
你可以在其他文本元素内嵌套链接。
```html
< p >
Here's a < a target = "_blank" href = "http://freecodecamp.org" > link to freecodecamp.org< / a > for you to follow.
< / p >
```
2021-02-21 15:49:16 +00:00
让我们来拆解一下这个例子。 通常,文本是被包裹在 `p` 元素内:
2020-12-16 07:37:30 +00:00
2021-03-21 16:58:20 +00:00
```html
< p > Here's a ... for you to follow. < / p >
```
2021-02-21 15:49:16 +00:00
接下来是*锚点*元素 `<a>` (它需要结束标签 `</a>` ) :
2021-03-21 16:58:20 +00:00
```html
< a > ... < / a >
```
2021-02-21 15:49:16 +00:00
2021-03-21 16:58:20 +00:00
`target` 是锚点元素的一个属性,它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚点元素的另一个属性,它用来指定链接的 URL:
2021-02-21 15:49:16 +00:00
2021-03-21 16:58:20 +00:00
```html
< a href = "http://freecodecamp.org" > ... < / a >
```
2021-02-21 15:49:16 +00:00
2021-03-15 03:20:39 +00:00
`a` 元素内的文本 `link to freecodecamp.org` 叫作< dfn > 锚文本</ dfn > ,会显示为一个可以点击的链接:
2021-02-21 15:49:16 +00:00
2021-03-21 16:58:20 +00:00
```html
< a href = " ... " > link to freecodecamp.org< / a >
```
2021-02-21 15:49:16 +00:00
此示例的最终输出结果是这样:
2021-03-21 16:58:20 +00:00
Here's a [link to freecodecamp.org ](http://freecodecamp.org ) for you to follow.
2020-12-16 07:37:30 +00:00
# --instructions--
2021-03-21 16:58:20 +00:00
创建一个新的段落 `p` 元素来包裹 `a` 元素。 新段落应有文本 `View more cat photos` ,其中 `cat photos` 是一个链接,其余是纯文本。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --hints--
2021-03-15 03:20:39 +00:00
应该只有一个 `a` 元素。
2020-12-16 07:37:30 +00:00
```js
assert(
2021-03-15 03:20:39 +00:00
$('a').length === 1
2020-12-16 07:37:30 +00:00
);
2018-10-10 22:03:03 +00:00
```
2021-03-15 03:20:39 +00:00
`a` 元素应该链接到 “`https://freecatphotoapp.com`”。
```js
assert(
$('a[href="https://freecatphotoapp.com"]').length === 1
);
```
2021-03-21 16:58:20 +00:00
`a` 元素应有锚文本 `cat photos` 。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
$('a')
.text()
.match(/cat\sphotos/gi)
);
```
2018-10-10 22:03:03 +00:00
2021-03-21 16:58:20 +00:00
应该创建一个新的 `p` 元素。 页面中应至少包含 3 个 `p` 标签。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert($('p') & & $('p').length > 2);
2018-10-10 22:03:03 +00:00
```
2021-03-21 16:58:20 +00:00
`a` 应嵌套在新创建的 `p` 元素内。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
2021-03-04 17:49:46 +00:00
$('a[href="https://freecatphotoapp.com"]').parent().is('p')
2020-12-16 07:37:30 +00:00
);
```
2021-03-15 03:20:39 +00:00
`p` 元素应该包含文本 `View more` (在它后面有一个空格)。
2020-12-16 07:37:30 +00:00
```js
assert(
$('a[href="https://freecatphotoapp.com"]')
.parent()
.text()
2021-03-04 17:49:46 +00:00
.match(/View\smore\s/gi)
2020-12-16 07:37:30 +00:00
);
```
2018-10-10 22:03:03 +00:00
2021-03-21 16:58:20 +00:00
`a` 元素 < em > 不</ em > 应有文本 `View more` 。
2020-12-16 07:37:30 +00:00
```js
assert(
!$('a')
.text()
.match(/View\smore/gi)
);
```
2018-10-10 22:03:03 +00:00
2021-03-21 16:58:20 +00:00
确保每个 `p` 元素有结束标签。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
code.match(/< \/p > /g) &&
code.match(/< p / g ) & &
code.match(/< \/p > /g).length === code.match(/< p / g ). length
);
```
2021-03-21 16:58:20 +00:00
确保每个 `a` 元素有结束标签。
2020-12-16 07:37:30 +00:00
```js
assert(
code.match(/< \/a > /g) &&
code.match(/< a / g ) & &
code.match(/< \/a > /g).length === code.match(/< a / g ). length
);
```
2020-07-15 09:55:06 +00:00
2021-01-13 02:31:00 +00:00
# --seed--
## --seed-contents--
```html
< h2 > CatPhotoApp< / h2 >
< main >
< a href = "https://freecatphotoapp.com" target = "_blank" > cat photos< / a >
< img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." >
< p > Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.< / p >
< p > Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.< / p >
< / main >
```
2020-12-16 07:37:30 +00:00
# --solutions--
2020-07-15 09:55:06 +00:00
2021-01-13 02:31:00 +00:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > View more < a target = "_blank" href = "https://freecatphotoapp.com" > cat photos< / a > < / p >
< img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." >
< p > Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.< / p >
< p > Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.< / p >
< / main >
```