HTML超链接

最新推荐文章于 2025-03-08 10:52:17 发布

DH520HW520

最新推荐文章于 2025-03-08 10:52:17 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/DH520HW520/article/details/87865000

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了HTML超链接的语法和路径，包括外部链接、内部链接的创建，以及下载链接的实现。详细讲解了超链接的属性如href、title、target，并探讨了超链接的应用，特别是书签链接（锚链接）的用法，包括在同一页面和不同页面间的链接操作。

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

一，超链接的语法与路径

1，超链接标签：

<a href="需要跳转的资源地址" target=“窗口的名称” title=“鼠标指向连接时显示的文字”>超链接的名字</a>

<a href="http://www.baidu.com">这是百度</a>
<a href="0.1html" title="这是跳转0.1html的连接" target=”_blank“>这是新的</a>

执行以上程序得出：

《点击显示的字，就可跳转到需要跳转到的资源地址》

第一个直接在原网页上跳转到百度页面，不会产生新的页面，《属于网页跳转，跳转到百度的页面》

第二个因为设置target，点击时在新的页面中显示，会产生新的页面《属于本地跳转，设置的资源地址为自己设计的页面，点击之后跳转到自己设计的页面上》

2，下载的超链接

<a href="图片的地址">这里为下载图片的连接</a>
<a href="图片的地址" download>这里为图片的下载链接</a>

第一步：只能在浏览器观看到图片，不能下载图片

第二步：可以下载图片，（在下载的超链接内，必须加上（download：下载）属性才能够下载）

“图片的地址”可以是网页上的地址，也可以是电脑上的储存地址，都可以在浏览器上浏览，加上download下载属性后都可以在浏览器上面下载。

总结

超链接中的属性：

href:定义了这个链接所指的目标地址；《目标地址最为重要，一旦路径出错，该资源就会无法获取》

title:标题，鼠标放在上面可以显示的文字；

target:(该属性用于指定打开链接的目标窗口，默认为原窗口)，可以取以下指

_blank:在新的窗口打开

_parent:不会打开新的窗口，在原来的网页窗口上面打开（为默认值，可写可不写）

_self:在同一窗口打开（也为默认值）

_top:在浏览器中整个窗口中打开，忽略任何框架

超链接分为：
（1）：外部链接：必须全路径（如：网页的网址，http://www.baidu.com ）

（2）：内部链接：相对于文件的位置（同级为文件名，上一级为：.../文件名，下一级为：目录名称/文件名）

二，超链接的应用（书签链接------锚链接）

在文章内可以使用，或者其他需要“点击跳转页面”皆可应用；

<body style="height:3000px"> 

</body>

以上为增加滚动条高度或者宽度《style:格式》

<!DOCTYPE>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
</head>
<body style="height:3000px"><!--style:格式  增加滚动条长度或宽度-->
<h1 align="center">这是篇文章</h1><!--align属性：为排序的方式   center:居中-->
<br/>
<center><!--此标签为居中标签-->
    <a href="#d1">第一章</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#d2">第二章</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#d3">第三章</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#d4">第四章</a>&nbsp;&nbsp;&nbsp;&nbsp;
</center>
<div>
     <a name="d1"></a>  <!--除了可以使用name标记跳转外，还可以使用id跳转，称为锚链接-->
     <!--<a id="d1"></a>-->
     <h3>第一章：猴王出世</h3>
     <p>
       为文章内容
     </p>
</div>
<div>
     <a name="d2"></a>
     <h3>第二章：大闹东海/h3>
     <p>
       为文章内容
     </p>
</div>
<div>
     <a name="d3"></a>
     <h3>第三章：出门学艺</h3>
     <p>
       为文章内容
     </p>
</div>
<div>
     <a name="d4"></a>
     <h3>第四章：大闹天空《/h3>
     <p>
       为文章内容
     </p>
</div>
</body>

</html>

以上为书签链接---锚链接的应用。

总结：

书签链接（锚链接）

书签链接可以在同一页面中链接，也可以在不同页面中链接，在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置。

在同一页面需要使用的链接地址：

<a href="# 书签名称" target="窗口名称">超链接标题名称</a>

链接到的目的地址：

<a href="书签名称">目标超链接的名称</a>

《id的属性值为该目标定位点的定位标记点名称，是给特定位置起个名称（这个位置叫做锚点）》

在不同的页面中需要使用的链接地址：

<a href="URL 地址#书签名称" target="窗口名称">超链接标题名称</a>