超连接

最新推荐文章于 2022-01-11 17:03:34 发布

The_Best_Hacker

最新推荐文章于 2022-01-11 17:03:34 发布

阅读量370

点赞数 1

分类专栏： javaWeb阶段文章标签： html 超连接

本文链接：https://blog.csdn.net/The_Best_Hacker/article/details/82761142

版权

javaWeb阶段专栏收录该内容

55 篇文章 18 订阅

订阅专栏

超连接的表示法有三种：

第一种：实现页面直接的跳转

代码实现页面一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接的三种表现</title>
</head>
<body>
<!--方式一页面之间的跳转-->
<a href="demo2.html">跳转至校训</a>
</body>
</html>

代码实现页面二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: chocolate">
<h1 align="center" >清华校训</h1>
<h2 align="center" >自强不息</h2>
<h2 align="center" >厚德载物</h2>

</body>
</html>

效果展示：

第二种：实现页面之内的跳转

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接的三种表现</title>
</head>
<body>
<!--&lt 爱我中华&gt-->
<h1 id="abc">&lt 爱我中华&gt</h1>
<h2>我爱学习</h2>
<h2>学习爱我</h2>
<h2>沉迷学习</h2>
<h2>无法自拔</h2>
<h2>沉迷学习</h2>
<h2>日渐消瘦</h2>
<!--方式二页面内的跳转-->
<a href="#abc">跳转至爱我中华</a>
</body>
</html>

效果展示：

第三种：图片作为超连接

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接的三种表现</title>
</head>
<body>
<!--&lt 爱我中华&gt-->
<h1 id="abc">&lt 爱我中华&gt</h1>
<h2>我爱学习</h2>
<h2>学习爱我</h2>
<h2>沉迷学习</h2>
<h2>无法自拔</h2>
<h2>沉迷学习</h2>
<h2>日渐消瘦</h2>
<!--&lt;!&ndash;方式三图片作为超连接&ndash;&gt;-->
<a href="demo2.html"><img src="qinghua.jpg"></a>
</body>
</html>

效果展示：

点击图片后：

The_Best_Hacker

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超连接

超连接的表示法有三种：第一种：实现页面直接的跳转代码实现页面一：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;超链接的三种表现&lt;/title&gt;&lt;/head&
复制链接

扫一扫