html5 - 超链接基础和锚点

超连接就是打开另外一个页面,可以是本地的,也可以是网页,也可以通过图片来打开。

一:基础超链接

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超连接</title>
</head>
<body bgcolor="#fff">
	<!-- 在同一个网页内的链接-->
	<a href="http://www.baidu.com">超连接网址</a>
	<br>
	<!-- 必须在同一目录下文件全名-->
	<a href="text01.html">链接到本地</a>
	<br>
	<!-- 图片指定路径,标签嵌套-->
	<a href="http://www.360.com"><img src="指定图片.png"></a>
	<br>
	<!-- 电脑上必须安装发邮件工具-->
	<a href="mailto:2305600865@qq.com">发邮件</a>
	<br>
	<a href="下载图片.png">下载,可以指定文本和图片</a>
</body>
</html></span>


二:认识target属性,默认是在当前页面打开。如果想在新的页面打开,需要设置target="_blank"

<a href="http://www.baidu.com" target="_blank">打开新窗口</a>

三:锚点链接,所谓锚点链接就是在同一个页面跳到指定位置的方式。这里需要认识一下id。id在同一个html页面中是唯一的。又id当然有名字name,name可以理解为元素的内容。方法,首先通过a标签定义链接,a标签内href改为id.

<a href="#1">锚点1</a>

在需要的地方定义锚点

<a id="1">锚点1</a>

全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超连接学习02</title>
</head>
<body bgcolor="#fff">
	<!-- target
	_self默认,当前网页
	_blank打开新窗口
	-->
	<a href="http://www.baidu.com" target="_blank">打开新窗口</a>

	<!-- 锚点链接-->
	<a href="#1">锚点1</a>
	<a href="#abc">锚点2</a>
	<a href="#d10">锚点3</a>
		<br><br><br><br><br><br>
		<!-- id属性在同一个html中是唯一的-->
		<a id="1">锚点1</a>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<a id="abc">描点2</a>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<a id="d10">描点3</a>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
		<br><br><br><br><br><br>
</body>
</html>

效果:






阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HTML中实现锚点定位并具有滚动效果的方法有多种。一种常见的方法是使用CSS的scroll-behavior属性和a标签的href属性。首先,在CSS中设置scroll-behavior属性为smooth,这将使得滚动条在滚动时具有平滑的效果。然后,在a标签中的href属性中设置目标位置的id值,如#section。当点击该链接时,页面将会平滑滚动到相应的目标位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [HTML锚点定位+平滑滚动](https://blog.csdn.net/m0_64520392/article/details/128941349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [微信小程序-scroll-view滚动到指定位置(类似锚点)](https://download.csdn.net/download/weixin_38601878/16213063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue+导航锚点联动-滚动监听和点击平滑滚动跳转实](https://download.csdn.net/download/weixin_38665822/13982520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

为明天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值