超连接

超连接的表示法有三种:

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

代码实现页面一:

<!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>

效果展示:

点击图片后:

猜你喜欢

转载自blog.csdn.net/The_Best_Hacker/article/details/82761142
今日推荐