Html中a标签的使用方式

最新推荐文章于 2023-06-04 10:29:26 发布

ThatMonth

最新推荐文章于 2023-06-04 10:29:26 发布

阅读量2.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44853310/article/details/110245285

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

Html中a标签的三大用法

用法一：访问其他网址

<a href="http://www.baidu.com">访问百度!</a>

用法二：用图片作为链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>
图像作为链接: <a href="//runoob.com">
<img border="0" alt="w3cschool" src="logo.png" width="100" height="100">
</a>
</p>

</body>
</html>

用法三：使用锚跳转到同一页面的不同位置（H5中只能用id了，不能用name)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
</head>
<body>

<h2><a id="top">这是标题，底部链接可以链接到这</a></h2>

<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>
<p>哈哈哈哈 - 学的不仅是技术，更是梦想！<br><br><br><br></p>

<a href="#top">链接到标题</a>
</body>
</html>

a标签的target属性

ThatMonth

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html中a标签的使用方式

Html中a标签的三大用法用法一：访问其他网址<a href="http://www.baidu.com">访问百度!</a>用法二：用图片作为链接<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head><body>&lt.
复制链接

扫一扫