超链接

原创 2012年03月24日 17:45:21

1:在一个文档中可以创建以下几种类型的链接:

    *链接到其他文档或者文件(图像、影片、PDF或者声音文件)

    *命名锚点链接,此类链接跳转至文档内的特定位置    <a href="#section1">第二段</a>

    *电子邮件链接,此类链接新建一个收件人地址已经填好的空白电子邮件

    *空链接和脚本链接,此类链接使用户能够在对象上附加行为,或者创建执行javascript代码的链接

  

2:通过target定义链接的目标窗口

     

属性值

功能描述

_blank

将链接的文档载入一个新的、未命名的浏览器窗口

_parent

将链接的文档载入包含该链接的框架的父框架集或者窗口。如果包含链接的框架没有嵌套,则相当于_top;链接的文档载入整个浏览器窗口

_self

将链接的文档载入链接所在的同一框架或者窗口,此目标是默认的,所以通常不指定它

_top

将链接的文档载入整个浏览器窗口,从而删除所有框架


 用a元素定义的连接不可以被嵌套,虽然浏览器仍然会呈现,也就是说,a元素
 不能包含其他a元素,link元素也同样不能嵌套


3:title属性定义提示信息

<a href="http://www.w3.org/" title="这将前往W3C官方站点">链结到W3C</a>


4:链接到电子邮件地址

<a href="mailto:zhang-yafei@hotmail.com">给我发邮件</a>


5:链接到任何类型的文件以供下载

<a href="../docs/myWord.doc" type="application/msword">链结到Word档</a>

当点击这个超链接时,浏览器就会下载myWord.doc文件,下载完毕后就会启动word打开。


6:链接介质(media属性)

   使用media属性可以向浏览器提示链接所指向的文档适用的介质,例如,指示浏览器文档可以适用于显示器、打印、语音合成器

      <a media="print"

            title="打印版本"

            type="application/postscript"

            rel="alternate"

            href="../index.ps"

      >下载可打印版本</a>


 

介质描述符

功能描述

screen

预定用于非分页的计算机屏幕

tty

预定用于显示固定宽度字符、终端仿真设备以及仅具有有限显示能力的便携设备

tv

预定用于电视类型的设备(低分辨率、彩色的、有限的滚动能力)

projection

预定用于投影机

handled

预定用于手持设备

print

预定用于分页的,不透明的材料,用于屏幕上的文档打印预览模式

braille

预定用于布莱耶盲文设备,这种设备使用触点作为反馈

embossed

预定用于分页的布莱耶盲文设备

speech

预定用于语言合音器,通常是为了视力有残疾的用户准备的

all

适用于所有设备


7:定义锚点

   

<!DOCTYPE HTML>
<html>

<head>
<meta charset="gb2312">
<title>Sample</title>
</head>

<body>
<h2 id="section1">1.1.1什麽是WWW(万维网)</h2>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
……  一些其他的内容,假定很长  ……<br/>
<br>
<a href="#section1">检视第一部分内容</a>





</body>

</html>

链接到命名锚点:

  绝对URI:  <a href="http://www.capinfotech.com/ju/index.html#anchor-one">绝对URI</a>

 相对URI: <a href="../http://www.capinfotech.com/ju/index.html#anchor-one">相对URI</a>

 链接到同一个文档: <a href="#ahchor-one">链接到同一个文档</a>


8:link的rel属性用来定义链接关系

     在HTML头部可以使用多个link元素,属性rel指定要链接的文档与当前文档的关系,属性值index, next, pref阐明了链接的意义

    <head> 

        <title>第二季</title>

            <link rel="index"  href="../index.html">

           <link rel="next"  href="chapters3.html">

           <link rel="prev"  href="chapters1.html">

    </head>


属性值
  • alternate -- 定义交替出现的链接
  • appendix -- 定义文档的附加信息
  • bookmark -- 书签
  • canonical -- 规范网页是一组内容高度相似的网页的首选版本
  • chapter -- 当前文档的章节
  • contents
  • copyright -- 当前文档的版权
  • glossary -- 词汇
  • help -- 链接帮助信息
  • index -- 当前文档的索引
  • next -- 记录文档的下一页.(浏览器可以提前加载此页)
  • nofollow -- 不被用于计算PageRank
  • prev -- 记录文档的上一页.(定义浏览器的后退键)
  • section -- 作为文档的一部分
  • start -- 通知搜索引擎,文档的开始
  • stylesheet -- 定义一个外部加载的样式表
  • subsection -- 作为文档的一小部分 

9:使用link元素说明文档集合关系

     一系列文档组成的集合可以包含起始页、目录页、索引表、术语表、正文章节以及小节、附录等,并且文档之间还有一定的层级关系

     使用link元素可以说明这些文档之间的关系:

        *index

            index说明当前文档处于一个文档集合中,链接指向的文档位于文档层级最顶层,是为当前文档提供索引的一个文档,也可以和up关键字联合使用

        *first

           如果当前文档是一系列文档中的一个,该值就表明链接指向的文档是文档的第一个文档,处于向前兼容的考虑,关键字begin和start也可以实现相同的目标。

        *last

             如果当前文档是一系列文档中的一个,该值就表明链接指向的文档是文档的最后一个文档,处于向前兼容的考虑,关键字end也可以实现相同的目标。

         *next

              如果当前文档是一系列文档中的一个,该值就表明链接指向的文档是当前文档的下一个文档,浏览器可以使用该值来决定预加载下一个文档,从而可以节约下载的时间

          *prev

                如果当前文档是一系列文档中的一个,该值就表明链接指向的文档是当前文档的前一个文档。一些浏览器也可以使用关键字previous实现该功能。

           *up

               up表明当前文档处于一个文档集合中,链接指向的文档是当前文档最近的一个上层。

              可以在rel属性值中重复使用up关键字向更顶部的层次导航,up关键字之间使用空格隔开,每个up关键字都是远离当前文档向上一个层级,如果仅是一个up关键字,

           就表示当前文档的最近的一个上层

            如果和index关键字配合使用,up关键字的数量就表示当前页相对于最顶层的深度。

      

<!DOCTYPE HTML>
<html>

<head>
<meta charset="gb2312">
<title>Sample</title>
</head>

<body>
<nav>
  <p>
    <a href="/" rel="index up up up">主页</a> >
    <a href="/products/" rel="up up">产品页</a> >
    <a href="/products/washers/" rel="up">洗衣机</a> >
    <a>二手产品</a>
  </p>
  <p>
    <a href="/" rel="index up up">主页</a> >
    <a href="/second-hand/" rel="up">二手产品</a> >
    <a>洗衣机</a>
  </p>
</nav>


</body>

</html>



10:链接打替代版本

       当rel属性的属性值为alternate时,表明该链接指向的文档是当前文档的一个替代版本

       当和herflang属性配合使用时,表示的是当前文档的另一个语言版本,当和media属性配合使用时,表示的是当前文档的为另一个不同介质设计的版本

        下面的代码表示当前文档是简体中文版,链接指向的是繁体中文版

            <head>

                   <title></title>

                   <link hreflang="zh-tw"

                             title="繁体中文文档"

                             rel="alternate"

                             href="../index_big5.html"

           </head>      


下面的代码表示当前文档是简体中文版,链接指向的是该文档的打印版本,还定义了文档的类型

            <head>

                   <title></title>

                   <link media="print"

                             title="打印版本"

                             rel="alternate"

                             href="../index_big5.html"

           </head>      


11:链接到版权声明

        当rel属性的值为license时,表明该链接指向的文档是当前文档的版本声明,在HTML4时,使用copyright作为属性值来表示版权声明,现在使用license取代之。

        <head>

             <title>当前文档</title>

             <link rel="license" href="../copyright.html">

        </head>


12:链接到帮助

         当rel属性的值为help时,表明该链接指向的文档是当前文档的帮助文档。

   <head>

             <title>当前文档</title>

             <link rel="help" href="../help/more.html">

        </head>


13:声明可作为搜索的资源

         search关键字指定一个链接资源,使用该资源可以搜索当前文档的内容以及与当前文档相关联的网页

         例如,OpenSearch描述文档定义了如何实现autodiscover搜索功能,可以使用下面代码声明:

           <link  rel="search"

                      type="application/opensearchdescription+xml"

                      href="http://example.com/content-search.xml"

                      title="Content search" >

         

         <link  rel="search"

                      type="application/opensearchdescription+xml"

                      href="http://example.com/comment-search.xml"

                      title="Comments search" >


type属性值必须是application/opensearchdescription+xml,href属性值必须指向一个OpenSearch描述文档的地址



              






Unity Text 插入超链接

Unity 新 UI 系统中的 Text 组件支持富文本标签,标签包括 b(黑体)、i(斜体)、size(大小)、color(颜色),并不支持超链接以及超链接点击。之前一篇实现了简单的插入图片方法,见...
  • akof1314
  • akof1314
  • 2015年10月12日 18:52
  • 10948

Javaweb超链接标签

超链接标签    a标签常用的属性:   href  : 用于指定链接的资源     target: 设置打开新资源的目标。    _Blank 在独立的窗口上打开新资源   _self 在当...
  • qq_15124475
  • qq_15124475
  • 2016年11月23日 09:57
  • 1367

Qt开发之QTextEdit中插入超链接功能。

因为工程中需要用到QTextEdit来显示超链接,并点击后需要打开,在网上查了好多也没有一个好的解决办法。 自己想办法解决后将思路分享给大家,我这一次也不做伸手党了。 上代码: TextEdit ...
  • shizheng163
  • shizheng163
  • 2016年11月23日 22:00
  • 1382

Swing之带超链接的label简单实现。

可能很多人不知道,Swing其实可以添加html代码的,利用这个特性,我们可以用Label做很多奇特效果,例如可以做一个带超链接的label import java.awt.Color; i...
  • tanjiayqq
  • tanjiayqq
  • 2013年12月01日 23:33
  • 985

怎样去掉超链接的下划线?

找到和这两句了吗?样式表语句就加在它们中间。如下: a{TEXT-DECORATION:none} 仅仅加入a{TEXT-DECORATION:none}这一句就去掉超链接下划线了,这...
  • lzy_lizhiyang
  • lzy_lizhiyang
  • 2014年08月24日 12:49
  • 1074

SharePoint 2010 中创建超链接到Pop-Up对话框

SharePoint 2010 推出了新式的带有阴影的弹出对话框,你感觉怎么样?我感觉倒是挺酷的。这样少打开了一个页面,省事多了,而且不会让用户迷惑,在不同页面中穿梭。问题是在你的页面中,如何创建自定...
  • u012025054
  • u012025054
  • 2014年07月10日 10:58
  • 1166

HTML 超级链接详细讲解

超级链接 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。...
  • liuxuekai
  • liuxuekai
  • 2016年07月22日 22:29
  • 678

给超链接加onclick事件

在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页。在这种情况下,通常有以下三种处理方式: 不设置标签的href属性,只设置onclick属性。在这种处理方式下,通常超链接...
  • lzm18064126848
  • lzm18064126848
  • 2016年10月30日 14:46
  • 1537

Unity Text加入超链接

Unity 新 UI 系统中的 Text 组件支持富文本标签,标签包括 b(黑体)、i(斜体)、size(大小)、color(颜色),并不支持超链接以及超链接点击。之前一篇实现了简单的插入图片方法,见...
  • baidu_28955655
  • baidu_28955655
  • 2015年12月20日 18:07
  • 623

CSS设置按钮式超链接

CSS设置按钮式超链接           网页上有很多超链接都是按钮的形式,这些都使用了各种图片,这里通过CSS普通的属性实现按钮的效果。           首先,建立最简单的HTML页面,代...
  • nangeali
  • nangeali
  • 2016年11月20日 19:34
  • 682
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:超链接
举报原因:
原因补充:

(最多只允许输入30个字)