超链接

什么是超链接？

  • 页面是文档的容器，使用url作为标识
  • 网站是多个页面的集合，使用域名作为标识
  • 万维网是多个网站的集合
  • 超链接用于标记页面或网站之间的链接关系

超链接 <a>标记是WEB世界中最重要的标记，没有链接标记，网页就不能称之为超文本，就不能成长为万维网

超链接示例

Export
HTML
Result

  • href: 链接指向的地址
  • title: 鼠标或键盘焦点指向链接时的提示信息
  • target: 链接在窗口中的行为方式，默认为在本窗口打开，本例为在新窗口打开

站内链接与站外链接

  • 站外链接: <a href="http://x.com/bbs/news.html" >link</a>
    必须采用全限定域名与文件路径的url格式
  • 站内链接: <a href="news.html" >link</a> 可以仅采用相对文件路径或绝对文件路径的格式，但最终生成的url需要取决于当前站点的域名或链接所在页面的地址

如果链接目标都属于当前站点，我们推荐站内链接形式，因为如果采用站外链接格式，搜索引擎等爬虫可能误以为是站外链接，从而影响搜索效果。

相对文件路径与绝对文件路径

  • 绝对路径: <a href="/news.html" >link</a>
    如当前域名为http://x.com,则浏览器生成的最终地址为http://x.com/news.html
  • 相对路径： <a href="news.html" >link</a>
    如该标记当前所在页面为http://x.com/bbs/index.html,则浏览器生成的最终地址为http://x.com/bbs/news.html

浏览器或搜索引擎等都能很聪明的将文件路径转换为完整的url，但是，要记住并不是所有的Web客户端都一定具有这种智能

文件路径的种种变形

以下几种方式表示同一个路径(当前页面为http://x.com/bbs/index.html)

  1. <a href="/bbs/news.html" >link</a>
  2. <a href="news.html" >link</a>
  3. <a href="./news.html" >link</a>
  4. <a href="../bbs/news.html" >link</a>

其中:

  • / 代表根目录，即http://x.com站点的起点
  • . 代表目前所在的目录
  • .. 表示上一层目录

如果熟悉Linux系统命令行的同学，对上述路径格式一定不会陌生

元标记 <base> 全局性改变链接的行为

如果你想改变当前文档中多个<a>标记的相对基地址及行为，则使用<base> 标记，譬如以下示例，两个链接最终生成相同的地址

<!-- 当前页面为 http://x.com/bbs/index.html -->
<head>
  <base href="http://x.com/forum/cba" target="_blank">
</head>

<!-- 实际链接地址为 http://x.com/forum/cba/news.html -->
<a href="news-1.html" >link</a>
<a href="news-2.html" >link</a>

锚：页内链接

以上都是页面之间的链接为，如果希望想在文档内部进行跳转，可以使用#锚定位符。以下表示跳转到文档的底部或头部：

<a href="#top" >link</a>
<a href="../index.html#bottom" >link</a>
....
<div id="top" >
   ....
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="buttom"></a>

链接的状态

当我们浏览互联网时，经常会发现，当我们重复访问一些网页时(譬如：https://www.sina.com.cn/ )， 有一些链接是蓝色的，有一些又是灰色的。换言之，这些链接基于用户访问行为的不同，呈现出不同的状态，譬如：

  • 一个从未被当前用户访问过的链接，显示为蓝色字体并带有下划线
  • 曾经被当前用户访问过的链接，显示为紫色且不带下划线
  • 当用户鼠标悬浮或划过链接时，显示为黑色
  • 当链接被用户点击时，链接显示为红色并带有下划线

浏览器的默认显示设置是可以被改变的，请参看后面的css 伪类相关章节

深入阅读

results matching ""

    No results matching ""