原文: HTML Link – How to Turn an Image into a Link and Nest Links Inside Paragraphs
有的时候,你会想把链接嵌套在段落里,或者把图片变成链接。但你如何在 HTML 中这样做呢?
在这篇文章中,我将通过代码实例向你展示如何在段落中嵌套链接,以及如何将图片变成链接。
如何在段落标签内嵌套锚标签如果你想在你的段落中包含链接,那么你可以在段落标签中嵌套锚标签。
在这第一个例子中,我们有 “I love freeCodeCamp” 的文字。
I love freeCodeCamp
如果我想把 freeCodeCamp 这个词变成一个链接,那么我就把它包在一组锚标签里面。I love freeCodeCamp
我们还可以添加 target="_blank" 属性,让该链接在新标签页中打开。I love freeCodeCamp
当你把鼠标悬停在 freeCodeCamp 这个词上时,你会发现它是一个链接,你现在可以点击它,它将引导你进入网站。当你想把你的用户引导到与页面上的主要内容有关的额外信息时,可以在段落标签内嵌套链接。
在下一个例子中,我有一个关于 freeCodeCamp 的课程的段落。
I started learning how to code using freeCodeCamp. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.
我想首先把 freeCodeCamp 这个词变成一个链接,把人们引向网站。I started learning how to code using freeCodeCamp. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.
现在我将添加另一个 “Responsive Web Design course” 的链接,这将引导人们进入基于项目的课程。I started learning how to code using freeCodeCamp. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.
最后,我将为 JavaScript 课程添加一个链接,这将引导用户进入 JavaScript 课程。I started learning how to code using freeCodeCamp. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.
这就是 web 浏览器中展示的样子:如何将图片变成链接在 HTML 中,我们可以使用 元素来在页面上添加图片。在这个例子中,我们要添加一张五只猫的图片。
如果我们想让该图片成为一个可点击的链接,那么我们可以把它放在一组锚标签里面。
我们还可以添加 target="_blank" 属性,让该链接在新标签页中打开。
当你把鼠标悬停在图片上时,你会看到光标指针,表明它是一个链接,引导你进入一篇关于猫的文章。
总结在这篇文章中,我们学习了如何在段落中嵌套锚标签,以及如何将图片变成链接。
为了在段落中添加链接,我们可以在段落标签中嵌套锚标签。
I love freeCodeCamp
为了把图片变成一个链接,我们可以把一个 img 元素嵌套在锚标签里面。