首页 » 编程语言 » html » 正文

HTML元素a标签的书写格式及用法详解

html元素<a>标签是英文"Anchor"的缩写,用来定义超文本连接的,有关a标签的书写格式及用法详解如下:

<a>标签定义

<a>标签是用来定义超文本链接,简称超链接,点击超链接之后,可以从一个页面跳转到另一个页面;

<a>标签最重要、最常用的属性是href属性,该属性是用来指定超链接的目标;

<a>标签超链接的载体可以是文本,也可以是图片;

<a>标签除了创建跳动到其他页面的超链接外,还可以定义一键拨打电话,发送短信、发email邮件等功能;

<a>标签的链接样式请使用 CSS样式表来修改。

<a>标签书写格式

<a>标签的书写格式如下:

<a href="url" > 超链接载体</a>

其中,url是指向目标的链接地址,可以是相对路径,也可以是绝对路径;

<a>标签默认样式

在所有浏览器中,a标签超链接的默认样式效果如下:

a:link(未访问链接状态):默认带有下划线,且字体颜色是蓝色的;

a:visited(已访问链接状态):默认带有下划线,且字体颜色是紫色的;

a:hover(鼠标悬停状态):默认带有下划线,但如果连接未被访问,则蓝色;如果连接已被访问,则紫色;

a:active(活动链接状态):默认带有下划线,且字体颜色是红色的;

相关连接:a标签超链接四个伪类使用方法    

相关连接:如何去掉或取消html超链接下划线的方法

<a>标签的用法

1、最常用的用法

a标签最重要的属性是href,可以说,没有这个href属性,a标签也就失去了存在的意义,把href属性的用法讲清楚了,a标签的用法也就基本上清楚了。

文本连接

<a>标签应用最广泛、最常用的就是创建可以跳转到另一个页面的超链接,比如,创建一个点击“刘代码博客”五个字之后,跳转到刘代码博客首页的超链接,演示代码如下:

<a href="http://www.liudaima.com" target="_blank" >刘代码博客</a>

target="_blank"表示以新窗口的方式打开链接地址,但如果不规定target属性,默认是在当前浏览器窗口中打开链接页面。

图像链接

我们也可以在一张图像上创建超链接,点击图片后,可以跳转到指定的链接目标,演示代码如下:

<a href="http://www.liudaima.com">
<img border="0" alt="刘代码博客logo" src="logo.png" width="165" height="90">
</a>

2超链接其他功能

<a>标签的超链接还可以创建锚点链接、下载功能、一键拨打电话和发送短信内容,以及发送电子邮件等功能。

<a>标签创建锚点链接的用法     

<a>标签创建下载功能的用法    

<a>标签一键拨打电话的用法     

<a>标签一键发送短信的用法    

<a>标签一键发送电子邮件的用法     

3、设置<a>标签宽度和高度

我们直接设置<a>标签高度和宽度是不会起作用的,这是因为a标签属于内联元素,而内联元素不支持设置宽度(width)和高度(height),那么, a 标签如何才能设置宽度和高度呢?

只要把<a>标签转换成块级元素、内联块级元素、浮动状态就可以解决问题了。而这三种设置的具体方法,请查看我的另一篇文章:<a>标签如何设置高度和宽度            

4、设置<a>标签字体颜色

我们可以通过css样式改变默认字体颜色,比如,我们想要红色(red)的字体,可以使用style属性设置color:red,代码如下:

<a style="color:red" href="http://www.liudaima.com">刘代码博客</a>

 这种直接在a标签上修改字体颜色的方法叫行内设置法,我们可以通过内部设置法和外部设置法修改字体颜色,具体方法请查看:<a>标签设置超链接字体颜色的方法      

5、<a>标签其他相关设置

怎么去掉多个a标签之间的缝隙空白间距   

<a>标签的属性

如果<a>标签没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。

<a>标签在 HTML 4.01 中,<a>标签既可以是超链接,也可以是锚。

<a>标签在 HTML5 中,<a>标签是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。

属性描述
hrefURL规定链接的目标 URL。
hreflanglanguage_code规定目标 URL 的基准语言。仅在 href 属性存在时使用。
target
_blank
_parent
_self
_top
framename
规定在何处打开目标 URL。仅在 href 属性存在时使用。
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag

规定当前文档与目标 URL 之间的关系。

仅在 href 属性存在时使用。

mediamedia_query

html5新增属性,规定目标 URL 的媒介类型。

默认值:all。仅在 href 属性存在时使用。

typeMIME_type

html5新增属性,规定目标 URL 的 MIME 类型。

仅在 href 属性存在时使用。

注:MIME = Multipurpose Internet Mail Extensions。
download  filenamehtml5新增属性,表示指定下载链接。
shapedefault
rect
circle
poly
HTML5 不支持。规定链接的形状。
revtextHTML5 不支持。规定目标 URL 与当前文档之间的关系。
namesection_nameHTML5 不支持。规定锚的名称。
charsetchar_encodingHTML5 不支持。规定目标 URL 的字符编码。
coordscoordinatesHTML5 不支持。规定链接的坐标。

HTML5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。



欢迎您发表评论或留言