第4章超链接和路径.docxVIP

超链接和路径 教学目标： 了解超链接的属性 能够清晰的区分相对与绝对路径的不同点 学会各项链接的设置方法 了解打开窗口的不同表现形式 知识梳理 本课主要学习HTML5中文本元素最重要的一个元素——超链接，熟悉它自身的属性以及路径问题。 链接由两个部分组成：一部分是带下划线显示的一个单词或者是一张图片，我们称它为热点；另一部分是告诉浏览器当用鼠标点击热点时，它该显示何处的内容，称为URL引用。 超链接的属性 a元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。这方面的知识，后面会详细学习。 属性名称 说明 href 指定a元素所指资源的URL hreflang 指向的链接资源所使用的语言 media 说明所链接资源用于哪种设备 rel 说明文档与所链接资源的关系类型 target 指定用以打开所链接资源的浏览环境 type 说明所链接资源的MIME类型（比如text/html） 1.href属性 a href=百度/a 解释：href是必须属性，否则a元素就变成空元素了。如果属性值是http://开头的URL，意味着点击跳转到指定的外部网站。 2.target属性 HYPERLINK code/target.html target a href= target=_blank百度/a 解释：target属性告诉浏览器希望将所链接的资源显示在哪里。 属性名称 说明 _blank 在新窗口或标签页中打开文档 _parent 在父窗框组（frameset）中打开文档 _self 在当前窗口打开文档（默认） _top 在顶层窗口打开文档 这四种最常用的是_blank，新建一个窗口。而_self是默认，当前窗口打开。_parent 和_top是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而HTML5中，框架基本被废弃，只能使用iframe元素，且以后大量结合JavaScript和PHP等语言配合，框架用的就很少了。 三、相对与绝对路径 HYPERLINK code/zonghe.html zonghe.html 所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面，其中一个页面链接到另一个页面。 1、绝对路径 a href=file:///D:/备课/HTML5第一季/code/index2.htmlindex2/a 解释：首先是file:///开头，然后是磁盘符，然后是一个个的目录层次，找到相应文件。这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构一旦出现任何变化，链接当即失效。 2、相对路径 a href=index2.htmlindex2/a 解释：相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法。 3、目录语法 同一个目录：index2.html或./index2.html；在子目录：xxx/index2.html； 在孙子目录：xxx/xxx/index2.html；在父目录：../index2.html； 在爷爷目录：../../index2.html； 4、链接路径示例 三、链接的类型 根据超链接的目标端点来分，超链接可分为： 内部链接 外部链接 书签链接 文件下载链接 邮件链接 根据超链接的源端点来分，超链接可分为： 文本链接 图像链接 1、内部链接 HYPERLINK code/hyperlink.htm example 内部链接是指在同一个网站内部，不同网页之间的链接关系 基本语法 a href=“file_name”链接文字/a 语法解释 通过“href”属性指定目标端点， “file_name”为要链接文件的路径，“链接文字”设置源端点，即提供给鼠标单击的内容 外部链接——链接到另外一台机器上的Web页面 外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系，一般情况下，这种链接需要使用绝对路径 基本语法 a href=“URL”链接文字/a 语法解释 通过“href”属性指定目标端点， “file_name”为要链接文件的路径，“链接文字”设置源端点，即提供给鼠标单击的内容 服??务?? URL格式 描??????述 WWW http:// 进入到万维网站点 Ftp ftp:// 进入文件传输服务器 News News:// 启动新闻讨论组 Telnet telnet:// 启动TELNET方式 Gopher Go