6.超链接-HTML基础
一、何为超链接
1.a标签
在
HTML中，使用a标签来实现超链接。
（1）语法格式
<a href="链接地址">文本或图片</a>
① 说明
href表示想要跳转到的那个页面的路径，可以是相对路径，也可以是绝对路径。 我们可以将文本设置为超链接，即文本超链接；也可以将图片设置为超链接，即图片超链接。
（2）示例
① 例1-文本超链接
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接</title>
<style type="text/css">
</style>
</head>
<body>
<a href="http://www.baidu.com/">文本超链接</a>
</body>
</html>
文本超链接.png
② 例2-图片超链接
图片超链接1.png
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接</title>
<style type="text/css">
</style>
</head>
<body>
<a href="http://www.baidu.com/">
<img src="./img/毛毛.jpg" alt="我的毛毛吖!">
</a>
</body>
</html>
图片超链接.png
2.target属性
默认情况下，超链接都是在当前浏览器窗口打开新页面。 在
HTML中，我们可以通过target属性来定义超链接在窗口中的打开方式。
（1）语法格式
<a href="链接地址" target="打开方式">文本或图片</a>
（2）target的4种属性值
属性值 | 说明 |
|---|---|
_self | 默认值，在原来窗口打开链接。 |
_blank | 在新窗口打开链接。 |
_parent | 在父窗口打开链接。 |
_top | 在顶层窗口打开链接。 |
① 实际开发
一般情况下，只会用到
_blank这一个值，其它三个值不需深究。
（3）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接</title>
<style type="text/css">
</style>
</head>
<body>
<a href="http://www.baidu.com/" target="_blank">
見贤思齊
</a>
</body>
</html>
<!--
若不加target="_blank"，也就是target采用默认值_self，会将超链接变成百度。
加target="_blank"，则会保留超链接这个网页，在新增一个页面，如下图。
-->
超链接target属性_blank.png
二、内部链接
1.外部链接和内部链接
在
HTML中，超链接有两种：
- 外部链接
- 内部链接
（1）外部链接
指向的是外部网站的页面。
（2）内部链接
指向的是自身网站的页面。
2.怎么做?
（1）示例
① 例1
内部链接示例1-1.png
<!--first.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="second.html">要穿梭到页面2啦</a>
<br/>
<a href="子页面/third.html">要穿梭到页面3啦</a>
</body>
</html>
<!--second.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>这是页面2呀呀呀呀</h3>
<p>
人生若只如初见，何事秋风悲画扇。
</p>
</body>
</html>
<!--third.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>这是页面3呦呦呦呦</h3>
<p>
见贤思齐焉，见不贤而内自省也。
</p>
</body>
</html>
内部链接示例1.png
三、锚点链接
当我们的页面内容较多页面过长时，会导致用户需要不停地拖动浏览器的滚动条才可以查看内 容。为了简化用户操作，我们可以使用锚点链接来优化用户体验。
1.何为锚点链接?
在
HTML中，锚点链接其实是内部链接的一种，它的链接地址（href属性）指向的是当前页面的某个部分。 也就是说，点击页面中的某一个超链接，然后它就会跳到“当前页面”的某一部分。
2.怎么做?
想要实现锚点链接，得满足 2 个条件：
- 目标元素的
id a标签的href属性指向该id
（1）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>锚点超链接</title>
</head>
<body>
<div>
<a href="#hero">历史人物</a>
<br/>
<a href="#places">中华</a>
</div>
......<br/>
......<br/>
......<br/>
......<br/>
......<br/>
<div id="hero">
<h3>历史人物</h3>
<ul>
<li>秦始皇</li>
<li>项羽</li>
<li>白居易</li>
<li>李清照</li>
</ul>
</div>
......<br/>
......<br/>
......<br/>
......<br/>
......<br/>
<div id="places">
<h3>中华</h3>
<ul>
<li>辽宁</li>
<li>丹东</li>
<li>大连</li>
<li>沈阳</li>
</ul>
</div>
</body>
</html>
<!--
当鼠标点击 历史人物、中华 时，浏览器滚动条会自动滚动到相应的位置。
-->
锚点超链接示例1.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录