html页面间的跳转及导航栏制作
html页面间的跳转及导航栏制作技术：通过链接进行页面跳转，通过按钮进行页面跳转
页面跳转演示：
通过链接进行页面跳转
html超链接另一个html页面的方法：在一个html文档中使用“<a>”标签定义一个可以跳转到另一个HTML页面的超链接即可，具体语法格式“<a href="html页面的具体URL">另一个html页面</a>”。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。基本语法：
<a href="URL">文本</a>
下面给出示例：
包含三个文件，目录结构如下
主页面名称为Main_Page.html，Main_Page.html代码如下：
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>主页面</title>
</head>
<body>
<a href="page/Page_1.html">跳转到Page_1页面</a>
<br>
<a href="page/Page_2.html">跳转到Page_2页面</a>
</body>
</html>
这个主页链接到另外二个页面文件，是 Page_1.html和Page_2.html，保存在文件夹page中。
Page_1.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_1页面</title>
</head>
<body>
<p>这是Page_1页面。</p>
<a href="../Main_Page.html">跳转回主页面</a>
</body>
</html>
Page_2.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_2页面</title>
</head>
<body>
<p>这是Page_2页面。</p>
<a href="../Main_Page.html">跳转回主页面</a>
</body>
</html>
通过按钮进行页面跳转
通过点击按钮跳转页面，有几种实现方法：
法1、在button标签外嵌套一个a标签，利用超链接进行跳转，基本语法：
<a href="URL"> <button>文本</button> </a>
下面给出完整示例：
包含三个文件，目录结构如下
主页面名称为Main_PageA.html，Main_PageA.html代码如下：
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>主页面</title>
</head>
<body>
<p>页面跳转测试</p>
<a href="pageA/Page_1A.html">
<button>跳转到Page_1A页面</button>
</a>
<br>
<a href="pageA/Page_2A.html">
<button>跳转到Page_2A页面</button>
</a>
</body>
</html>
这个主页链接到另外二个页面文件，是 Page_1A.html和Page_2A.html，保存在文件夹pageA中。
Page_1A.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_1A页面</title>
</head>
<body>
<p>这是Page_1A页面。</p>
<a href="../Main_PageA.html"> <button>跳转回主页面</button> </a>
</body>
</html>
Page_2A.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_2A页面</title>
</head>
<body>
<p>这是Page_2A页面。</p>
<a href="../Main_PageA.html"> <button>跳转回主页面</button> </a>
</body>
</html>
法2、在button标签中添加“οnclick="window.location.href='页面url'"”代码，基本语法：
<button οnclick="window.location.href = '页面url '">文本</button>
下面给出完整示例：
包含三个文件，目录结构如下
主页面名称为Main_PageB.html，Main_PageB.html代码如下：
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>主页面</title>
</head>
<body>
<p>页面跳转测试B</p>
<button onclick="window.location.href = 'pageB/Page_1B.html'">跳转到Page_1A页面</button>
<br>
<button onclick="window.location.href = 'pageB/Page_2B.html'">跳转到Page_2A页面</button>
</body>
</html>
这个主页链接到另外二个页面文件，是 Page_1B.html和Page_2B.html，保存在文件夹pageB中。
Page_1B.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_1B页面</title>
</head>
<body>
<p>这是Page_1B页面。</p>
<button onclick="window.location.href = '../Main_PageB.html'">跳转回主页面</button>
</body>
</html>
Page_2B.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_2B页面</title>
</head>
<body>
<p>这是Page_2B页面。</p>
<button onclick="window.location.href = '../Main_PageB.html'">跳转回主页面</button>
</body>
</html>
法3、在 input标签中添加onclick事件代码“οnclick="window.location.href='页面url'"”，基本语法：
<input type="button" value="文本" οnclick=" window.location.href='URL'">
例子和上面的法2差不多，就不具体写出了，可作为读者练习。
制作导航栏
通过<ul><li><a href=""></a></li></ul>的格式来实现导航栏
例如
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>导航栏测试</title>
</head>
<body>
<p>导航栏</p>
<ul>
<li><a href="page/Page_1.html"> 跳转到Page_1页面 </a></li>
<li><a href="page/Page_2.html"> 跳转到Page_2页面 </a></li>
</ul>
</body>
</html>
还可以使用<style>标签嵌入网页的CSS式样，美化之
例、使用CSS制作一个简单美观的导航栏
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>导航栏测试</title>
</head>
<style>
ul {
list-style-type: none;
margin: 1px;
padding: 0px;
width: 200px;
background-color: #f7f4f1;
text-align:center;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #6477;
color: white;
}
li a:hover:not(.active) {
background-color: #505;
color: white;
}
</style>
<body>
<p>美化过的导航栏</p>
<ul>
<li><a href="page/Page_1.html"> 跳转到Page_1页面 </a></li>
<li><a href="page/Page_2.html"> 跳转到Page_2页面 </a></li>
</ul>
</body>
</html>
