HTML5 a 标签

什么是a标签？

更新时间: 09/22/2018  由sky8g编辑

a标签的作用：HTML 标记是一个内联HTML元素，它定义了一个超链接。超链接允许用户从一个页面导航到另一个页面。以下部分包含关于此标记的信息，包括如何使用它的示例以及相关属性和浏览器兼容性。

例如a标签的分解

 

eg:                <a href="http://sky8g.com">内容</a> 

1
2
3
4
5
6
7
8
<a href="http://sky8g.com">内容</a>
1.<a href="http://sky8g.com">内容</a>      #称为a标签元素
2.<a href="http://sky8g.com">              #称为a标签元素的起始标签
3.</a>                                     #称为a标签元素的结束标签
4.内容                                     #称为a标签元素的的内容
5.href                                     #称为a标签元素的属性
6.http://sky8g.com                         #称为a标签元素的属性值
  

 

 

 

a标签的格式：<a href=”指定要跳转的目标界面的链接”>需要展示给用户看见的内容</a>

1
<a href="http://www.sky8g.com">SKY8G</a>

 

a元素最重要的属性是 href 属性，它指的是目标的地址。

在HTML中标签<a></a> 或者大写字母A都可以使用 。其中的a（或者 A） 是 anchor 的缩写：anchor [‘&aelig;ŋkə] 基本解释是.：锚, 铁锚

<a>标签可定义锚。锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）<a> 元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观是：

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

提示和注释

提示：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。

提示：通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。

提示：请使用 CSS 来改变链接的样式。

a标签是内联元素(inline element)，如果嵌套a标签的话浏览器则会解析成:

1
2
3
4
5
6
7
<!-- a标签进行嵌套的时候 -->            表示注释
<a href="http://www.sky8g.com">点击一下               第一个a标签
    <a href="http://www.sky8g.com">里面一层</a>       第二个a标签
</a>
<!-- 而浏览器则会解析成 -- >
<a href="http://www.sky8g.com">点击一下</a>
<a href="http://www.sky8g.com">里面一层</a>

如下图：

a标签的属性和值

<a href=”http://www.sky8g.com” id=”sky8g”>SKY8G.COM</a>

讲解：其中href和id是属性， http://www.sky8g.com 和 SKY8G.COM分别是a标签属性href的值，id的值

常见的属性有：accesskey(设置访问元素的键盘快捷键)、class(规定元素的类名)、contenteditableNew(规定是否可编辑元素的内容)、data-

*New(用于存储页面的自定义数据)、dir(设置元素中内容的文本方向)、draggableNew(指定某个元素是否可以拖动)、hiddenNew hidden(属性规

定对元素进行隐藏)、id(规定元素的唯一id)、lang(设置元素中内容的语言代码)、spellcheckNew(检测元素是否拼写错误)、

style(规定元素的行内样式)、tabindex(设置元素的 Tab 键控制次序)、title(规定元素的额外信息)、

注：其中以上黑体标注的最常见。

同时a标签支持全局属性和事件属性
所谓的全局属性就是每个html’的标签都可以使用的。

点击a标签禁用a标签的href连接跳转的可以如下代码几种方法：

第一种：
1
<a href = "javascript:void(0);" onclick ="js_function()">内容文字</a>
第二种：
1
<a href="http://www.sky8g.com" onclick="js();return false;">SKY8G.COM</a>
第三种：
1
<a href="http://www.sky8g.com" onclick="return false;">SKY8G.COM</a>​

第四种：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="http://www.sky8g.com" id="sky8g">click me</a>
<script type="text/javascript">
var sky8g = document.getElementById('sky8g');
function stopDefault( e )
{
   if ( e && e.preventDefault )
      e.preventDefault();
     else
        window.event.returnValue = false;  
}
sky8g.onclick = function(e)
{
     stopDefault(e);
}
</script>

注意：preventDefault()阻止默认事件但是不支持IE，所以在IE中使用returnValue阻止！