超连接的表示法有三种:
第一种:实现页面直接的跳转
代码实现页面一:
<!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>
<!--< 爱我中华>-->
<h1 id="abc">< 爱我中华></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>
<!--< 爱我中华>-->
<h1 id="abc">< 爱我中华></h1>
<h2>我爱学习</h2>
<h2>学习爱我</h2>
<h2>沉迷学习</h2>
<h2>无法自拔</h2>
<h2>沉迷学习</h2>
<h2>日渐消瘦</h2>
<!--<!–方式三图片作为超连接–>-->
<a href="demo2.html"><img src="qinghua.jpg"></a>
</body>
</html>
效果展示:
点击图片后: