a标签详解

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

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

通过使用 href 属性，创建指向另外一个文档的链接（或超链接）

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

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

HTML <a> 标签的重要属性

属性值        描述

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

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

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

href, URL, 规定链接指向的页面的 URL。

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

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

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

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

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

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

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

type, MIME 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 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

打开新窗口

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

 

1 2 3 4 5 6 7

< 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。具体用法如下图:

 

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

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

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

 

HTML <a> 标签实例

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

 

1 2 3 4 5 6

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

 

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

 

1 2 3 4 5 6

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

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

 

1 2 3 4 5 6 7

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

转载于:https://www.cnblogs.com/xiaomeizai/p/9196753.html