大家好,欢迎来到freecodecamp HTML专题第11篇。
今天的挑战仍然关于a标签。
背景知识 对于a标签我们除了可以单独使用之外,也可以将它嵌入其他的文本当中。
比如下面这个例子:
<p>
Here's a <a rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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>
想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~
文章就到这里,给个三连再走吧~