HTML网页设计：四、超链接
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说HTML网页设计：四、超链接,希望能够帮助你!!!。
超链接
HTML中通过使用<a>标签来创建链接，当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手，点击相应的文本或图片会跳转至新的页面或者当前页面中的某个位置。
HTML系列文章目录
- HTML网页设计：一、HTML的基本结构
- HTML网页设计：二、网页的基本标签
- HTML网页设计：三、图像标签之＜img＞标签
- HTML网页设计：四、超链接
- HTML网页设计：五、行内元素和块元素
- HTML网页设计：六、列表
- HTML网页设计：七、表格
- HTML网页设计：八、媒体元素
- HTML网页设计：九、网页的简单布局
- HTML网页设计：十、iframe内联框架
- HTML网页设计：十一、表单
文章目录
- 超链接
-
- HTML系列文章目录
- 1.a标签
- 2.锚链接
-
- （1）当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。
- （2）当跳转到另一个网页的特定位置时，将锚标记添加到链接地址的末尾。
- （3）当href属性的值为一个“#”时，直接跳转至本页面顶部。
- 3.功能性链接
-
- （1）邮箱链接
- （2）QQ链接
1.a标签
HTML 链接连接语法如下：
\<a href="url" target="打开方式" name="锚的名称" title="">Link text\</a>
- href属性规定链接的目标，是a标签的必须属性。
- target属性规定在何处打开链接文档。它有五个选项：
（1）_blank：在新窗口中打开被链接文档。
（2）_self：默认。在相同的框架中打开被链接文档。
（3）_parent：在父框架集中打开被链接文档。
（4）_top：在整个窗口中打开被链接文档。
（5）framename：在指定的框架中打开被链接文档。 - name属性规定锚的名称，HTML5 中不支持。
- title属性说明了鼠标指针悬停所显示的文字。
- 开始标签和结束标签之间的文字被作为超级链接来显示，即上面一行的代码显示为Link text。
<a> 标签的使用有如下两种方式：
(1)通过使用 href 属性 - >创建指向另一个文档的链接。
(2)通过使用 name 属性 - >创建文档内的书签。
一些简单的超链接代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的超链接合集</title>
</head>
<body>
<!--指向360浏览器的超链接-->
<a href="https://www.hao123.com/">点击跳转至360浏览器页面</a>
<br/>
<!--使用新标签页打开图像标签学习页面-->
<a href="../图像标签学习/图像标签学习.html" target="_blank">点击跳转图像标签学习页面</a>
<br/>
<!--在当前标签页打开百度-->
<a href="https://www.baidu.com/" target="_self" title="跳转至百度">
<img src="../图像标签学习/7908.jpg" alt="许嵩" width="100px" height="80px">
</a>
</body>
</html>
网页示例如下：
2.锚链接
锚链接可以链接到本页面的特定位置，也可以链接到另一个页面的特定位置，其实现方式是添加锚标记。html5不支持name属性，以下用id属性示例，name属性用法大致一样。
（1）当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。
其代码格式如下：
<a href="#标记名">跳转到本页面的标记处</a>
（2）当跳转到另一个网页的特定位置时，将锚标记添加到链接地址的末尾。
其代码格式如下：
<a href="url#标记名">跳转到另一个页面的标记处</a>
"#标记名"为页面中某一个标签的id属性值，即若想要跳转到网页的某个位置，就先在这个位置所在的标签设置id属性，然后才能通过锚链接跳转到该位置。
（3）当href属性的值为一个“#”时，直接跳转至本页面顶部。
其代码格式如下：
<a href="#">返回顶部</a>
锚链接部分代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚链接学习</title>
</head>
<body>
<p>
<a href="https://www.hao123.com/" name="第一个链接">点击跳转至360浏览器页面</a>
</p>
<p>
<a href="https://www.baidu.com/" target="_blank">
<img src="../图像标签学习/7908.jpg" alt="许嵩" id="图片1" width="100px" height="80px">
</a>
</p>
<p>
<a href="https://www.baidu.com/" target="_self" id="图片2">
<img src="../9736.jpg" alt="许嵩" width="100px" height="80px">
</a>
</p>
<p>
<a href="https://www.baidu.com/" target="_blank" title="跳转至百度">点击跳转至百度页面</a>
</p>
<p>
<a href="https://www.baidu.com/" target="_blank" title="跳转至百度">点击跳转至百度页面</a>
</p>
<p>
<a href="https://www.baidu.com/" target="_blank" title="跳转至百度">点击跳转至百度页面</a>
</p>
<p>
<a href="#第一个链接">点击跳转至链接1</a>
</p>
<p>
<a href="#图片1">点击跳转至图片1</a>
</p>
<p>
<a href="#图片2">点击跳转至图片2</a>
</p>
<p>
<a href="#">点击跳转至顶部</a>
</p>
</body>
</html>
3.功能性链接
（1）邮箱链接
<a href="mailto:邮箱号">点击向我发送邮件</a>
（2）QQ链接
需要在QQ推广里面加载生成链接 然后复制粘贴即可
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
最新文章
