Web 网页前端学习之a标签锚点

最新推荐文章于 2024-07-26 14:14:21 发布

菇毒

最新推荐文章于 2024-07-26 14:14:21 发布

阅读量740

点赞数

分类专栏： web 前端学习

本文链接：https://blog.csdn.net/weixin_43960383/article/details/120464631

版权

HTML A标签锚点图片导航前端开发

关键词由CSDN通过智能技术生成

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

Web 网页前端学习之a标签锚点

1. 新建目录（image）
2. 设置 a 标签（id+名称）
3. 导入图片
4. 完整代码如下所示
结束语

1. 新建目录（image）

新建一个目录存放图片
2021-9-26

2. 设置 a 标签（id+名称）

<a href="#nm">娜美</a>
		<a href="#lf">路飞</a>
		<a href="#sl">索隆</a>
		<a href="#wsp">乌索普</a>
		<a href="#sz">山治</a>
		<a href="#qb">乔巴</a>

3. 导入图片

<!-- 适当分行 -->
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br>
		<img id="nm" src="../image/wu1.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="lf" src="../image/wu2.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="sl" src="../image/wu3.jpg"wsp"><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="wsp" src="../image/wu4.jpg"><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="sz" src="../image/wu5.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="qb" src="../image/wu6.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>

4. 完整代码如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- a标签锚点作用  点击a链接跳转到对应元素 -->
		<!-- 给需要跳转的元素一个id属性 -->
		<!-- a标签绑定需要跳转的元素 # + 对应元素的id值 -->
		<a href="#nm">娜美</a>
		<a href="#lf">路飞</a>
		<a href="#sl">索隆</a>
		<a href="#wsp">乌索普</a>
		<a href="#sz">山治</a>
		<a href="#qb">乔巴</a>
		<!-- 适当分行 -->
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br>
		<img id="nm" src="../image/wu1.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="lf" src="../image/wu2.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="sl" src="../image/wu3.jpg"wsp"><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="wsp" src="../image/wu4.jpg"><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="sz" src="../image/wu5.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<img id="qb" src="../image/wu6.jpg" ><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
	</body>
</html>