HTML链接

醒了不起的盖茨比✘

于 2021-11-13 23:06:54 发布

阅读量277

点赞数 1

分类专栏：从零开始学习JavaScript 文章标签： html 前端 html5

本文链接：https://blog.csdn.net/MIMANCHI123/article/details/121311912

版权

从零开始学习JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML链接的使用，包括如何创建内部和外部链接，书签链接，图片链接，以及如何在当前页面链接到指定位置。还探讨了如何通过``标签的`href`和`id`属性实现页面间的导航，并展示了如何创建跳出框架的链接。此外，文中还演示了创建无边框图片链接和在不同页面间跳转的实例。

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

HTML链接

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>HTML链接</title>
    </head>
    <body>
        <p>
            <a href = "https://blog.csdn.net/MIMANCHI123?spm=1000.2115.3001.5343">个人资料</a>是一个指向此网站的链接地址。
        </p>
        <p>
            <a href = "https://www.baidu.com/?tn=18029102_3_dg">百度一下</a>是一个指向万维网的链接地址
        </p>
    </body>
</html>

< a > 标签定义超链接，用于从一张页面链接到另一张页面。

< a > 元素最重要的属性是 href 属性，它指示链接的目标。

HTML链接语法：

HTML链接代码都是类似这样：

<a href = "url">链接文本</a>

href属性描述了链接的目标。

HTML链接-id属性;

id属性可用于创建一个HTML文档书签。书签不会以任何特殊方式显示，即在HTML页面中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入ID：

< a id = "tips">有用的提示部分</a>

在HTML文档中创建一个链接到“有用的提示部分（id = tips）”：

< a href = "#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到“有用的提示部分（id = “tips）”：

< a href = "https://www.baidu.com">访问有用的提示部分</a>

HTML创建图片链接：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML创建图片链接</title> 
</head>
<body>

<p>创建图片链接:
<a href="https://profile.csdnimg.cn/B/8/C/1_mimanchi123">
<img  border="10" src="https://profile.csdnimg.cn/B/8/C/1_mimanchi123" alt="HTML图片链接" width="64" height="64"></a></p>

<p>创建无边框的图片链接:
<a href="https://profile.csdnimg.cn/B/8/C/1_mimanchi123">
<img border="0" src="https://profile.csdnimg.cn/B/8/C/1_mimanchi123" alt="HTML无边框图片链接" width="64" height="64"></a></p>

</body>
</html>

在这里插入图片描述

HTML在当前页面链接到指定位置：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>HTML在当前页面链接到指定位置</title>
    </head>
    <body>
        
        <p>
            <a href ="#c5">查看第五段</a>
        </p>
        
        <h2>第一段</h2>
        <p>
            显示该段内容
        </p>
        
        <h2>第二段</h2>
        <p>
            显示该段内容
        </p>
        
        <h2>第三段</h2>
        <p>
            显示该段内容
        </p>
        
        <h2>第四段</h2>
        <p>
            显示该段内容
        </p>
        
        <h2><a id = "c5">第五段</a></h2>
        <p>
            显示该段内容
        </p>
        
        <h2>第六段</h2>
    </body>
</html>

在这里插入图片描述

HTML跳出框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>HTML跳出框架</title>
    </head>
    <body>
        <p>跳出框架</p>
        <a href = "//www.csdn.net/"target = "_top">点击这里！</a>
    </body>
</html>

在这里插入图片描述

醒了不起的盖茨比✘

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML链接

HTML链接HTML使用超级链接与网络上的另一个文档相连。几乎可以在所有网页中找到链接。点击链接可以从一张页面跳转到另一张页面。<!DOCTYPE html><html> <head> <meta charset = "utf-8"> <title>HTML链接</title> </head> <body> <p>
复制链接

扫一扫