超链接

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描述文档的地址



              






阅读更多
个人分类: html
想对作者说点什么? 我来说一句

超链接 C# 替换超链接

2010年10月22日 1KB 下载

CRichEditCtrl字体超链接

2011年05月16日 101KB 下载

下拉列表自动跳转超链接网页

2011年04月27日 610B 下载

JS设置网页超链接的title!!

2008年11月22日 3KB 下载

VC 图形超链接类.zip

2009年05月16日 18KB 下载

VC界面静态文本超链接设置

2009年10月05日 2KB 下载

没有更多推荐了,返回首页

不良信息举报

超链接

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭