html页面间的跳转及导航栏制作

html页面间的跳转及导航栏制作技术：通过链接进行页面跳转，通过按钮进行页面跳转

页面跳转演示：

通过链接进行页面跳转

html超链接另一个html页面的方法：在一个html文档中使用“”标签定义一个可以跳转到另一个HTML页面的超链接即可，具体语法格式“另一个html页面”。

元素最重要的属性是 href 属性，它指定链接的目标。基本语法：

文本

下面给出示例：

包含三个文件，目录结构如下

主页面名称为Main_Page.html，Main_Page.html代码如下：

这个主页链接到另外二个页面文件，是 Page_1.html和Page_2.html，保存在文件夹page中。

Page_1.html代码如下：

这是Page_1页面。

Page_2.html代码如下：

这是Page_2页面。

通过点击按钮跳转页面，有几种实现方法：

法1、在button标签外嵌套一个a标签，利用超链接进行跳转，基本语法：

文本

下面给出完整示例：

包含三个文件，目录结构如下

主页面名称为Main_PageA.html，Main_PageA.html代码如下：

页面跳转测试

 这个主页链接到另外二个页面文件，是 Page_1A.html和Page_2A.html，保存在文件夹pageA中。

Page_1A.html代码如下：

这是Page_1A页面。

Page_2A.html代码如下：

这是Page_2A页面。

法2、在button标签中添加“οnclick="window.location.href='页面url'"”代码，基本语法：

文本

下面给出完整示例：

包含三个文件，目录结构如下

主页面名称为Main_PageB.html，Main_PageB.html代码如下：

页面跳转测试B

这个主页链接到另外二个页面文件，是 Page_1B.html和Page_2B.html，保存在文件夹pageB中。

Page_1B.html代码如下：

这是Page_1B页面。

Page_2B.html代码如下：

这是Page_2B页面。

法3、在 input标签中添加onclick事件代码“οnclick="window.location.href='页面url'"”，基本语法：

例子和上面的法2差不多，就不具体写出了，可作为读者练习。

通过的格式来实现导航栏

例如

导航栏

还可以使用标签嵌入网页的CSS式样，美化之

例、使用CSS制作一个简单美观的导航栏

美化过的导航栏