HTML5 链接

最新推荐文章于 2025-03-26 15:16:07 发布

苦涩2020

最新推荐文章于 2025-03-26 15:16:07 发布

阅读量444

点赞数

分类专栏： HTML5 前端文章标签： html5

本文链接：https://blog.csdn.net/UserPython/article/details/106211490

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

HTML5

10 篇文章

订阅专栏

本文详细介绍了HTML5中的超链接，包括四种状态：link、visited、hover和active，以及超链接的类型，如绝对路径、相对路径。还讨论了锚链接用于页面内部跳转和空链接的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

超链接

从一个网页链接到另一个网页

语法：< a href=“要链接的地址” target="_blank">链接描述< /a>

href属性：要链接的地址
target属性：指定在哪里打开目标页面
_blank：在新窗口打开目标页面
_self：在当前窗口中打开目标页面（默认值）

超链接的四种状态

link状态：未被访问的链接；文字为蓝色，有下划线
visited状态：已被访问的链接；文字为紫色，有下划线
hover状态：鼠标移动到链接上的状态；有下划线，鼠标变成手型
activer状态：正在点击的状态；文字变成红色，有下划线

超链接的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body bgcolor="#faebd7">
    文本链接1：<a href="https://blog.csdn.net/UserPython">JS Boom博客</a> <br/>
    文本链接2：<a href="Example03.html">本地文档链接</a> <br/>
    图片链接：<a href="https://blog.csdn.net/UserPython"><img src="images/JSBoom.jpg"></a> <br/>
    下载链接: <a href="other/chaoLianJie.zip">下载</a>
</body>
</html>

路径

绝对路径

需要指出链接资源的绝对位置，与你的HTML文档的位置无关

服务器中的位置：href = “https://www.hhh.com/show/233/23423.html”
本地存储的位置：file:///E:\桌面\写真.png

相对路径

如果链接资源与你的HTML文档位于同一个路径或者文件夹里，可以省略；否则必须指出相对路径，和HTML文档的位置有关；

同一个路径：直接写文件名称或 ./文件名比如：user.jpg或者 ./user.jpg
在下级路径：路径名称 / 资源名称比如：xxx/user.jpg
在下下级路径：xx/xxx/user.jgp
在上级路径：. ./资源名称比如：. ./user.jpg
在上上级路径：. ./. ./user.jgp

锚链接

当页面内容太长，需要跳转到具体位置时，可以使用锚链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
    <style type="text/css">
        body{height: 3000px;}
        p{height: 600px;}
    </style>
</head>
<body>
    <a href="#p1">章节1</a>
    <a href="#p2">章节2</a>
    <a href="#p3">章节3</a>
    <a href="#p4">章节4</a>
    <a href="#p5">章节5</a>

    <P id="p1">章节1</P>
    <P id="p2">章节2</P>
    <P id="p3">章节3</P>
    <P id="p4">章节4</P>
    <P id="p5">章节5</P>    
</body>
</html>

跳转到其他页面具体位置锚链接

目标页面具体位置设置锚点
用a标签中的href属性指定目标页面的路径+指定位置的id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前页面</title>
</head>
<body>
    <a href="./4-锚链接.html#p1">章节1</a>
    <a href="./4-锚链接.html#p2">章节2</a>
    <a href="./4-锚链接.html#p3">章节3</a>
    <a href="./4-锚链接.html#p4">章节4</a>
    <a href="./4-锚链接.html#p5">章节5</a>  
</body>
</html>

空链接

空链接语法：< a href="#">返回顶部（空链接）< /a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空链接</title>
    <style type="text/css">
        body{height: 3000px;}
        p{height: 600px;}
    </style>
</head>
<body>
    <a href="#p1">章节1</a>
    <a href="#p2">章节2</a>
    <a href="#p3">章节3</a>
    <a href="#p4">章节4</a>
    <a href="#p5">章节5</a>

    <P id="p1">章节1</P>
    <P id="p2">章节2</P>
    <P id="p3">章节3</P>
    <P id="p4">章节4</P>
    <P id="p5">章节5</P>  
    
    <a href="#">返回顶部（空链接）</a>
</body>
</html>