HTML网页跳转

夏炎正好眠

已于 2023-07-07 19:37:34 修改

阅读量124

点赞数

分类专栏：前端文章标签： html 前端 javascript

于 2023-07-07 19:30:01 首次发布

本文链接：https://blog.csdn.net/m0_74618370/article/details/131603303

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

要求：

实现四个网页间的相互跳转。

内容：

1.首先做四张图片：

首页：

列表页：

详情页：

登录页：

2.代码

首页源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>首页</h1>
  <a href="lee 首页.html">首页</a>
  <a href="lee 列表页.html">列表页</a>
  <a href="lee 详情页.html">详情页</a>
  <a href="lee 登录页.html">登录页</a></br>
  <img class ="niubi"
  src="首页.jpg"
  title="我真的是图片，不是文字！！！" 
  
  width="700">
</body>
</html>

列表页源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>列表页</h1>
  <a href="lee 首页.html">首页</a>
  <a href="lee 列表页.html">列表页</a>
  <a href="lee 详情页.html">详情页</a>
  <a href="lee 登录页.html">登录页</a></br>
  <img class ="niubi"
  src="列表页.jpg"
  title="我也是图片，不是文字！！！" 
 
  width="700">
</body>
</html>

详情页源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>详情页</h1>
  <a href="lee 首页.html">首页</a>
  <a href="lee 列表页.html">列表页</a>
  <a href="lee 详情页.html">详情页</a>
  <a href="lee 登录页.html">登录页</a></br>
  <img src="详情页.jpg"
  title="哈哈哈我还是图片"
  width="700"
 
</body>
</html>

登录页源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>请登录</h1>
  <a href="lee 首页.html">首页</a>
  <a href="lee 列表页.html">列表页</a>
  <a href="lee 详情页.html">详情页</a>
  <a href="lee 登录页.html">登录页</a></br>
  <img src="登录页.png"
  width="700"
 
  title="没错，我也是图片">

</body>
</html>