0

    HTML网页超链接标记_HTML/Xhtml_网页制作

    2023.05.26 | admin | 148次围观

    HTML网页链接标记学习教程

    链接标记的属性

    链接是网页页面中最重要的元素之一,是一个网站的灵魂。一个网站是由多个页面组成的,页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址,在英文中被称作url(Uniform Resource Locator:通用资源标示符)。在地址栏输入然后回车,会打开脚本之家网站的主页面。可以看到,页面中有多个栏目,多条新闻等,最上方不同的栏目就是文字链接。

    链接标记虽然在网站设计制作中占有不可替代的地位,但是其标记只有一个,那就是标记。本站介绍的链接应用都是基于标记基础上的。

    链接标记的属性见下表

    属性 描述 href 指定链接地址 name 给链接命名 title 给链接提示文字 target 指定链接的目标窗口 accesskey 链接热键

    关于路径

    每一个文件都有自己的存放位置和路径,理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。url—统一资源定位器,指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址之下,但是当创建网页时,不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此链接可以分为以下3种: 绝对路径

    如 相对路径

    如news/default.htm 根路径

    如/website/news/default.htm

    在了解这三种地址形式前先要理解另外两个概念:内部链接和外部链接

    内部和外部都是相对于站点文件夹而言,如果链接指向的是站点文件夹之内的文件,就是内部链接。如果链接指向站点文件夹之外的,就被称做外部链接。在添加外部链接的时候,将用到下面所讲的绝对地址;而添加内部链接的时候,将用到下面所讲的根目录相对地址和文件相对地址。

    下面分别介绍这3种链接:

    绝对路径

    绝对路径为文件提供完全的路径,包括适应的协议,如http,Ftp,rtsp等。一般常见的有:

    ftp://202.136.254.1

    当链接到其它网站中的文件时,必须使用绝对链接。 相对路径

    相对链接最适合网站的内部链接。只要是同一网站之下的,即使不在同一个目录下,相对链接也非常合适。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内,相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系,不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是:站点文件夹所在的服务器地址发生改变时,文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。

    相对链接的使用方法为: 如果链接到同一目录下,则只需输入要链接文档的名称。 要链接到下一级目录中的文件,只需先输入目录名,然后加" / "再输入文件名。 如链接到上一级目录中的文件,则先输入"…/ ",再输入目录名、文件名。 根路径

    根目录相对地址同样适应于创建内部链接,但大多数情况下,不建议使用此种地址形式。它在下列情况下使用: 当站点的规模非常大,防置于几个服务器上时 当一个服务器上同时放置几个站点时

    根目录相对地址的书写形式也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。根路径以" / "开始,然后是根目录下的目录名。

    #p#

    制作内部链接

    所谓内部链接,指的是在同一个网站内部,不同的html页面之间的链接关系。在建立网站内部链接的时候,要考虑到使链接具有清晰的导航结构,使用户方便地找到所需内容的html文件。

    下面我们建立3个网页页面一个网站的起始网页一般被称为主页,在第一个8-1.htm网页页面中,制作到8-1-1.htm和8-1-2.htm两个页面的链接,并在两个被链接的页面中制作返回到8-1.htm页面的链接。3个页面的目录关系如下所示:

    8-1.htm和8-1-1.htm存放在网站的根目录下,8-1-2.htm存放在test目录下。基本语法 链接文字语法解释

    通过href属性指定地址,File_name为要链接文件的路径,"链接文字"为鼠标单击的文字内容。 文件范例:8-1.htm

    通过标记建立两个链接,分别链接到另外两个html页面中。

    01

    02

    03

    04

    05

    06

    09

    10 主流的网页设计软件

    11

    目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。

    12 网页制作软件Dreamweaver mx 2004

    13

    14 网页动画软件Flash mx 2004

    15

    16 文件说明

    第12行定义了到8-1-1.htm同级页面的链接,第14行定义了到test目录下的8-1-2.htm页面的链接。 文件范例:8-1-1.htm

    这个文件是"网页制作软件Dreamweaver mx 2004"页面,通过标记建立返回到 8-1.htm页面的链接。

    01

    02

    03

    04

    05

    06

    09

    10 Dreamweaver mx 2004

    11 Dreamweaver mx 2004作为网页设计软件的代表,具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想,那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制、完整的站点规划和管理、超乎寻常的动态效果设计,这些都为设计人员提供了得心应手的途径。mx版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合,无疑为制作网站提供了更多的实现方式。

    12

    13 返回

    14

    15 文件说明

    第13行定义了到8-1.htm同级页面的链接。 文件范例:8-1-2.htm

    这个文件是"网页动画软件Flash mx 2004"页面,通过标记建立返回到8-1.htm页面的链接。

    01

    02

    03

    04

    05

    06

    09

    10 Flash mx 2004

    11 Flash mx 2004作为网页矢量交互动画软件的代表,提供了图形绘制、动画制作和交互三大功能。掌握了这个软件的核心,也就有能力在网上冲浪的同时,充当一把闪客的角色。越来越多的个人、商业网站采用Flash技术,广告banner、动画片头、mtv、交互游戏,广阔的应用为Flash的学习者提供了广泛的发展平台一个网站的起始网页一般被称为主页,学习Flash mx 2004软件更是一个具有诱惑力的过程。

    12

    13 返回

    14

    15 文件说明

    第13行定义了到8-1.htm上一级页面的链接。

    #p#

    设定链接的目标窗口

    单击链接后,默认的浏览器窗口是原有窗口,我们可以指定这个链接打开的目标窗口,如新开窗口等。基本语法 链接文字语法解释

    通过target定义目标窗口,value的取值如下表所示 属性值 描述 _parent 在上一级窗口中打开。一般使用分帧的框架会经常使用 _blank 在新窗口中打开 _self 在同一个帧或窗口中打开,这项一般不用设置 _top 在浏览器的整个窗口中打开,忽略任何框架 文件范例:8-2.htm

    通过target属性设定链接的目标窗口。

    01

    02

    03

    04

    05

    06

    09

    10 主流的网页设计软件

    11 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromweaver公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。

    12 网页制作软件Dreamweaver mx 2004

    13

    14 网页动画软件Flash mx 2004

    15

    16 文件说明

    第12行定义了在原窗口显示链接页面,第14行定义了在新开窗口显示链接页面。

    #p#

    建立书签链接

    在浏览页面的时候,如果页面的内容较多、页面过长,浏览的时候需要不断拖动滚动条,很不方便,如果要寻找特定的内容,就更加不方便。这时如果能在该网页或另外一个页面上建立目录,浏览者单击目录上的项目就能自动跳到网页相应的位置进行阅读,应该是件很方便的事,并且还可以在页面中设定诸如"返回首页"的链接。这就称为书签链接。

    建立书签链接分为两步:一是建立书签,二是为书签建立链接。

    下面来制作一个包含网页设计三剑客内容的软件介绍页面,并为其中的每一个软件建立一个书签,这个书签就是随后将要跳转转的位置。也就是说,这个书签就确定了一个页面内部的链接导引依据。基本语法 文字文件范例:8-3.htm

    为页面中三段标题文字建立书签链接。

    01

    02

    03

    04

    05

    06

    09

    10 主流的网页设计软件

    11 Dreamweaver mx 2004

    12 Dreamweaver mx 2004作为网页设计软件的代表,具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想,那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制、完整的站点规划和管理、超乎寻常的动态效果设计,这些都为设计人员提供了得心应手的途径。mx版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合,无疑为制作网站提供了更多的实现方式。

    13

    14 Flash mx 2004

    15 Flash mx 2004作为网页矢量交互动画软件的代表,提供了图形绘制、动画制作和交互三大功能。掌握了这个软件的核心,也就有能力在网上冲浪的同时,充当一把闪客的角色。越来越多的个人、商业网站采用Flash技术,广告banner、动画片头、mtv、交互游戏,广阔的应用为Flash的学习者提供了广泛的发展平台,学习Flash mx 2004软件更是一个具有诱惑力的过程。

    16

    17 Fireworks mx 2004

    18 Fireworks mx 2004作为网页图像设计软件的代表,在继承了前期版本图形绘制、页面特效功能的同时,大大地发展了位图图像方面的处理功能,这无疑使这个软件有了更大的向Photoshop挑战的资本,而其在网页设计方面的诸多应用,又是无任何软件可与之媲美。与Dreamweaver mx 2004的整合使其在专业网站图像设计过程中,早已并继续扮演着不可或缺的角色。

    19

    20

    21 文件说明

    第11、14、17行分别定义了3各段落标题文字的书签名称dw、fl、fw。

    #p#

    链接同一页面中的书签

    下面我们就为制作的8-3.htm制作好链接,我们希望在页面的起始位置制作3个链接,分别链接到每一个软件介绍的位置上。基本语法 文字链接语法解释

    bookmark_name就是刚刚定义的书签名称。 文件范例:8-4.htm

    制作3个链接,分别到页面中三段标题文字书签的位置。

    01

    02

    03

    04

    05

    06

    09

    10 主流的网页设计软件

    11

    12 Flash mx 2004

    13

    14 Dreamweaver mx 2004

    15 Dreamweaver mx 2004作为网页设计软件的代表,具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想,那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制、完整的站点规划和管理、超乎寻常的动态效果设计,这些都为设计人员提供了得心应手的途径。mx 2004版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合,无疑为制作网站提供了更多的实现方式。

    16

    17 Flash mx 2004

    18 Flash mx 2004作为网页矢量交互动画软件的代表,提供了图形绘制、动画制作和交互三大功能。掌握了这个软件的核心,也就有能力在网上冲浪的同时,充当一把闪客的角色。越来越多的个人、商业网站采用Flash技术,广告banner、动画片头、mtv、交互游戏,广阔的应用为Flash的学习者提供了广泛的发展平台,学习Flash mx 2004软件更是一个具有诱惑力的过程。

    19

    20 Fireworks mx 2004

    21 Fireworks mx 2004作为网页图像设计软件的代表,在继承了前期版本图形绘制、页面特效功能的同时,大大地发展了位图图像方面的处理功能,这无疑使这个软件有了更大的向Photoshop挑战的资本,而其在网页设计方面的诸多应用,又是无任何软件可与之媲美。与Dreamweaver mx 2004的整合使其在专业网站图像设计过程中,早已并继续扮演着不可或缺的角色。

    22

    23

    24 文件说明

    第11、12、13行分别定义了到3个段落标题文字的书签链接。

    #p#

    链接到其它页面中的书签

    在页面之间,也可以完成跳转到另一页面某一位置的过程。这需要指定好链接的页面和链接的书签位置。基本语法 语法解释

    File_name是要跳转到的页面路径,bookmark_name是定义的书签名称。 文件范例:8-5.htm

    制作一个新页面,其中包含3个链接,分别链接到8-4.htm页面中三段标题文字书签的位置。

    01

    02

    03

    04

    05

    06

    09

    10 主流的网页设计软件

    11 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。

    12

    13

    14

    15

    16 文件说明

    第12、13、14行分别定义了到8-4.htm页面中3个段落标题文字的书签链接。

    #p#

    外部链接

    所谓外部链接,指的是跳转到当前网站外部,与其它网站中页面或其它元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。

    制作外部链接的时候,使用url统一资源定位符来定位万维网信息,这种方式可以简洁、明了、准确地描述信息所在的地点。最常见的url格式是"http://",其它的格式如表所示。 url的格式

    服务 url格式 描述 www 进入万维网站点 Ftp ftp:// 进入文件传输服务器 News news:// 启动新闻讨论组 Telnet telnet:// 启动Telnet方式 Gopher gopher:// 访问一个Gopher服务器 Email mailto:// 启动邮件

    链接到外部网站

    页面中的常用友情链接,经常是单击后可以访问别人的网站,达到互相交流信息的目的。下面就是制作链接到外部网站的方法。基本语法 文字链接 语法解释

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论