HTML入门6—超链接

超链接

6.1 超连接简介

在html中,我们可以使用a标签定义超链接
语法:<a href="链接地址">文本或图片</a>
href表示想要跳转到连接的目的地址,可以是相对路径,也可以是绝对路径
例如文本超链接:

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>
		<dir>
			<a href="http://www.baidu.com">百度搜索</a>
		</dir>
	</body>
</html>

图片超链接

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>
		<dir>
			<a href="http://www.baidu.com"><img src="text/text.jpg" /></a>
		</dir>
	</body>
</html>
target属性

在默认情况下,超链接都是在当前浏览器窗口在新打开页面的。在HTML中,我们可以使用target属性来定义超链接打开窗口的方式
语法

<a herf="链接地址" target=“打开方式”></a>

target属性取值有4种
在这里插入图片描述

锚点链接

有些网页页面内容比价多,导致页面过长,此时用户需要不停在拖动浏览器上的滚动条才可以看到。为了方便用户操作,我们可以使用锚点链接来优化用户体验。
举例:

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>
		<div>
			<a href="#article">推荐文章</a><br />
			<a href="#music">推荐音乐</a><br />
			<a href="#movie">推荐电影</a><br />
		</div>
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		<div id="article">
			<h3>推荐文章</h3>
			<ul>
				<li>荷塘月色</li>
				<li>朝花夕拾</li>
				<li>阿Q正传</li>
			</ul>
		</div>
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		<div id="music">
			<h3>推荐音乐</h3>
			<ul>
				<li>稻香</li>
				<li>以父之名</li>
				<li>一口气全念对</li>
			</ul>
		</div>
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		
		<div id="movie">
			<h3>推荐电影</h3>
			<ul>
				<li>肖生克的救赎</li>
				<li>这个杀手不太冷</li>
				<li>杀死比尔</li>
			</ul>
		</div>
		</body>
</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值