超链接

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推广里面加载生成链接然后复制粘贴即可

HTML网页设计：四、超链接相关推荐

网页设计实验三（超链接与多媒体文件应用）
网页设计实验三一设计简易灯箱画廊二设计支持音频.视频播放的网页三设计简易网站导航四设计新生课程简介五设计中国名牌大学简介页面 +++点击资源索引[查看其它实验]+++ 一设计简易 ...
【web++_第四阶段_精美网页设计专题篇_1】
[web++_第四阶段_精美网页设计专题篇_1] http://www.cnblogs.com/lhb25/archive/2013/02/01/2886505.html <前沿视点&g ...
php动态网站开发唐四薪答案,ASP动态网页设计与Ajax技术（唐四薪谭晓兰） pdf扫描版_IT教程网...
<asp动态网页设计与ajax技术>全面介绍了asp动态网页设计与ajax技术,采用asp作为开发环境结合基于jquery的ajax技术,显著降低了ajax的入门难度.在叙述有关原理时安排 ...
网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
html语言的网页带超链接的,HTML语言与网页设计 ——超链接.ppt
HTML语言与网页设计 --超链接 HTML语言与网页设计 --超链接学习目标理解超链接的基本概念,掌握A标记符的用法. 超链接基础 URL(Universal Resources Locator ...
如何在html设计页面做超链接,网页设计超链接怎么弄网页设计里面的返回超链接怎么弄啊...
接下来在页面的上方选择[插入] 就像百度一样,选了"网页"时,"网页"就是黑色的.选了"知道","知道"就直接通过设置元 ...
网页设计实现三个页面的跳转，有文字、图片和超链接
网页设计实现三个页面的跳转,有文字.图片和超链接直接来干货吧,哈哈可作为摸板一.实现效果二.源代码 <!DOCTYPE html> <html lang="en&q ...
html 分割线_零基础网页设计/前端/html,第四课：前三课总结，以及单标签img
大家好,我是你们的"浪花一朵".如果我之前写的网页设计的课程没有看过,可以关注我,翻看作者之前的课程哦! 一.1~3课总结 1.为了使网页的内容与网页的边缘没有间隙,我们一般会在标 ...
[网页设计]点睛价值
整理了一下电脑,发现之前我做的网页设计作品,虽然一般般,但我感觉都是自己一码一码的敲的,还是挺有feel的!仿佛就在昨天,那时候的回忆,自己一个人在图书馆,静心的做这个网页设计.时间过的很快,转眼间都 ...
关于举办XX学院“XX杯”网页设计大赛的通知
关于举办XX学院"XX杯"网页设计大赛的通知一.大赛宗旨为丰富校园文化生活点缀校园缤纷色彩,鼓励同学们对生活积极的观察与发现,提高学生审美能力以及对平面设计作品视觉传达的认识, ...

HTML网页设计：四、超链接

超链接

HTML系列文章目录

文章目录

1.a标签

2.锚链接

（1）当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。

（2）当跳转到另一个网页的特定位置时，将锚标记添加到链接地址的末尾。

（3）当href属性的值为一个“#”时，直接跳转至本页面顶部。

3.功能性链接

（1）邮箱链接

（2）QQ链接

HTML网页设计：四、超链接相关推荐

最新文章

热门文章