1. 首页
  2. >
  3. 前端开发
  4. >
  5. HTML5

链接是Web的核心元素

链接是HTML的基础元素,因为Web的设计初衷就是想把一组文档彼此链接起来组成信息分享网络。

HTML的超文本(Hyper Text)部分定义了链接的类型即:超文本链接(hypertext links),也就是超链接(hyperlinks)。


在HTML中,链接是内联元素,使用<a>标签。

href(hypertext reference) 属性用来定义链接的目标地址(当点击时跳转或新打开的网页地址)。

<p>   要搜索网页动画,请访问 <a href="//www.techbrood.com">Techbrood</a>. </p>

要搜索网页动画,请访问 Techbrood.


链接是网页的主要交互方式:通过点击链接,你可以在文档之间来回浏览。

你可以定义3种类型的目标。

  • 锚点(anchor),用来在网页内部跳转。
  • 相对 URL,用来在网站内部跳转。
  • 绝对 URL,通常用来在不同网站页面之间进行跳转。

锚点

锚点(Anchor) 用来跳转到同一页面的不同位置。通过在href属性中添加 # 符号,你可以定位到具有特定 id 属性的HTML元素所在位置。

比如,<a href="#footer"> 可以导航到同一HTML页面中的 <div id="footer"> 元素。

相对URL

在同一网站的不同页面之间的跳转,通常使用相对路径的链接地址。这个相对指的是相对于当前页面

比如,你的网站包含如下目录结构的HTML文件:

  • my-first-website home.html contact.html my-posts p1.html p2.html


home.html 中你可以添加到其他页面的跳转链接,其中contact.html在同级目录下,p1.html和p2.html在子目录my-posts下面,具体代码如下:

<p> <a href="contact.html">联系我们</a>. <a href="my-posts/p1.html">第一篇文章</a>. <a href="my-posts/p2.html">第二篇文章</a>. </p>


联系我们 第一篇文章 第二篇文章


相对URL的概念基于网站服务器上的文件目录结构,每个网站都有一个文档根目录,相对URL就是相对于这个根目录的HTML文件路径。

一个完整的绝对URL包含3个部分:

  • 协议 http://
  • 域名 techbrood.com
  • 文件路径 /hello.html

绝对URL是自满足(self-sufficient)的,包含了页面访问的全部必要信息,可被用于任意的HTML文档中:

<p>   Just say hey <a href="//techbrood.com/hello.html">Say hey :)</a>! </p>

绝对URL和相对URL的选择

如果要定义外部网站的资源,显然只能使用绝对URL,如果是内部网站的资源,建议使用相对URL,一来代码要简洁,二来在域名变迁时,只要目录结构保持不变,代码就不需要做出修改。