您的位置:首页> 前端教程> HTML教程
文章导航

HTML <a> 标签

2018-10-8 23:49| 作者: admin| 查看: 1574| 评论: 0|来自: 蚂蚁部落

超链接是网页的核心内容之一。

通过超链接可以实现站内页面或者站际页面之间的跳转。

没有超链接的网站的可用性必然具有很大的局限性。

使用<a>元素可创建一个超链接,代码如下:

[HTML] 纯文本查看 复制代码
<a href="http://www.softwhy.com">蚂蚁部落</a>

上面代码中使用<a>标签创建一个超链接,点击它可以跳转到蚂蚁部落首页。

<a>标签主要属性如下:

(1).href:用于规定链接的跳转地址。

(2).download:用于规定下载文件的名称(HTML5)。

(3).target:用于规定href指向的页面在何处打开。

链接具有很多不同的状态,CSS也可以根据链接不同的状态为其设置CSS样式。

具体可以参阅CSS 设置链接样式一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<a href="http://www.softwhy.com">蚂蚁部落</a>
</body>  
</html>

上面代码中,点击链接将会跳转到href属性规定链接地址。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<a href="http://www.softwhy.com">
  <img src="mytest/div+css/border.jpg"/>
</a>
</body>  
</html>

<a>元素之间的内容并不一定非要是文本,也可以是图片。

这样的话可以是链接更加丰富多彩一些。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<p>点击下载图片<p>
<a href="demo/html5/img/abdedefg.png" download="本站logo">点击下载</a>
</body>  
</html>

download是HTML5新增属性,它可以让下载文件的名称更加人性化。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/235127hdaia7kqkxwwdqp0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很多时候,需要下载的文件在服务器中的名称是通过各种方式计算而成,比如根据文件上传时间命名。

这样的文件命名方式对下载者来说是非常不人性化的,那么可以通过download为文件重新命名。

上面代码中,文件在服务器中的存储名称是"abdedefg.png",通过download将其重名为"本站logo"。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<p>点击下载图片<p>
<a href="http://www.softwhy.com" target="_blank">蚂蚁部落</a>
</body>  
</html>

通过target属性可以规定页面在何处打开。

target可以有如下属性值:

(1)._blank:规定在新的窗口打开href规定的页面。

(2)._self:默认值,在当前页面所在的窗口打开href规定的页面。。

(3)._parent:在包含当前子窗口的父窗口或者框架集中打开href规定的页面。

(4)._top:在整个窗口中打开被href规定的页面。

(5).框架名称:在指定的框架打开href规定的页面。


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML lang 属性下一篇:HTML dir 属性

最新评论

返回顶部