html网页跳转代码大全_随笔

我们编写HTML页面的时候，经常需要实现页面之间的跳转功能。HTML页面之间的跳转包括refresh方式跳转，location方式跳转，history方式跳转。下面我就给大家分别介绍一下这三种跳转方式。

refresh方式跳转

refresh方式的跳转直接在head的meta标签里面添加就可以了，如下图所示，通过url设置跳转路径

如果refresh中不指定url，则是本页面刷新，如下图所示

location方式跳转

location方式的跳转需要在js中进行调用，通过调用它下面的href属性完成跳转，如下图所示

另外还可以用setTimeOut为location跳转指定一个时间，如下图所示

history方式跳转

history方式的跳转可以直接在HTML中写，如下图所示

同时也可以通过点击按钮，在JS中调用history进行跳转，如下图所示

建设网站时，经常会遇到需要跳转页面的情况，例如我们的网站分中英文版本，网站程序索引页不是直接放在根目录下，而是分别放在“en”和“cn“目录中区分中英版本。

打开网站时，想直接跳转到en目录访问英文版，则需要使用跳转代码跳转后方可以访问。通过html代码跳转页面的详细步骤：

1、打开Dreamweaver，新建html页面；

2、创建成功后，会显示默认html网页模板代码；

3、在<head></head>中加入这样一行代码：<meta http-equiv="refresh" content="0.1url=/en">

4、其中，数值0.1是代表跳转时间为0.1秒，我们可以根据需求修改跳转时间的长短；“/en”代表要跳转到的目标目录；

5、以上步骤完成后，Ctrl+S保存网页，文件名命名为“index“，保存类型为“html”；

6、这样我们就保存了一个index.html的网页文件，将此文件通过FTP软件上传至服务器网站根目录下，输入域名打开网站，即可自动跳转到“en”目录。

html打开文件夹路径不是网页跳转的解决办法如下：

1.可以尝试在链接的地址后面加上target="_blank"，正常浏览器都会新窗口打开。

2.也可以点击左上角菜单-选项-标签设置，勾选“打开新标签时，切换到新标签”。

3.比较简单粗暴的方式是设置 a 标签的 href 属性值为 javascript:void(null)

<a href="javascript:void(null)">这是一个超链接</a>

但其实阻止了跳转的超链接那还叫超链接吗？如果只是单纯的想保持样式，完全可以用普通的 span 标签配合 CSS 来写。

a 标签的默认样式其实就是多了个 text-decoration: underline，外加 :hover、:visited 两个伪类里设置一下 color。

欢迎分享，转载请注明来源：内存溢出

html网页跳转代码大全