HTML链接标签详解，很简单

大家好，今天给大家分享一下HTML链接标签

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

超链接语法：

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

超链接有两种

1.文本超链接
2.图像超链接

源码实例说明：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body>
<!--a标签
href : 必填，表示要跳转到那个页面
target : 表示窗口在哪里打开
_blank  在新标签中打开
_self  在自己的网页当中打开（默认就是这样）-->     <a href="我的第一个网页.html">点击我跳转到页面一</a>
<a href="https://www.baidu.com ">点击我跳转到百度</a><p><a href="我的第一个网页.html"><img src="../resourse/images/QQ截图20211026123053.png" alt="jishi" title="悬停文字" width="600" height="600"></a>
</p><p><a href="我的第一个网页.html"><img src="" alt="jishi" title="悬停文字" width="600" height="600"></a>
</p><p><a href="我的第一个网页.html"><img src=" ../resourse/images/QQ截图20211026123053.png  " alt="jishi" title="悬停文字"  width="600" height="600"></a>
</p><p><a href="我的第一个网页.html"><img src=" ../resourse/images/QQ截图20211026123053.png   " alt="jishi" title="悬停文字"  width="600" height="600"></a>
</p><p><a href="我的第一个网页.html"><img src=" ../resourse/images/QQ截图20211026123053.png   " alt="jishi" title="悬停文字"  width="600" height="600"></a>
</p><p><a href="我的第一个网页.html"><img src=" ../resourse/images/QQ截图20211026123053.png  " alt="jishi" title="悬停文字"  width="600" height="600"></a>
</p><a href="#top">回到顶部</a><a href="mailto:3252586428@qq.com">点击联系我 </a></body>
</html>

上面是超链接标签整体的代码：

下面来分开讲

<a href="我的第一个网页.html">点击我跳转到页面一</a>
<a href="https://www.baidu.com ">点击我跳转到百度</a>

网页显示的结果：

点击它之后，会跳转到我们自己写的指定页面

点击第二个到百度的页面

下面是我们的图像超链接

<p><a href="我的第一个网页.html"><img src="../resourse/images/QQ截图20211026123053.png" alt="jishi" title="悬停文字" width="600" height="600"></a>
</p>

显示结果：

点这个图像，即可到达我们自己写的页面

效果是这样的

<a href="我的第一个网页.html"target="_blank=" >点击我跳转到页面一</a>

显示将网页在新的网页当中打开

关于超链接就到这里了，谢谢大家

HTML链接标签详解，很简单相关推荐

SEO技巧：Meta标签详解
网页设计:Meta标签详解您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...
网页设计：Meta标签详解
网页设计:Meta标签详解很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...
meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧您的 ...
[Dreamweaver教程]Meta标签详解
[Dreamweaver教程]Meta标签详解原作者:indian 出处:5D多媒体发表时间:2004-12-8 关键词: 版权信息:传统媒体及商业网站禁止擅自转载:个人网站转载需经作者同意,并注 ...
HTML marquee标签详解
HTML marquee标签详解在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动.而我们使用HTML的Marquee语句则可以产生更多的 ...
linux 的文件软链接隐藏,Linux inode及硬链接软链接详解
Linux inode及硬链接软链接详解 York • 2020 年 09 月 28 日 Loading... 操作系统的文件数据除了实际内容之外,通常含有非常多的属性,例如 `Linux`操作系统的 ...
W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
JSF标签详解（全）
转自:https://wenku.baidu.com/view/82b84b255901020207409c87.html :https://blog.csdn.net/qq_36411874/art ...
web前端 --- HTML标签详解
HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...

HTML链接标签详解，很简单

HTML链接标签详解，很简单相关推荐

最新文章

热门文章