HTML超链接标签的使用方法

前端兵仔

已于 2024-08-17 11:27:19 修改

阅读量877

点赞数 21

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

于 2024-08-17 11:23:59 首次发布

本文链接：https://blog.csdn.net/m0_54093760/article/details/141277036

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

超链接

a herf ="# "。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href ="暂无的跳转目标">目标</a> target打开窗口的方式 默认是当前页面  当前页面:_self;另外页面:_blank
    <a href ="https://www.baidu.com">百度链接</a>
    <a href ="https://www.baidu.com" target="_blank">另一个界面链接</a>

    <h4>2.内部链接</h4>
    <a href ="HTML标题标签.html">内部链接</a>

    <h4>3.空链接：#</h4>
    <a href ="#">空链接</a>

    <h4>4.下载链接</h4>
    <a href ="测试计划表新.zip">下载链接</a>

    <h4>5.网页元素链接</h4>
    <a href ="http://www.baidu.com"><img src ="测试计划表新.jpg"/></a>

    <h4>6.title=鼠标悬停提示信息</h4>
    <a href ="#" title=“鼠标悬停提示信息”>提示信息</a>

</body>
</html>

1）外部链接

a herf ="加入外部链接的网址">"这里添加名" 。这样写是会默认在当前网页进行跳转链接。

a herf ="加入外部链接的网址" target="_self(这里的_self会在当前网页进行打开该链接)" >"这里添加名" 。

a herf ="加入外部链接的网址" target="_blank(这里的_blank就会在新创建一个网页打开该链接)" >"这里添加名" 。

2）内部链接

内部链接可以理解为打开内部创建的某个界面。

a herf ="加入内部链接名字">"这里添加名" 。

3）空链接

#号就表示空。

a herf ="#">"这里添加名" 。

4）下载链接

a herf ="下载的文件">"这里添加名" 。

5）网页元素链接

a herf ="网址"><img src = 图片>"这里还可以添加字" 。

6）title=“鼠标悬停提示信息”

a标签里添加了title=“提示信息”，鼠标悬停在链接上时会显示出对应提示信息。

结果显示：

7）锚点链接

点击锚点链接，会跳转或切换到对应id属性值的对象界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    将a链接的href属性的值加“#”+目标的ID属性值<br>  
    <div id="md1" style="width: 100%; height: 1000px; background-color: blueviolet;">
        <a href ="#md2" >锚点链接2</a>
    </div>
    
    <div id="md2" style="width: 100%; height: 1000px; background-color: rgb(255, 0, 0);">
        <a href ="#md1" >锚点链接1</a>
    </div>
    
</body>
</html>

还有很多待更新中... ...

以上为本人记录资料，如果有哪里不明白或有错误的地方，可以留言讨论，我收到消息后会及时回复、改正、讲解！