HTML-超级链接标签
2022-05-27 本文已影响0人
测试探索
一、超级链接介绍
image.png
image.png
二、目录结构
image.png
三、脚本编写
3.1运行文件，点击文字，跳转到对应链接
test-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-1</title>
</head>
<body>
<a href="welcome.html">打开新页面</a>
</body>
</html>
welcome.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我的新页面</h1>
<a href="test-1.html">单机此处返回首页</a>
</body>
</html>
运行test-1.html，展示图片1，点击打开新页面，展示图片2
图片1
图片2
3.2运行文件，点击文字，跳转到对应图片
test-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-1</title>
</head>
<body>
<p><a href = "welcome.html">打开新页面</a></p>
<a href="https://www.jianshu.com/u/c84a9d27d8c3">简书博客首页</a>
<a href = "image/1.png">打开一个图片</a>
</body>
</html>
运行文件，得到图片1，点击打开一个图片，跳转到图片页面
image.png
image.png
3.3运行文件，点击图片，跳转到对应链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-1</title>
</head>
<body>
<p><a href = "welcome.html">打开新页面</a></p>
<a href="https://www.jianshu.com/u/c84a9d27d8c3">简书博客首页</a>
<a href = "image/1.png">打开一个图片</a>
<a href = 'welcome.html'><img src="image/2.png"></a>
</body>
</html>
运行文件，点击图片，跳转到对应链接
图片1
图片2
3.4打开一个新的页面,使用target属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-1</title>
</head>
<body>
<p><a href = "welcome.html">打开新页面</a></p>
<a href="https://www.jianshu.com/u/c84a9d27d8c3">简书博客首页</a>
<a href = "image/1.png">打开一个图片</a>
<a href = 'welcome.html' target = "_blank">
<img src="image/2.png">
</a>
</body>
</html>
image.png
image.png
