小白前端入门笔记（11），如何嵌套使用a标签？

TechFlow-承志

发布于 2021-02-08 09:46:31

1K0

发布于 2021-02-08 09:46:31

文章被收录于专栏：TechFlow

大家好，欢迎来到freecodecamp HTML专题第11篇。

今天的挑战仍然关于a标签。

背景知识

对于a标签我们除了可以单独使用之外，也可以将它嵌入其他的文本当中。

比如下面这个例子：

<p>
  Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
</p>

让我们来拆解一下上面的代码，我们首先可以看到一个p标签，当中的内容是：<p> Here's a ... for you to follow. </p>。接着我们发现一个a标签嵌入在了p标签当中，a标签有的target属性等于"_blank"，这意味着当我们点击这个标签的时候，它会打开一个新的网页tab。href属性和之前一样，指向的是这个标签跳转的链接。

在a标签两个tag之间，有一段文本是"link to freecodecamp.org"，这一段文本是a标签的内容，称为锚定文本(anchor text)。这段文本会以超链接的形式展现在网页当中。

最后显示出来的效果是这样的：

link to freecodecamp.org

题意

将已经存在的a标签嵌入到一个新的p标签当中，这个新的段落的文本为："View more cat photos"，其中"cat photos"是一个连接，其他的是普通文本。

要求

你需要有一个a标签指向"https://freecatphotoapp.com"
你的a标签应该"cat photots"作为锚定文本
你应该在a标签之外创建一个新的p标签，你的整个网页当中需要至少有三个p标签
你的a标签应该被嵌套在p标签当中
你的p标签的文本应该为"View more "(注意结尾有一个空格)
你的a标签不该有文本"View more "
你的每一个p标签都应该有closing tag
你的每一个a标签都应该有closing tag

编辑器

<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>

解答

我们同样只需要遵循题意即可，即在先有的a标签之外添加一个p标签，并且填上题意中要求的文本即可。

<h2>CatPhotoApp</h2>
<main>
  <p>View more <a href="https://freecatphotoapp.com" target="_blank">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>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-01-22，如有侵权请联系 cloudcommunity@tencent.com 删除

html