前端技巧关于链接a标签 你还应该知道的知识

关于链接a标签 你还应该知道的知识

在html中,a标签是几乎是用的最多的一个,因为在每个网页上都有很多链接,包括文字链接和图片链接,对于这个再熟悉不过的标签,你有没有完全掌握它的用法呢?

我们定义链接最基本的代码是:

<a href="http://www.google.com">Google</a>

如果是图片链接,一般我们写为:

<a href="http://www.google.com"><img alt="Google" src="google.png" /></a>

一般情况下,点击链接后会在本窗口打开链接,如果希望从新窗口打开链接,则可以加入target属性:

<a href="http://www.google.com" target="_blank">Google</a>

使用过百度搜索和Google搜索的朋友应该有印象,百度搜索结果默认是从新窗口打开的,而Google则默认从本窗口打开。

百度和Googe的这种差别,与国内外用户的习惯和两家搜索引擎的理念有关。国内用户很多人喜欢进入一个网站后,打开一个链接看几眼后关掉,再去看另一个链接,这个习惯很可能和以前的网速慢有关。而国外用户都善于使用浏览器的前进和后退按钮,如果链接从新窗口打开反而不习惯。关于百度和Google的理念也有区别,一般后者可以很准确的搜索到自己要的东西,所以点进去就行了,没必要留着搜索页面,而相对于Google,百度的搜索结果并没有那么准确,所以它设置为新窗口打开链接也是正常的。

如果作为html初学者,并不建议使用target属性来规定新窗口打开链接,将决定权交给用户,是未来发展的趋势,浏览器一般都自带新窗口打开链接的功能,比如点击链接的同时按下Shift键即可从新窗口打开,而且很多浏览器都有拖拽功能,这样也能从新窗口打开链接。如果让浏览器频繁弹出新窗口或新标签的话,也很占用系统资源。

a标签除了定义链接外,还可以定义锚点,下面来举个示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {line-height:3;}
#wrap {margin:50px;width:500px;}
a {color:blue;font-size:20px;}
</style>
</head>
<body>
<div id="wrap">
<a href="#a1">手机</a> <a href="#a2">平板电脑</a>
<p>2011年8月24日,乔布斯辞去苹果公司首席执行官职位,董事会任命原首席运营官提姆·库克为公司的新任首席执行官,乔布斯当选为董事长。2011年10月5日,乔布斯逝世。库克接手后并未对公司作出重大改变,大致上依照乔布斯时代的方向继续营运公司。2012年1月10日,苹果以5亿美元收购以色列存储器制造商Anobit,同时在当地设立研发中心。</p>
<h3 id="a1">iPhone</h3>
<p>iPhone是美国苹果公司研发的智能手机系列,2017年9月13日,苹果公司发布三款全新iPhone,4.7英寸的iPhone8、5.5英寸的iPhone8 Plus和5.8英寸的iPhone X。</p>
<h3 id="a2">iPad</h3>
<p>iPad是由苹果公司于2010年开始发布的平板电脑系列,2017年3月21日,苹果推出了新款9.7 英寸iPad,拥有亮度更高的Retina显示屏以及强劲的性能表现。iPad是由苹果公司于2010年开始发布的平板电脑系列,定位介于苹果的智能手机iPhone和笔记本电脑产品之间,(屏幕中有4个虚拟程序固定栏)与iPhone布局一样,提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。</p>
<p>苹果公司的电脑产品已从2006年全面采用英特尔处理器,但iPad和iPhone等iOS移动设备则采用苹果公司自行设计的A系列ARM SoC处理器...</p>
<a href="#top">返回</a>
</div>
</body>
</html>

这个网页中间有两个h3标题,id分别为a1和a2,当我们点击指向#a1的文本锚链接时,网页就跳转到a1标题的位置,点击#a2的时候亦然,我们点击文末的返回链接时,网页会返回顶部,此时的a标签起到一个简单的定位作用,一般将指向一个网页的链接成为超链接,起定位作用的链接成为锚链接。

在a标签中,我们可以使用rel属性来指定当前文档与被链接文档之间的关系,例如:

rel="next" 表示下一个文档

rel="prev" 表示前一个文档

rel="nofollow" 表示无需搜索引擎追踪

此属性对于链接来说并无影响,仅仅是告知搜索引擎当前文档与被链接文档之间的关系。

在a标签中,我们还可以使用download属性来定义被下载的文档,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
a {color:blue;font-size:20px;}
</style>
</head>
<body>
<a href="/style/down.jpg" download="测试图片">点击此链接试试</a>
</body>
</html>

这里的a标签链接到一张图片,但添加了download属性,所以点击链接后,会直接弹出下载界面下载这张图片。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/56.html