大家好,欢迎来到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"是一个连接,其他的是普通文本。
要求
- 你需要有一个
a
标签指向"https://freecatphotoapp.com" - 你的
a
标签应该"cat photots"作为锚定文本 - 你应该在
a
标签之外创建一个新的p
标签,你的整个网页当中需要至少有三个p
标签 - 你的
a
标签应该被嵌套在p
标签当中 - 你的
p
标签的文本应该为"View more "(注意结尾有一个空格) - 你的
a
标签不该有文本"View more " - 你的每一个
p
标签都应该有closing tag - 你的每一个
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
标签,并且填上题意中要求的文本即可。
<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>