小白前端入门笔记（13），怎么将图片设置成超链接？
大家好，欢迎来到freecodecamp HTML专题，今天是本专题第13篇文章。
今天的挑战还是还是关于a标签，真的a标签非常重要，使用的技巧也比较多。
背景知识
你可以把其他的元素嵌套在a标签当中，这样就可以实现点击其他内容跳转链接的效果。
比如说你可以把一张图片嵌套在a标签当中，这样的话我们就可以实现图片的超链接。比如这样：
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
记住，如果你想要跳转到哑链接的话，需要将href属性指向"#"。
题意
将现在html代码中的图片元素嵌套在a标签当中。
当你做完这项之后你可以试着将你的鼠标在图片上悬停，你的鼠标会从普通的指针变成一个手的形状也就是将要点击的形状。这就说明了现在这张图片已经变成了一个链接。
要求
- 现在已有的
img元素必须被嵌套进一个a标签当中 - 你的
a元素必须包含一个哑链接，即href属性指向"#" - 你的每一个
a标签都必须带有closing tag
编辑器
<h2>CatPhotoApp</h2><main>
<p>Click here to view more <a href="#">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>
解答
这个挑战也很简单，我们只需要遵守题目的要求将img标签外面嵌套一个a标签即可。
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<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-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
