HTML宝典(第 1 版)
2.4.1 a元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

链接元素

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

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

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

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

a元素

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

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

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

<a href = "http://www.waibo.wang">歪脖网</a>

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

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.waibo.wang/">歪脖网</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.waibo.wang/"><img src="logo.gif" /></a>,这样,图像logo.gif就变成"链接文本"。当然,"链接文本"也可以是其他HTML元素。

如果href属性指向非网页文件,如<a href="http://www.waibo.wang/小苹果.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);"。如:

<a href = "javascript: void(0)" onclick = "click()">点击我</a>

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

说明:

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

<a href="http://www.waibo.wang/" target="_blank">歪脖网</a>

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

<a href="http://www.waibo.wang/" rel="external" target="_blank">百度</a>

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

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验