本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
方法:1、使用meta标签,语法“<meta url=网页地址>”;2、使用a标签,语法“<a href="网页地址">”;3、使用javascript跳转,语法“window.location.href='网页地址'”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、html中使用meta中跳转,通过meta可以设置跳转时间和页面
1 2 3 4 5 6 | <head>
<!--只是刷新不跳转到其他页面 -->
<meta http-equiv= "refresh" content= "5" >
<!--定时转到其他页面 -->
<meta http-equiv= "refresh" content= "5;url=index.html" >
</head>
|
2、a标签直接跳转
1 | <a href= "http://baidu.com" >百度一下</a>
|
3、通过javascript中实现跳转
1 2 3 4 | window.location.href= 'index.html' ;
setTimeout( "javascript:location.href='index.html'" , 5000);
|
其实两种方式是类似的,只是有的在javascript中写的跳转,另一种直接从html中写跳转
1 | <button id= "load" οnclick= "window.location.reload('/html/index.html')" >跳转</button>
|
补充说明:html跳转上一页的方式
window.history.go(-1)
;或者window.history.back(-1)
;
在html中写
1 2 | <a href=” #” onClick=”JavaScript :history.back(1);”>返回上一页</a>
<a href=” #” onClick=”javascript :history.Go(-1);”>返回上一页</a>
|
在javascript中写跳转上一页
1 2 3 4 5 6 7 | <script type= "text/javascript" >
var wrong = document.getElementById( 'btn' );
wrong.onclick = function () {
window.history.go(-1);
window.history.back(-1);
}
</script>
|
推荐学习:html视频教程
以上就是html如何实现网页跳转的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html中hr是什么意思
Html的meta标签应该如何使用
Html使用表格写首页
Html文档由哪几部分组成
Html网页优化压缩的实现步骤
Html command标签怎么用
Html中什么是内联元素?
Html5draggable属性是如何做到页面拖动效果的?方法总结在这里!
Html怎么去掉空格
Html读取不了css样式怎么办
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html如何实现网页跳转