HTML-超级链接标签

作者: 测试探索 | 来源:发表于2022-05-27 14:22 被阅读0次

HTML-超级链接标签
html阶段第一节第二天
HTML-标签
HTML-内容标签
html-高级标签
HTML-常用标签
html-常用标签
HTML-<认识标签>
HTML-标签属性
HTML-换行标签

一、超级链接介绍

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

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>