超链接
作用:点击跳转到相应位置
a标签
语法:
<a href="链接地址">文本或图片</a>
范例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>跳转到百度</title>
</head>
<body>
<a href="https://www.baidu.com">百度</a><br/>
<a href="小猫.jpg">看看小猫</a>
</body>
</html>
如上代码,在网页打开可以看到如下效果,点击百度
跳转到百度首页,点击看看小猫
可以打开··小猫.jpg
查看
拓展:
在百度首页,点击百度的图片可以跳转到新页面,所以图片也可以接入超链接。
范例:
如下范例中,网页显示百度图片,点击跳转搜狗首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>跳转到百度</title>
</head>
<body>
<a href="https://www.baidu.com">百度</a><br/>
<a href="小猫.jpg">看看小猫</a><br/>
<a href="https://www.sogou.com/"><img src="baidu.png"></a>
</body>
</html>
target属性
定义打开超链接的方式,默认状况下是在当前页面打开超链接,常用的是在新页面打开超链接
用法:
<a href="链接地址" target="_self">在当前页面打开超链接</a>
<a href="链接地址" target="_blank">在新页面打开超链接</a>
<a href="链接地址" target="_parent">在父页面打开超链接</a>
<a href="链接地址" target="_top">在顶层页面打开超链接</a>
内部链接
顾名思义,跳转到自己的HTML页面上
比如我这个项目下有多个HTML文件,我可以从一个跳转到另一个指定的HTML文件下
效果:点击网页会跳转显示20240111.html
的内容
锚点链接
使用锚点链接跳转到当前网页的指定位置,类似目录,点击目录跳转到目录所在段落
对于有很长页面的网页这个东西才有用,可以帮助使用者快速跳转到相应为止开始浏览网页。
或者很多网页的回到顶层按钮也是基于这个吧?
用法:注意不要漏了锚点名前面的 # 号
<div>
<a href="#锚点名">锚点描述</a>
</div>
</div id="锚点名">
...
</div>