HTML 链接

最新推荐文章于 2024-05-06 17:39:02 发布

文丑颜不良啊

最新推荐文章于 2024-05-06 17:39:02 发布

阅读量1.7k

点赞数 2

分类专栏： HTML 与 CSS 文章标签： html 前端 html 链接

本文链接：https://blog.csdn.net/jiaomubai/article/details/126957480

版权

HTML 与 CSS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面，是一种最常见的页面跳转方式。

示例：

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，我们可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当我们把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 <a> 中使用了 href 属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

需要注意的是，链接文本（即 <a> 和 </a> 之间的文本内容）并不一定是文字，也可能是一张图片。

target 属性

使用 target 属性，可以定义被链接的文档在何处显示。如果不设置 target 属性的值，默认在当前页打开，如本文第一张图所示，点击链接跳转到我的博客时，会在当前页面打开我的博客。

target 属性的取值为：

取值	描述
_blank	跳转到新的文档页面，就相当于打开了新的页面
_self	在当前页打开跳转链接，是 <a> 标签的默认打开方式
_parent	在父窗口上的方式跳转，如果父窗口是 window 对象的话，那么效果和 _self 相同
_top	跳转出包含这个超链接的窗口，如果页面被固定在框架之内，那么 _top 可以跳出当前框架

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 链接示例</title>
</head>
<body>
    <p>
        <i>在当前页打开链接</i>
        <br />
        <a href="https://blog.csdn.net/jiaomubai?spm=1010.2135.3001.5343">跳转到我的博客</a>
        <br />
        <a href="https://www.runoob.com/">跳转到菜鸟教程首页</a>
    </p>
    <hr />

    <p>
        <i>在新标签页中打开链接</i>
        <br />
        <a href="https://blog.csdn.net/jiaomubai?spm=1010.2135.3001.5343", target="_blank">跳转到我的博客</a>
        <br />
        <a href="https://www.runoob.com/", target="_blank">跳转到菜鸟教程首页</a>
    </p>
    <hr />

</body>
</html>

id 属性

id 属性可用于创建一个 HTML 文档书签。个人觉得可以理解为目录。示例：

点击 "查看章节2" 可跳转到章节2所在部分。

图片链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 链接示例</title>
</head>
<body>
    <p>
        <i>在当前页打开链接</i>
        <br />
        <a href="https://blog.csdn.net/jiaomubai?spm=1010.2135.3001.5343">跳转到我的博客</a>
        <br />
        <a href="https://www.runoob.com/">跳转到菜鸟教程首页</a>
    </p>
    <hr />

    <p>
        <i>在新标签页中打开链接</i>
        <br />
        <a href="https://blog.csdn.net/jiaomubai?spm=1010.2135.3001.5343", target="_blank">跳转到我的博客</a>
        <br />
        <a href="https://www.runoob.com/", target="_blank">跳转到菜鸟教程首页</a>
    </p>
    <hr />

    <p>
        <a href="#C2">查看章节 2</a>
        <br />
        <h2>章节 1</h2>
        <p>章节1的内容......</p>
        <br />
        <h2><a id="C2">章节 2</a></h2>
        <p>章节2的内容......</p>
        <br />
        <h2>章节 3</h2>
        <p>章节3的内容......</p>
        <br />
        <h2>章节 4</h2>
        <p>章节4的内容......</p>
        <br />
        <h2>章节 5</h2>
        <p>章节5的内容......</p>
        <br />
        <h2>章节 6</h2>
        <p>章节6的内容......</p>
    </p>    
    <hr />

    <p>
        <i>创建有边框图片链接:</i>
        <a href="https://www.runoob.com/", target="_blank">
        <img border="10" src="resource\picture\picture1.gif" alt="HTML 教程" width="32" height="32"></a>
        <br />
        <i>创建无边框的图片链接:</i>
        <a href="https://www.runoob.com/", target="_blank">
        <img border="0" src="resource\picture\picture1.gif" alt="HTML 教程" width="32" height="32"></a>
    </p>
    <hr />

</body>
</html>

文章参考自：HTML 链接 | 菜鸟教程