6. html链接标签

December 09, 2023
测试
测试
测试
测试
4 分钟阅读

“仅供学习,转载请注明出处”

html链接标签

<a>标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。

<a>标签的常用属性有:”

  • href属性 定义跳转的地址
  • title属性 定义鼠标悬停时弹出的提示文字框
  • target属性 定义链接窗口打开的位置
  • target="_self" 缺省值,新页面替换原来的页面,在原来位置打开
  • target="_blank" 新页面会在新开的一个浏览器窗口打开

示例:如果暂时不知道跳转的url地址,那么可以使用# 号作为占位

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <a href="#">#号作为占位符,跳至页面顶部</a>
</body>
</html>

浏览器展示如下:

点击一下超链接看看,如下:

示例:跳转url地址

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <a href="https://www.jianshu.com/u/a94f887f8776" 
    title="跳转至DevOps海洋的渔夫">
  DevOps海洋的渔夫
 </a>
</body>
</html>

浏览器展示如下:

可以发现,跳转url地址的话,直接就把当前页覆盖了,那么能不能打开一个新标签来访问呢?

示例:使用target="_blank"打开新标签来访问url地址

浏览器展示如下:

示例:将图片设置为超链接

前面都是用文字来作为超链接,这里改用图片,代码如下:

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <a href="https://www.jianshu.com/u/a94f887f8776" 
    title="跳转至DevOps海洋的渔夫"
    target="_blank" 
 >
  <img src="./images/e7525a4a93.jpg">
 </a>
</body>
</html>

浏览器展示如下:

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多