HTML_链接标签

Mudrock__

已于 2022-04-18 23:14:06 修改

阅读量198

点赞数

分类专栏： HTML 文章标签： html

于 2022-04-18 22:57:28 首次发布

本文链接：https://blog.csdn.net/Mudrock__/article/details/124261867

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML和CSS创建链接，包括内部链接、外部链接、锚点链接，以及邮件链接和功能性链接的使用实例。重点讲解了`<a>`标签的不同属性如target和锚点定位，并通过代码示例演示了在网页中的实际应用。

摘要由CSDN通过智能技术生成

普通链接标签

<a href="链接"> 文本/图片 </a>

target="_self" 在当前页面中打开连接（默认）
target="_blank" 在新页面中打开链接

锚链接 跳转到锚标记

<p id="top">顶部</p>

<a href="#top">回到顶部</a>

功能性链接
邮件链接 href="mailto:邮箱地址"
......

代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 1000px;
        }
    </style>
</head>
<body>
<!--
href 跳转的目标页面（必填）

target="_self" 在当前页面中打开连接（默认）
target="_blank" 在新页面中打开链接
-->
<p id="top">顶部</p>
<br>
<a href="1.第一个网页.html" target="_self">点击跳转到第一个html（当前页面）</a>
<br/>
<a href="1.第一个网页.html" target="_blank">点击跳转到第一个html（新页面）</a>
<br/>
<br/>
<a href="https://lol.qq.com/main.shtml"><img src="../resources/image/lol.png" alt="lol" title="点击跳转到lol官网"/></a>
<br/>
<!--
锚链接
1.需要一个锚标记
2.跳转到锚标记
-->
<div></div><!--占据空间 否则锚链接的作用无法直观感受-->
<a href="#top">回到顶部</a>
</body>
</html>
<!--
功能性链接
邮件链接 href="mailto:邮箱地址"
......
-->