2.4.1 a元素

优质

小牛编辑

131浏览

2023-12-01

链接是万维网的命脉，如果没有链接，每个页面都只能孤立地存在，同其他页面完全分开。通过链接，可以建立同其他网页或网站之间的连接，可以不夸张的讲，没有链接，就没有万维网。

在网页中，通过链接来指向一个目标，这个目标可以是网页、网页中的具体位置、图像、邮件地址、文件、FTP地址等，甚至是一个应用程序。

链接可以是一个字、一个词、一组词、一幅图像，点击这些内容会跳转到新的文档或当前文档的某个具体位置。一般情况下，当鼠标移动到网页中的某个链接上时，鼠标的光标会由箭头变为一只小手。

在HTML中，可以使用两个元素来创建链接：a元素、map元素。

a元素

使用 a元素定义链接时，必须为它指定 href 属性。否则，它仅代表一个链接的占位符，点击链接不会发生跳转。a元素创建链接的基本格式为：

<a href = "url">Link text</a>

其中，"Link text" 称作链接文本，即访问者在浏览器中看到或在屏幕阅读器值听到的部分，它可以是文本，也可以是图像或其他HTML 元素；href 属性用来规定链接目标URL。如：

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

在上述的 a元素中，“百度网”就是链接文本，http://www.baidu.com 就是链接的目标URL。当用户点击 “百度网”时，页面就会跳转到 http://www.baidu.com 这个地址。

URL：

URL是Uniform Resource Locator的缩写，中文含义是统一资源定位符，是用于完整的描述资源地址的一种标识方法，这种地址可以是本地磁盘，也可以是LAN中的某台计算机，更多的是Internet上的地址。

Internet上的每一个网页都具有唯一的URL，简单地说，URL地址就是Web地址，俗称网址。URL的基本格式为（带方括号 [] 的为可选项）：

scheme: //hostname[:port] / path / [;parameters] [?query] #fragment

scheme（模式/协议）：它告诉浏览器如何处理将要打开的文件，最常用的模式超文本传输协议（Hypertext Transfer Protocol，缩写为HTTP），这个协议可以用来访问网络，也是目前www中应用最广的协议。

hostname（主机名）：是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址。有时，在主机名前也可以包含连接到服务器所需的用户名和密码（格式：username: password@hostname）。

port（端口号）：整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80。如果输入时省略，则使用默认端口号。有时候出于安全或其他考虑，可以在服务器上对端口进行重定义，即采用非标准端口号，此时，URL中就不能省略端口号这一项。

path（路径）：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

parameters（参数）：这是用于指定特殊参数的可选项。

query（查询）：可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。

fragment（信息片断）：字符串，用于指定网络资源中的片断。如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。

URL可以是绝对URL，也可以是相对URL。绝对URL包含了指向目录或文件的完整信息，包括模式、主机名和路径。这意味着绝对URL本身与被引用文件的实际位置无关，无论在哪个主机上的网页，一个文件的绝对URL都完全相同。相对URL则以包含URL本身的文件的位置为参考点，描述目标文件的位置。

根据使用的协议不同，最常用的URL有以下几种类型：

1）http：通过HTTP协议访问该资源

如果目标网页非本站资源，就需要把 href 属性值设置为目标链接的绝对URL，如<a href="http://www.baidu.com/">百度网</a>。

如果目标网页是站内资源，可以使用相对URL，如<a href="index.htm">百度网</a>。

如果要跳转到目标网页的某个具体锚点，就需要在href属性中添加锚点名称，以便定位到锚点。在URL中，通过"#"指定锚点，如<a href="http:// waibo.wang/index.htm#contact ">百度网</a>，表示链接到http:// waibo.wang/ index.htm页面上的锚点contact。

要定位到锚点，需要先在页面上定义锚点（anchor）。定义锚点有两种方法：一种是通过超级链接的name属性定义，这种方式只能用于超级链接，格式为：name="锚点名称"，如<a name="contact ">联系方式</a>，就在index.htm页面上创建了名称为“contact”的锚点；另一种方法是通过HTML元素的id属性定义，这种方式可以用于任何HTML元素，包括超级链接，如把div作为锚点，<div id="contact ">联系方式</a>。锚点就相当于页面的书签，书签不会以任何特殊方式显示，对读者是不可见的。

"链接文本" 可以是文本，也可以是图像。我们可以用一副图像作为"链接文本"，如<a href="http://www.baidu.com/"><img src="logo.gif" /></a>，这样，图像logo.gif就变成"链接文本"。当然，"链接文本"也可以是其他HTML元素。

如果href属性指向非网页文件，如<a href="http://www.baidu.com/小苹果.mp3" download="筷子兄弟_小苹果.mp3">小苹果</a>，用户点击链接后会下载该文件。不过，各浏览器的支持不尽相同，对于音频、视频文件，Firefox会直接播放，其他浏览器会直接下载。download属性用来指定下载后另存为的文件名，浏览器会自动检测并添加正确的扩展名。目前还没有浏览器支持download属性。

2）ftp：通过FTP协议访问资源

如，<a href="ftp://123.18.153.208/">FTP</a>，用来访问FTP服务器123.18.153.208。点击链接后，会弹出登录框，用户登录后，可访问FTP服务器。

3）mailto：通过STMP协议访问资源

如，<a href="mailto:maifang51@163.com">E-MAIL</a>，用来给maifang51@163.com发送邮件。点击链接后，会打开操作系统默认的发送邮件的软件，供用户发送email。

4）javascript：调用Javascript函数

这里的javascript实际上是伪协议，表示URL的内容通过javascript执行。

如，<a href = "javascript: alert(' 百度网欢迎您！');">点击我</a>，用户点击链接后，会调用Javascript的alert函数，弹出一个“百度网欢迎您！”的警告框。

有时候，把点击链接后的操作，交给链接的onclick事件来处理。此时，为了防止点击链接后发生跳转，需要写成href="javascript: void(0);"。如：

由于点击链接后的执行顺序是，先执行 onclick 事件处理函数，再按 href 属性指定的值，执行跳转。因此，点击上述链接，仅仅会执行Javascript的click()函数，而不发生跳转。

说明：

a元素的target 属性，用来规定在什么窗口打开被链接的资源，取值_blank | _self | _parent|_top。其中，_blank在新窗口；_self在当前窗口；_parent 在上一级窗口；_top 在最顶级的窗口。_parent和_top主要在包含iframe的页面中使用。target 属性是可选的，默认值为_self，在当前窗口打开目标资源。如：

a元素的 rel 属性，用来描述本页面与链接指向的目标页面之间的关系，它是提升HTML语义化另一种方式，搜索引擎也会利用这些信息。因此，对于指向另一个网站的链接，推荐定义该属性。如：

此外，还可以为带有 rel="external" 链接添加不同的样式，告诉访问者这是一个指向外部网站的链接，让用户清楚地了解到点击链接后会发生的情况，可以避免不必要的回溯，提高用户体验。

a元素的title属性，用来为链接提供提示内容，当鼠标悬停在链接上时，提示内容才会出现，这样既给用户以提示，又不会影响页面排版的整洁性。同时，title属性也是SEO的重要内容。