小白前端入门笔记(11),如何嵌套使用a标签?

2021-02-08 09:46:31 浏览数 (1)

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

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

背景知识

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

比如下面这个例子:

代码语言:javascript复制
<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"是一个连接,其他的是普通文本。

要求

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

编辑器

代码语言:javascript复制
<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标签,并且填上题意中要求的文本即可。

代码语言:javascript复制
<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>

0 人点赞