<a>标签的主要功能是跳转。

href属性

标签里的href属性是链接指向的地址,也就是链接跳转的地址。如果没有href属性,则不能使用 hreflang、media、rel、target 以及 type 属性。

href值为空时,指向当前页面,起刷新作用。href值为#时,不刷新页面,回到最顶端。href值为javascript:xx时,<a>标签调用javascript事件。href值也可以是网址和锚。

我们可以用<p>标签的id属性来创建锚点,用<a>标签的href属性来跳转锚点。

<p id="app">锚点</p>

<a href="#app">跳转到app锚点</a>

当href值为一个网址时,点击链接会跳转到该网址,例如<a href="https://www.baidu.com">跳转到百度</a>。(最常用)

rel属性

rel属性用来声明此链接与当前页面的关系。rel有很多规定的值,各位可以在菜鸟教程里获取比较详细的rel值。里面的rel值还不够全面,XFN(XHTML Friends Network)还规定了更多的rel值。

rel="nofollow"将暗示搜索引擎不要爬取这个链接,Google对nofollow又进一步分解,用户产生内容和广告有另外的rel值。

rel="friend"将告诉搜索引擎这个链接是友情链接。

rel="noopener"将保证网页浏览的安全,将在target属性一节中谈。

我们在文章友链那篇文章中提倡bookmark属性值。

download属性

download是html5添加属性,请在使用前先声明html5。download属性值填文件地址,例如/logo.png。

target属性

target属性声明在何处打开目标页面,只有在href属性存在时使用。target默认值为_self,即在当前页面打开。

通常,我们填写的值是_blank,但需要同时加上rel="noopener"属性,用于解决可被恶意网站利用的安全漏洞,因为我们在使用_blank时会赋予目标页面一些操作原页面的权限。

target属性值还有_parent和_top。

hreflang属性

只有href属性存在时才能使用hreflang属性。hreflang属性值用来指定被链接页面所使用的语言,例如hreflang="zh"代表链接指向的页面使用中文。主流浏览器几乎都不支持hreflang属性。

type属性

type属性只有href属性存在才能使用,用来指定链接指向页面的类型,例如

<a href="https://www.baidu.com" type="text/html">百度</a>

Baidu mip也使用data-type属性来对MIP页面的链接进行标记,例如data-type="mip"。

还有media属性,大家可以在https://www.w3school.com.cn/tags/att_a_media.asp中了解这个属性。当然,<a>标签也可以使用全局属性title。