超链接

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



                  






  • 版权声明:本文为博主原创文章,未经博主允许不得转载。

    相关文章推荐

    SQL多表连接查询(详细实例)

    本文主要列举两张和三张表来讲述多表连接查询。 新建两张表: 表1:student  截图如下: 表2:course  截图如下: (此时这样建表只是为了演示连接SQ...
    • Mr_Tim
    • Mr_Tim
    • 2016-04-12 17:24
    • 5450

    SQL学习之函数

    1:函数     函数可以理解为一种工具,用于完成定义明确的任务,如平方根、大小字母转换等。    有些函数需要输入参数,有些函数不需要输入参数,但是函数必须具有返回值。    函数分为确定性函...

    jQuery之子属性过滤选择器

    1::first-child选择器         用于选择其父级的第一个子元素的所有元素,格式:$("selector:first-child")         如:$("ul:fi...

    mysql 添加列,修改列,删除列

    ALTER TABLE:添加,修改,删除表的列,约束等表的定义。 查看列:desc 表名; 修改表名:alter table t_book rename to bbb;  添加列:alter t...

    SQL 多表联合查询

    很少用join,这次学学,并备忘两篇文章! 转自:http://hcx-2008.javaeye.com/blog/285661 连接查询 通过连接运算符可以实现多个表查询。连接是关系数据库模型的主要...

    SQL使用(二)-----联合查询和单查询的优缺点

    联合查询可以通过多步单查询来完成,那么什么时候用联合查询,什么时候用单查询呢?它们的优缺点各是什么呢?想必大家跟我一样也存在这种疑惑,我经过搜索相关资料,现对联合查询和单查询进行如下总结: 首先从我...

    Html之图片

    1:图片的备用说明(alt属性)       alt属性用于链接图片不存在的情况,或者一些用户为了提高浏览器速度而关闭了图片下载,alt的作用很重要,它的内容会显示在浏览器中。         ...

    多表联合查询(join、union等)

    内部连接 inner join 两表都满足的组合full outer--全连.两表相同的组合在一起,A表有,B表没有的数据(显示为null),同样B表有A表没有的显示为(null)A表 left jo...

    SQL多表连接查询与集合的并、交、差运算查询

    1: use db_sqlserver2 select 姓名, 工资, 面积, 金额, (工资+金额/1000) as 实发工资 from 职工,仓库, 订购单 where 职工.职工号=订...
    内容举报
    返回顶部
    收藏助手
    不良信息举报
    您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
    举报原因:
    原因补充:

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