《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第八章.pptVIP

图8-21区块式的链接返回图8-22导航菜单返回图8-23儿童用品网上商店返回图8-24网页的基本结构返回第8章超链接与导航8.1超链接概述8.2内部链接8.3外部链接8.4书签链接8.5其他链接8.6使用CSS设置链接样式8.7图像与链接8.8使用列表制作导航栏8.9综合实例返回8.1超链接概述8.1.1绝对路径与相对路径网页中的超链接按照链接路径的不同，可以分为绝对路径和相对路径。1.绝对路径绝对路径是完全路径，是指主页上的文件或目录在硬盘上的真正路径。使用绝对路径，不管目标文件在什么位置，都可以非常精确地找到，但如果该文件被移动了，就需要重新设置所有的相关链接。2.相对路径相对路径是指以当前文件为起点，即相对当前文件与所链接的目标文件之间的简化路径，它利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处位置的影响，在书写形式上省略了两个文件绝对地址中的相同部分。这种链接方式非常适合网站的内部链接，只要处下一页返回8.1超链接概述于站点文件夹之内，都可以自由地在文件之间建立链接。注意:使用绝对路径还是相对路径，有一个通用规则:链接存储在同一路径下或相近位置的文档时使用相对路径，而链接到其他地方(其他计算机、其他硬盘或其他网站)的文档时，应使用绝对路径。8.1.2超链接标记及其属性建立超链接所使用的标记为a/a。a标记是一个行内元素，可以成对出现在文档的任何位置。其基本语法为ahref=”链接地址”链接内容/a用a作为链接标记，是源于英文中的anchor。href属性的意思是超文本引用，这个属性的值指定了链接的目标。a标记的属性值见表8-1。上一页下一页返回8.1超链接概述其中target属性用来指定链接的目标窗口，在默认情况下超链接会在原来的浏览器窗口中打开，也可以通过target属性修改，这个属性只能在href存在时使用。target属性的取值见表8-2。上一页返回8.2内部链接内部链接是指在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，应使链接具有清晰的导航结构，让浏览页面的用户可以方便地找到自己需要的HTML文件。我们来看一个实例。首先创建一个站点文件夹MySite，以index.html作为起始页面，在此文件夹中包含一个webs文件夹，其中有若干个HTML文件，通过index.html与webs中的HTML文件进行链接来说明网站的内部链接。在该文件中通过列表建立了网页间的链接，在链接时需要在链接地址中加入目录和文件名称，其运行效果如图8-2所示。返回8.3外部链接外部链接是指跳转到当前网站外部，与其他网站中的页面或其他元素之间的链接关系。这种链接在一般情况下需要使用绝对的链接路径。常用的包括HTTP协议链接、FTP链接、E-mail链接、Telnet链接、下载文件链接。1.使用HTTP协议外部链接经常使用HTTP协议实现链接，其基本语法为:ahref=http;//网站地址”链接文字/a在该语法中，http;//表明这是关于HTTP协议的外部链接，在其后输入网站的网址即可。2.FTP链接HTTP是超文本传输协议，在网络上还有一种应用广泛的FTP协议。下一页返回8.3外部链接FTP是文件传输协议，是实现计算机之间相互通信的协议。假设两台计算机通过FTP协议对话，并且都能访问工nternet，那么它们就可以用FTP命令来传输文件。FTP链接的基本语法如下:ahref=”ftp://网站地址”链接文字/a在该语法中，ftp：//表示这是关于FTP协议的外部链接，后面输入的是链接网站的网址。3.创建E-mail链接在网页上创建E-mail链接，可以让网页浏览者快速地与设计者进行联系。当浏览者单击E-mail链接时，能自动打开当前计算机系统中默认的电子邮件客户端软件，如OutlookExpressFoxmail等。使用方法如下:上一页下一页返回8.3外部链接ahref=”mailto:电子邮件地址”链接文字/amailto其实就是mailto的连写，意思是“发送邮件到”。在这行代码中，还可以给新邮件填好邮件的主题和正文，这通过subject和body属性来实现，使用时需要将其放在两个问号之间。mailto标签的参数见表8-3。4.Telnet链接远程登录Telnet是指一台计算机远程连接到另一台计算机，并在远程计算机上运行自己系统的程序，从而达到共享计算机软件和硬件资源的目的。其基本语法为