<a></a>标签的语法格式 - 软件技术的智慧之源

一、概念

二、基本特性

三、注意事项

四、代码实例

一、概念

a标签全称anchor，翻译为锚，常用来表示一个锚点或超链接。除交互类别的内容（按钮，链接等）外，a标签可以嵌套任何文档流内容。所有浏览器都支持a标签。

二、基本特性

href特性

href是a标签最重要的特性，表示链接的目标地址，包含三种类型，其一链接地址，其二下载地址，其三锚点地址。href特性值不能为空，否则会刷新页面，若暂时不需要设置目标地址，可以如下代码所示设置特性值。

<a href="javascript:void(0)">暂时不设置目标地址</a>
<a href="javascript:;">暂时不设置目标地址</a>

链接地址

<a href="http://www.baidu.com">百度</a>

下载地址

<a href="test.zip">下载测试</a>

锚点地址

href:#id名

<a href="#test">目录</a>
<div style="height:1000px;width:100px;background-color: red;"></div>
<div id="test">内容</div>

href:页面地址#id名

<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

href特性与src特性的区别

href全称hypertext reference，翻译为超文本引用，表示当前页面引用了别处的内容。src全称source，翻译为来源地址，表示把别处的内容嵌入到当前页面。img、script和iframe等标签使用src特性，a、map等标签使用href特性。

target特性

表示链接的打开方式，特性值如下所示。

_self:      当前窗口(默认)
_blank:     新窗口
_parent:    父框架集
_top:       整个窗口
_framename: 指定框架

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <base href="https://www.baidu.com/" target="_blank">
</head>
<body>
    <a href="#" target="_self">_self(_self)</a>
    <a href="#" target="_blank">_blank(_blank)</a>
    <a href="#" target="_parent">_parent(_parent)</a>
    <a href="#" target="_top">_top(_top)</a>
    <a href="#" target="bottom">_framename </a>
    <iframe name="bottom" src="http://news.baidu.com/" frameborder="0"></iframe>
</body>
</html>

download特性

设置下载文件的名称，兼容firefox/chrome/opera浏览器。

<a href="test.zip" download="gogo">test</a>

rel特性

表示链接间的关系。

alternate   相较于当前文档可替换的呈现
author      链接到当前文档或文章的作者
bookmark    链接最近的父级区块的永久链接
help        与当前上下文相关的帮助链接
license     当前文档的许可证
next        后一篇文档
prev        前一篇文档
nofollow    当前文档的原始作者不推荐超链接指向的文档
noreferer   访问时链接时不发送referer字段
prefetch    预加载链接指向的页面(对于chrome使用prerender)
search      用于搜索当前文档或相关文档的资源
tag         给当前文档打上标签

当一篇篇幅很长的文章需要多页显示时，配合next或prev可以实现前后页面导航的预加载。

<a href="prev.html" rel="prev prefetch prerender">前一页</a>
<a href="next.html" rel="next prefetch prerender">后一页</a>
<!--prefetch也可以用于预加载其他类型的资源-->
<link rel="prefetch prerender" href="test.img">

三、注意事项

1、a标签的文本颜色只能自身设置，从父级继承不到。
2、a标签的下划线颜色跟随文本颜色进行变化
3、a标签不能嵌套a标签和按钮等交互类型的内容

<div style="color: red;">
    <a href="#">从父级继承不到红色字体</a>
    <br>
    <a href="#" style="color: green">下划线颜色与文本同色</a>
    <br>
    <a href="#">前面<a href="#">a标签不可嵌套</a></a>
</div>

四、代码实例

a标签有三个功能，其一超链接，其二锚点，其三调用电话/邮件API接口。超链接是跳转到其它页面，锚点是跳转到页面某一位置。

改变超链接的颜色

:link       声明未访问状态链接的样式
:visited    声明已经访问链接的样式
:hover      声明鼠标悬停在链接上的样式
:active     声明浏览器点击链接的样式

定义链接样式时必须按照link--visited--hover-active的顺序，如果打乱顺序的话，有的状态样式可能被后面的样式覆盖。在w3c规范中，规定了链接样式的声明顺序，在css定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。在css定义中，a:active必须被置于a:hover之后，才是有效的。

<style type="text/css">
    a:link {color: red}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
</style>
<a href="/index.html" target="_blank">这是一个链接</a>

使用图片作为超链接

<a href="/index.html">
    <img border="0" src="/bas.gif" />
</a>

链接到同一页面的不同位置

<a href="#C4">超链接</a>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

打电话、发邮件

Mailto链接是一种html链接，可以激活计算机上用于发送电子邮件的默认邮件客户端。Web浏览器需要在其计算机上安装默认的电子邮件客户端软件才能激活电子邮件客户端。

<a href="mailto:rebell0003@gmail.com">rebell0003@gmail.com</a>

在移动端，使用如下代码可以唤出手机拨号盘。

<a href="tel:13266419102">13266419102</a>

取消默认行为

<a href='javascript:;'>超链接</a>
<a href='javascript:void(0);'>超链接</a>

回到页面顶部

<a href='#'>回到顶部</a>

标签的语法格式

一、概念

二、基本特性

三、注意事项

四、代码实例

知秋君

相关推荐