搜索
超链接和路径教学目标：了解超链接的属性能够清晰的区分相对与绝对路径的不同点学会各项链接的设置方法了解打开窗口的不同表现形式一、知识梳理本课主要学习HTML5中文本元素最重要的一个元素——超链接，熟悉它自身的属性以及路径问题。链接由两个部分组成：一部分是带下划线显示的一个单词或者是一张图片，我们称它为热点；另一部分是告诉浏览器当用鼠标点击热点时，它该显示何处的内容，称为URL引用。二、超链接的属性a元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。这方面的知识，后面会详细学习。1.href属性ahref=百度/a解释：href是必须属性，否则a元素就变成空元素了。如果属性值是http://开头的URL，意味着点击跳转到指定的外部网站。2.target属性targetahref==_blank百度/a解释：target属性告诉浏览器希望将所链接的资源显示在哪里。属性名称说明href指定a元素所指资源的URLhreflang指向的链接资源所使用的语言media说明所链接资源用于哪种设备rel说明文档与所链接资源的关系类型target指定用以打开所链接资源的浏览环境type说明所链接资源的MIME类型（比如text/html）属性名称说明_blank在新窗口或标签页中打开文档_parent在父窗框组（frameset）中打开文档_self在当前窗口打开文档（默认）_top在顶层窗口打开文档这四种最常用的是_blank，新建一个窗口。而_self是默认，当前窗口打开。_parent和_top是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而HTML5中，框架基本被废弃，只能使用iframe元素，且以后大量结合JavaScript和PHP等语言配合，框架用的就很少了。三、相对与绝对路径zonghe.html所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面，其中一个页面链接到另一个页面。1、绝对路径ahref=file:///D:/备课/HTML5第一季/code/index2.htmlindex2/a解释：首先是file:///开头，然后是磁盘符，然后是一个个的目录层次，找到相应文件。这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构一旦出现任何变化，链接当即失效。2、相对路径ahref=index2.htmlindex2/a解释：相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法。3、目录语法同一个目录：index2.html或./index2.html；在子目录：xxx/index2.html；在孙子目录：xxx/xxx/index2.html；在父目录：../index2.html；在爷爷目录：../../index2.html；4、链接路径示例三、链接的类型根据超链接的目标端点来分，超链接可分为：内部链接外部链接书签链接文件下载链接邮件链接根据超链接的源端点来分，超链接可分为：文本链接图像链接三、1、内部链接example内部链接是指在同一个网站内部，不同网页之间的链接关系基本语法ahref=“file_name”链接文字/a语法解释通过“href”属性指定目标端点，“file_name”为要链接文件的路径，“链接文字”设置源端点，即提供给鼠标单击的内容2、外部链接——链接到另外一台机器上的Web页面外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系，一般情况下，这种链接需要使用绝对路径基本语法ahref=“URL”链接文字/a语法解释通过“href”属性指定目标端点，“file_name”为要链接文件的路径，“链接文字”设置源端点，即提供给鼠标单击的内容服务URL格式描述进入到万维网站点Ftpftp://进入文件传输服务器NewsNews://启动新闻讨论组Telnettelnet://启动TELNET方式GopherGopher://访问GOPHER服务器E-mailURL方式:下载链接：download.html基本语法ahref=“File_URL”链接文字/a语法解释“File_URL“为下载文件所在路径启动邮件mail.html系统设置语法：ahref=“mailto:邮址1？Subject=content&cc=邮址2&bcc=邮址3”链接文字/a链接到另外一台机器上的Web页面也很简单，只要把目的地的URL地址赋给href就可以了。例如：想链接到“首都在线”的主页，可以写成：ahref=″″这里是首都在线的主页/a参数描述Subject电子邮件主题cc抄送收件人bcc暗送收件人3、链接到链接到同一Web页面的其他段落mao1、需要先做出一个“锚”标记，即链接的目标地，再做到“锚”的链接。到“锚”的链接与平常相同。例：htmlbodyahref=“#第一章”从这里可链接到第一章/aaid=“第一章”“锚”标记/a/body/html4、链接到不同网页的其他段落maodian如果链接到不同的文件的一个段落，则表示的方法有些改变。假如在B1文章里建立链接“链接到第一章”，而锚标记“第一章”在B2文章中，则链接可写为：ahref=″B2文章的文件名#第一章″链接文字/a4、图片热点链接maparea标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。area元素始终嵌套在map标签内部。注释：img标签中的usemap属性与map元素中的name相关联，以创建图像与映射之间的关系。ahref=#imgsrc=test.jpgismap=ismap/a五、总结本节课主要介绍了HTML5种的链接元素，链接是网站建设的最基础也是最核心的知识点，其种类比较多，自此希望同学们能很好的掌握其相关的知识点，配合完成实验四。