HTML超链接和锚链接

发布于:2024-07-06 ⋅ 阅读:(16) ⋅ 点赞:(0)

HTML超链接和锚链接

一、定义

HTML的超链接(Hyperlink)用于在网页之间创建链接,使用户可以点击这些链接来导航到其他页面或资源。

二、基本语法

1、语法

HTML中的超链接使用a标签来定义

<a href="URL">链接文本</a>

注意: href属性指定了链接目标的URL

​ 链接文本是用户在网页上看到的可点击文本。

2、跳转到外部页面

<a href="http://www.baidu.com">跳转到百度页面</a>

3、跳转到本地页面

<a href="index.html" target="_self">跳转到百度</a>

4、图片超链接

		<a href="index.html" target="_blank">
			<img src="img/favicon.ico" width="50px" height="80px" />
		</a>

效果截图:
在这里插入图片描述

5、超链接的target属性

  • target属性:指定链接在何处打开。常见的值包括:
    • _self:在同一窗口或标签页中打开(默认)。
    • _blank:在新窗口或标签页中打开。
    • _parent:在父框架中打开。
    • _top:在整个窗口中打开。

三、锚链接

1、定义: 在HTML中,锚链接(Anchor Link)是一种用于在页面内或跨页面之间创建超链接的方法。通过锚链接,用户可以快速跳转到页面内的特定位置或跳转到其他页面的特定位置

理解:跳转到下锚点的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<a href="#new01">法治</a><!--定位到锚点处-->
		<a href="#new02">国际</a><!--定位到锚点处-->
		<a href="#new03">娱乐</a><!--定位到锚点处-->
		
		<a name="new01"></a><!--下锚点-->
		<h1>法治新闻 </h1>
		<h1>法治新闻 </h1>
		<h1>法治新闻 </h1>
		<h1>法治新闻 </h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
	</body>
</html>

2、代码解析

在目录中,我们使用标签的href属性来指向这些锚点,通过在href属性中添加#符号和对应的锚点名称,实现锚链接的创建。点击目录中的链接将会快速跳转到相应的内容部分。

通过使用锚链接,可以方便用户在页面内部进行导航和跳转,提升用户体验和页面的可用性。


网站公告

今日签到

点亮在社区的每一天
去签到