html使用a跳转页面,HTML之a标签的使用

说到a标签,大家第一时间想到的一定是a标签的链接作用,除了链接,我们还能想到什么呢?

下面的篇幅我们一起来讨论html中a标签的用途。(针对html5讨论,html5中不支持的功能不在此篇文章的讨论范围内)

1. 链接作用

这个大家都很熟悉,就是点击跳转到我们设定的链接上,具体语法为:

平常我们在点击链接的时候有时候会在当前页面加载,有时候会在新标签页加载,还有的甚至会新建窗口加载,为什么会这样呢?这里我们就需要引进a标签的一个属性target(仅在href属性存在时才能使用)。根据w3c的文档说明我们会看到target属性有多个值,对应的说明如下:

_blank -->总在一个新打开、未命名的新标签页中载入目标文档。

_self -->在当前标签页中载入目标文档(默认选项,无需特别声明)

_parent -->在当前框架(frame)的父框架(父级frame)中载入目标文档

_top -->在当前框架(frame)的顶部框架(顶级frame)中载入目标文档

framename -->在指定的框架中载入目标文档

注意:以上属性只能在新标签或者当前标签载入目标文档,那么如何能够在新窗口载入目标文档呢?我们需要用到js中的window.open()方法,具体代码如下:

function openNewWindow(url, title)

{

window.open(url, title);

}

跳转

2. 锚点定位

除了链接到新地址,a标签还可以用来做页面内导航,即锚点定位,具体代码如下:

test test

点击跳转即可定位到id为test的div所在的位置。

3. 打电话/发短信/发邮件

打电话

发短信

4. 下载

注意:以上下载地址要与原页面同源,download的值可以缺省。

说到a标签,大家第一时间想到的一定是a标签的链接作用,除了链接,我们还能想到什么呢? 下面的篇幅我们一起来讨论html中a标签的用途。(针对html5讨论,html5中不支持的功能不在此篇文章的讨论范围内) 1. 链接作用 这个大家都很熟悉,就是点击跳转到我们设定的链接上,具体语法为: 平常我们在点击链接的时候有时候会在当前页面加载,有时候会在新标签页加载,还有的甚至会新建窗口加载,为什么会这样呢?这里我们就需要引进a标签的一个属性target(仅在href属性存在时才能使用)。根据w3c的文档说明我们会看到target属性有多个值,对应的说明如下: _blank -->总在一个新打开、未命名的新标签页中载入目标文档。 _self -->在当前标签页中载入目标文档(默认选项,无需特别声明) _parent -->在当前框架(frame)的父框架(父级frame)中载入目标文档 _top -->在当前框架(frame)的顶部框架(顶级frame)中载入目标文档 framename -->在指定的框架中载入目标文档 注意:以上属性只能在新标签或者当前标签载入目标文档,那么如何能够在新窗口载入目标文档呢?我们需要用到js中的window.open()方法,具体代码如下: function openNewWindow(url, title) { window.open(url, title); } 跳转 2. 锚点定位 除了链接到新地址,a标签还可以用来做页面内导航,即锚点定位,具体代码如下: test 点击跳转即可定位到id为test的div所在的位置。 3. 打电话/发短信/发邮件 打电话 发短信 4. 下载 注意:以上下载地址要与原页面同源,download的值可以缺省。
经验分享 程序员 微信小程序 职场和发展