当前位置:  Web服务器/前端>html/css

HTML <a> 标签用法详解

 
分享到:
    发布时间:2016-9-29  


    HTML <a> 标签用法详解HTML <a> 标签的定义和用法<a> 标签可定义锚。锚 (anchor) 有两种用法:通过使用 href 属性,创建指向另外一个文档的链接(或超链接)通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说...

HTML <a> 标签用法详解

HTML <a> 标签的定义和用法

<a> 标签可定义锚。锚 (anchor) 有两种用法:

通过使用 href 属性,创建指向另外一个文档的链接(或超链接)

通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)

<a> 标签最重要的属性是 href 属性,它指定链接的目标。

HTML <a> 标签的重要属性

属性        描述

charset, char_encoding,HTML5 中不支持。规定被链接文档的字符集。

coords coordinates HTML5 中不支持。规定链接的坐标。

downloadfilename, 规定被下载的超链接目标。

hrefURL规定链接指向的页面的 URL。

href, langlanguage_code, 规定被链接文档的语言。

mediamedia_query, 规定被链接文档是为何种媒介/设备优化的。

namesection_name, HTML5 中不支持。规定锚的名称。

reltext, 规定当前文档与被链接文档之间的关系。

rev, textHTML5 中不支持。规定被链接文档与当前文档之间的关系。

shape  default,rect,circle,poly  HTML5 中不支持。规定链接的形状。

target_blank,_parent,_self,_top,framename 规定在何处打开链接文档。

typeMIME type, 规定被链接文档的的 MIME 类型。

HTML <a> 标签的标准属性

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

HTML <a> 标签的事件属性

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, 

onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup


HTML <a> 标签的重要的target 属性

<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。

打开新窗口

被指向的超链接使得创建高效的浏览工具变得很容易。例如,一个简单的内容文档的列表,可以将文档重定向到一个单独的窗口:

<h3>Table of Contents</h3>
<ul>
  <li><a href="pref.html" target="view_window">www.169it.com,Preface</a></li>
  <li><a href="chap1.html" target="view_window">www.169it.com,Chapter 1</a></li>
  <li><a href="chap2.html" target="view_window">www.169it.com,Chapter 2</a></li>
  <li><a href="chap3.html" target="view_window">www.169it.com,Chapter 3</a></li>
</ul>

HTML <a> 标签的四种状态

一般来说,a标签有着四种状态,分别是link,hover,active,visited。具体用法如下图:

HTML <a> 标签的四种状态

HTML <a>标签使用的注意事项

1. 如果不使用<a> 标签的 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性

2. 被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)。

3. 请使用 CSS 来设置链接的样式。


HTML <a> 标签实例

HTML <a> 标签详细用法举例1, 创建超级链接

<html>
<body>
<p>
<a href="www.169it.com">首页</a>
</body>
</html>

HTML <a> 标签详细用法举例2,在新的浏览器窗口打开链接即HTML <a> 标签的 target 属性

<html>
<body>
<a href="http://www.169it.com/" target="_blank">访问169it</a>
<p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。</p>
</body>
</html>

HTML <a> 标签详细用法举例3, 跳出框架

<html>
<body>
<p>被锁在框架中了吗?</p> 
<a href="/index.html"
target="_top">请点击这里!</a> 
</body>
</html>



本类别最新文章推荐:


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号