《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块6 创建网页中的超链接

模块六创建网页

中的超链接目录任务创建“在线学习网”页面的超链接引入知识点6.1创建超链接6.2超链接的类型任务创建“在线学习网”页面的超链接6.1创建超链接超文本链接（HyperTextLink）通常简称为超链接（HyperLink），或者简称为链接（Link）。超链接就是从一个网页转到另一个网页的途径。链接是HTML的一个最强大和最有价值的功能。任务创建“在线学习网”页面的超链接6.1创建超链接6.1.1超链接a元素的语法格式创建超链接使用的标记是<a>。超链接要能正确地进行链接跳转，需要同时存在两个端点，即源端点和目标端点。源端点是指网页中提供链接单击的对象，如链接文本或链接图像；目标端点是指链接跳转过去的页面或位置，如某个网页、锚记等。超链接的目标端点使用<a>标记的href属性来指定，源端点则通过<a>标记的内容来指定。除了需要使用href属性外，还经常需要用到其他一些相关的属性。任务创建“在线学习网”页面的超链接6.1创建超链接6.1.2设置超链接的路径在网站中，每一个网页都有一个唯一的地址与之对应，这个地址称为统一资源定位符，即URL（UniformResourceLocator），它的功能就是提供在Internet上查找资源的标准方法。而对于一般的文件则是它的路径，即所在的目录和文件名。链接路径就是在超链接中用于标识目标端点的位置标识。常见的链接路径主要有以下两种类型。1.绝对路径2.相对路径任务创建“在线学习网”页面的超链接6.2超链接的类型1.根据超链接目标端点的位置不同划分（1）内部超链接：指在同一站点内部，不同页面之间的超链接。（2）外部超链接：是站点外部的链接，是网页与因特网中某个目标网页的链接。（3）锚记超链接：是同一网页内部的链接。通常情况下，锚记链接用于链接到网页内部某个特定的位置。（4）电子邮件超链接：指链接到电子邮箱的链接。单击该链接可以发送电子邮件。（5）可执行文件超链接：通常又称文件下载链接，单击该链接可以运行可执行文件，可以用于下载文件或在线运行可执行文件。任务创建“在线学习网”页面的超链接6.2超链接的类型2.根据链接源端点的内容不同划分（1）文本超链接：以文本作为超链接源端点。（2）图像超链接：以图像作为超链接源端点。（3）图像热点超链接：以图像热区作为超链接源端点。任务创建“在线学习网”页面的超链接6.2超链接的类型3.根据链接目标端点的内容不同划分（1）网页超链接：链接到HTML、ASP、PHP等网页文档的链接，这是网站中最常见的链接。（2）文件下载超链接：链接到图像、音频、影片、Word文档、Excel文档、PowerPoint文档、PDF文档等资源文件或RAR、ZIP等压缩文件的链接。（3）电子邮件超链接：链接到电子邮件的超链接形式，将会启动邮件客户端程序，浏览者可以写邮件并发送到链接的邮箱中。（4）空链接：链接目标形式上为“#”，主要用于在对象上附加行为等（5）脚本超链接：链接目标为一段JavaScript脚本代码，用于执行某项操作（6）锚记超链接：链接目标为网页文档中的某一位置，这一位置可以位于当前网页或其他网页中，这个网页可以位于当前站点内，也可以位于其他站点内任务创建“在线学习网”页面的超链接6.2超链接的类型1内部超链接内部超链接是指在同一个网站内部，不同网页之间的链接关系。基本语法格式如下：<ahref=“链接文件的路径”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型2外部超链接外部超链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系。基本语法格式如下：

<ahref=“URL”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型3锚记超链接锚记超链接又称书签链接。在浏览网页的时候，如果页面内容过长，需要不断地拖动滚动条才能看到所有内容，这时可以在该网页上建立锚记目录，单击目录上的某一项就能自动跳到该目录项对应的网页位置。任务创建“在线学习网”页面的超链接6.2超链接的类型第一步：创建锚记基本语法格式如下：HTML5：<aid=“锚记名称”>源端点</a>HTML5以前版本：<aname=“锚记名称”>源端点</a>语法说明：锚记名称就是对第二步跳转所创建的锚记，“源端点”则是设置链接后跳转的位置，可以是文本或图片。任务创建“在线学习网”页面的超链接6.2超链接的类型第二步：建立锚记链接基本语法格式如下：（1）链接到同一个页面中的锚记，称为内部锚记超链接。<ahref=“#锚记名称”>源端点</a>（2）链接到其他页面中的锚记，称为外部锚记超链接。<ahref=“锚记所在页面的文件路径#锚记名称”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型4电子邮件超链接在页面上创建电子邮件链接，可以让浏览者快速地与网站负责人联系。当鼠标单击链接对象时，浏览者的计算机系统中默认的电子邮件客户端软件将自动打开。基本语法格式如下：<ahref=”mailto:电子邮件”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型5文件下载超链接目标端点为某个需下载的文件的链接称为文件下载链接。当用户单击该链接后，浏览器会自动判断文件类型，以做出不同情况的处理，如直接打开，或弹出下载对话框供下载可用于下载的文件类型有.doc、.rar、.mp3、.zip、.exe等。基本语法格式如下：<ahref=“链接文件的路径”>下载文件链接</a>任务创建“在线学习网”页面的超链接6.2超链接的类型6脚本超链接目标端点为脚本代码的链接称为脚本链接。通过脚本可以实现HTML语言完成不了的功能。基本语法格式如下：<ahref=“JavaScript:…”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型7文本超链接文本超链接是指源端点为文本的链接。基本语法格式如下：<ahref=“目标端点”>链接文本</a>任务创建“在线学习网”页面的超链接6.2超链接的类型8图像超链接图像超链接是指源端点为图像文件的超链接。基本语法格式如下：<ahref=“目标端点”><imgsrc=“图像文件路径”></a>任务创建“在线学习网”页面的超链接6.2超链接的类型9图像热点超链接图像映射是指源端点为图片热点的链接。一幅图像可以被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。基本语法格式如下：<imgsrc="图片文件路径"usemap="#Map_name"><mapname="#Map_name"><areashape="rect"coords="x1,y1,x2,y2"href="链接地址1"><areashape="circle"coords="x,y,r"href="链接地址2"><areashape="poly"coords="x1,y1,x2,y2,x3,y3,…"href="链接地址3">…</map>任务创建“在线学习网”页面的超链接任务实现（1）通过文本超链接实现页面链接。（2）通过图像热点超链接实现首页到子页面的链接。（3）过锚记超链接实现子页面各部分内容的链接。（4）通过电子邮件超链接实现“联系我们”链接到邮箱：843118486@任务创建“在线学习网”页面的超