HTML学习笔记

HTML学习03-a标签

2019-03-08  本文已影响13人  coderhlt

一、a标签的基本使用

作用：定义超链接，用于打开新的URL
a标签的格式: <a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
a标签必须有一个href属性, 用于打开制定的URL
<a href="https://www.nuomi.com/?cid=002540">糯米</a>

1.点击文字跳转到一个url
<a href="https://www.baidu.com">百度</a>
<a href="http://www.jianshu.com">简书</a>
<a href="http://map.baidu.com//">地图</a>

2.点击图片跳转到一个url
<a href="http://map.baidu.com//"><img src="课程.png"> </a>
<a href="http://www.jianshu.com"><img src="images/QRCode.jpg" width="150">

3.target属性
target属性可以有以下取值
_self:默认值，在当前窗口打开URL
_blank:在新一个的窗口中打开URL
_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
framename: 在指定的框架中打开被链接文档。
3.1 、_self和_blank

  a.用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
    <a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
  b. 用于在新的选项卡中跳转, 也就是新建界面跳转
    <a href="https://www.nuomi.com/?cid=002540" target="_blank"><img src="课程.png"></a>

  c. 默认就是_self,新建界面跳转,在当前选项卡中跳转.
     <a href="http://www.jianshu.com"><img src="images/QRCode.jpg" width="150">

3.2 、 _parent和_top
利用ifframe元素可以实现:在一个HTML文档中嵌入七天HTML文档
例如


屏幕快照 2019-03-12 上午10.56.26.png 
a.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="yellow">
我是第a个页面
</body>
<iframe src="b.html" frameborder="1" width="500" height="500"></iframe>
</html>

b.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="red">
<iframe src="c.html" frameborder="1" width="300" height="300"></iframe>
我是第b个页面
</body>
</html>

c.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="green">
我是第c个页面
</body>
</html>

浏览器打开a.hml效果如下:


屏幕快照 2019-03-12 上午10.59.00.png

a嵌套了b,b又嵌套了c。我们利用ifframe元素就可以实现。其中属性frameborder用于规定是否显示边框:0表示不显示,1表示显示。属性scr表示将要嵌入哪一个网页

c.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="green">
我是第c个页面
<br>
<a href="https://www.baidu.com/" target="_self">当前窗口打开</a>
<br>
<a href="https://www.baidu.com/" target="_blank">新窗口打开</a>
<br>
<a href="https://www.baidu.com/" target="_parent">父窗口打开</a>
<br>
<a href="https://www.baidu.com/" target="_top">最顶层窗口打开</a>
</body>
</html>

像以上a嵌套b,b嵌套c 时，target="_parent"就表示在c的父窗口，也就是b窗口打开。，target="_top"就表示在最顶层窗口打开。这里的最顶层窗口就是a，也就是覆盖a窗口打开

3.3 framename
在指定的框架中打开被链接文档。

</body>
<iframe name="a" src="https://www.baidu.com/" frameborder="1" ></iframe>
<iframe name="qqq" src="https://weibo.com/" frameborder="1" ></iframe>
<a href="https://www.youku.com/" target="qqq">链接</a>
</html>

正如代码所写那样，在一个html网页嵌入了百度的网页和新浪的主页，而我们期望点击链接在新浪的窗口界面上打开优酷的页面，这是我们需要自定义name值，让target等于这个值就好了。

4.base元素
可以利用base元素设置当前页面所有a元素的默认行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base target="_blank">
</head>
<body >
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.jd.com" target="_self">京东</a>
<br>
<a href="http://www.taobao.com">淘宝</a>
</body>
</html>
/*base元素必须写在head元素中，target="_blank"统一设置了，百度和淘宝是在新的窗口打开。而京东的链接是在当前窗口打开，因为a标签就近指明了是_self;
*/

二、锚点链接

跳转到网页中的具体位置如图：


屏幕快照 2019-03-12 下午3.18.56.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>目录</h2>
<p><a href="#first">第一章</a></p>
<p><a href="#second">第二章</a></p>
<p><a href="#third">第三章</a></p>
<h2 id="first">第一章:猴王出世</h2>
<p>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
</p>

<h2 id="second">第二章:大闹天宫</h2>
<p>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
</p>


<h3 id="third">第三章:西天取经</h3>
<p>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
</p>

像以上那样实现页面内的跳转，就可以使用a标签给属性href赋值， href = "#first"。注意href的值必须以#开头，告诉浏览器不需要往外跳转，#后面跟将要跳转地方位置标签的shu x

三、伪链接

有的时候点击链接的时候并不希望打开新的URL,而是希望干点别的事情，这个时候可以用伪链接。比如某个时候可以把链接当作按钮使用。

<a href="#" onclick="return false">立即充值</a>
<a href="javascript:">再次充值</a>

四、图片链接

img元素和a元素一起使用，就可以实现图片链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">
    <img src="02.png" alt="">
</a>
</body>
</html>

很简单就是把以前的文字部分换成img元素。

五、其他使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://down.sandai.net/mac/thunder_3.3.1.3904.dmg" target="_self">下载文件</a>
<a href="mailto:23456@qq.com" target="发邮件"></a>
<a href="ed2k://|file|cn_windows_10_multiple_editions_x64_dvd_6848463.iso|4303300608|94FD861E82458005A9CA8E617379856A|/">
    打开迅雷下载文件</a>
</body>
</html>

总结：

  1. a元素是来定义超链接的，用于打开新的URL.
    这里的URL可以是本地的文件路径。

  2. a元素可以跳转到网页中的具体位置
    <p><a href="#first">第一章</a></p>

3、a元素可以用作伪链接，比如当按钮使用

4、a元素和图片结合使用，可以实现点击图片链接。

5、a元素href不同，可能做的事情不同，不一定都是打开网页，还可能是下载文件、发邮箱、打开软件下载等

上一篇下一篇

猜你喜欢

热点阅读