网页设计与制作课件 第6章 HMTL5中的超级链接.pptx

HTML5中的超级链接PowerPointdesign

CONTNETScontents目录设置超级链接01图像链接与下载链接02锚点链接03电子邮件链接04

设置超级链接Part01

（1）新建一个记事本文档，在文档中输入代码。（2）将代码保存为HTML文件，打开网页，点击文字，在新窗口中打开搜狗首页。课堂案例——在新窗口中打开网页

在HTML中，使用a标签添加超链接，具体格式为：ahref=目标地址载体/a其中，href表示目标资源的引用地址，属性值为URL或相对路径。a标签必须设置href属性，如果没有指向的目标资源，可使用“#”作为属性值，表示指向当前页面的空链接。a标签还有一个常用的属性target，表示打开目标资源的方式，属性值“_self”是默认值，表示在当前标签页中加载目标资源；“_blank”表示在新的标签页中加载目标资源。创建超级链接

超链接是通过引用目标地址链接到某个目标的，这就要用到URL。URL全称uniformresourcelocator，即统一资源定位器，用于指定资源的地址，一般由3部分组成，分别为通信协议、存有目标资源的主机域名和目标资源的路径。URL

超级链接的方式有相对链接和绝对链接两种。超级链接的路径即是URL地址，完整的URL路径为:1025/support/retail/contents.html#hello。当制作本地链接（即同一个站点内的链接）时，不须指明完整的路径，只需指出目标端点在站点根目录中的路径，或与链接源端点的相对路径。当两者位于同一级子目录中时，只需要指明目标端点的文件名即可。一个站点中经常遇到的有以下3种类型的文件路径。第1种：绝对路径（比如/support/dreamweaver/contents.html）。第2种：相对于文档的路径（比如contents.html）。第3种：相对于根目录的路径（比如/web/contents.html）。超级链接路径

图像链接与下载链接Part02

（1）新建一个记事本文档，在文档中输入代码。（2）将代码保存为HTML文件，打开网页，点击小图像，打开大图像。课堂案例——点击小图查看大图

除了链接到网页之外，a标签还可以链接到图像，这种链接称为图像链接，鼠标单击图像链接后可在浏览器中全屏查看所链接的图像文件。以下代码就是将名称为a1的jpg图像链接到名称为a2的gif图像。ahref=images/a2.gif/imgsrc=images/a1.jpg/a图像链接

当用户希望浏览者从自己的网站上下载资料时，就需要为文件提供下载链接。网站中的每一个下载文件必须对应一个下载链接。当链接的文件不能被浏览器解析时，如压缩文件，单击超链接后将直接下载链接的文件至本地计算机中，这种链接就是下载链接。下载链接与图像链接的写法一样，只不过链接的是压缩文件，代码如下：ahref=images/xiazai.rar/a下载链接

锚点链接Part03

锚点链接是指向同一页面或其他页面中特定元素的链接。例如，在篇幅较长的网页底部设置一个返回顶部的锚点链接，可以通过单击链接快速回到网页顶部，省去移动滚动条的麻烦。在网页中添加锚点链接需要执行两步操作。第1步：创建锚点。锚点就是锚点链接所指向的元素位置，为元素设置了id属性后，其属性值即可作为该元素的锚点。第2步：添加链接。锚点链接的href属性值为“#锚点名”，锚点名即目标元素的id属性值，如“href=#m1;”表示链接至当前页面中id属性值为m1的元素。当指向其他页面中的某个元素时，需要在“#”符号前加上页面的名称，如“href=test.html#m1;”锚点链接

电子邮件链接Part04

使用电子邮件链接可以打开客户端浏览器默认的电子邮件应用程序，收件人的邮件地址由电子邮件链接指定，无须手动输入。电子邮件链接的href属性值为“mailto:电子邮件地址?subject=邮件主题”，如“mailto:test@?subject=suggest”，其中，subject表示邮件主题，可以省略。电子邮件链接

第1步：新建一个记事本文档，在文档中输入代码，表示在页面顶部添加锚点。第2步：接下来插入图像，输入文字。第3步：为文字添加锚点链接。第4步：将代码保存为HTML文件，打开网页。练习案例——返回网页顶部

步骤01：在网页中输入文字并插入图像。步骤02：为文字添加下载链接。步骤03：保存文件并浏览。练习案例——精美壁纸下载