方法1:<a>标签
<a class="btn" href="http://www.baidu.com">当前页面打开百度</a>
<a class="btn" href="http://www.baidu.com" target="_blank">新页面打开百度</a>
方法2:<button>按钮
<button class="btn" onclick="window.location.href='http://www.baidu.com'">当前页面打开百度</button>
<button class="btn" onclick="window.open('http://www.baidu.com')">新页面打开百度</button>
优缺点对比:
a标签的优点是写网址比较方便(需要打的字比较少~),自带手型鼠标指针,没有自带背景,如果想改成从新页面打开只要加一条target="_blank"属性就好,缺点是这是一个假按钮,a标签很少指定事件的,提交表单不常用。另外,如果想做的逼真,需要加的css样式会很多,而且每做一个这样的按钮都需要指定class,生产效率比较低。
button按钮本身不带手型指针,如果需要就要加cursor: pointer;这个样式,而且自带背景。不想要的话需要设置样式。另外从当前页面打开网页和新页面打开网页的代码是不一样的,如果要切换打开方式的话需要涉及到括号引号的更改,一两个还好,多了会很麻烦。一般如果需要提交表单什么的就用按钮,单纯的页面跳转就用a标签做个样式出来就好。