HTML入门:03HTML超链接及图片 1 超链接标记 1.1 URL 1.1.1 绝对URL 1.1.2 相对URL 2 图像标记 2.1 图片超链接 本文主要介绍HTML超链接标记和图像标记。
1 超链接标记 超链接是指从一个网页的信息节点指向一个目标的链接关系。
HTML使用标签a实现超链接,链接目标可以是一个网页,也可以是相同网页的不同位置,还可以是图片、电子邮件地址、或者是应用程序。
a标签有两个常用的属性,href和target,如下代码是基本格式,使用href属性来确定需要链接文档的目标位置。
显示的文本或图像
超链接的呈现形式一般为文本或图像,置于a标签之间,下面这行语句定义了指向CSDN的链接。
CSDN-专业开发者社区
互联网上每一个网页、每一个资源都是一个文件,如何才能找到你想要的文件在哪个服务器主机及这个主机上的哪个目标,这就需要使用URL(统一资源定位符)。
1.1 URL URL是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址,href属性值就是一个URL,因此我们需要学习URL地址的两种形式:绝对URL(绝对路径)和相对URL(相对路径)。
1.1.1 绝对URL 绝对URL可以链接文档之外的站点,一般包括通信协议名、服务器名、路径及文件的完全路径,例如下图中就有一个绝对URL,它指向CSDN中我的一篇博文。
1.1.2 相对URL 相对URL是链接当前站点内的文档。
当我们建立网站的时候通常会有一个包含整个网站的目录,在根目录下有index.html文件常被称为主页,还有多个目录分类存放网页文件,我们假设在recources目录下的contents.html文件中需要插入超链接以便打开目标文件,那么URL地址的描述通常有三种情况: 指向相同的目录:如果contents.html想要有一个超链接指向webpage1.html,那么href属性值直接写文件名就行; 指向子目录:如果contents.html想要有一个超链接指向page1.html,需要用\分隔每一级目录,直到找到目标文件为止; 指向上级目录:如果contents.html文件中想要有一个超链接指向index.html,需要通过…\返回到上一集目录,再逐级写下去。
链接文件除了HTML文件外也可以是其他类型文件,如果浏览器不能直接处理就会出现下载对话框,这条语句是链接一个zip文件,在浏览器中点击,弹出下载对话框。
压缩文件
如果客户端有默认的邮件程序,我们也可以使用这个URL地址,会自动地打开当前计算机系统中默认的邮件软件。
发邮件
超链接除了链接外部文件外,还可以实现页面中不同位置的跳转,创建这种链接需要两个步骤: 使用name属性,在需要的位置创建一个锚点,所谓锚点是文档中某行的一个记号,类似于书签,用于链接到文档中的某个位置;
目标内容
通过"锚点名"在指定的位置和锚点建立链接,此时href的属性值不是URL,而是"#锚点名"。
超链接文本或图像
下图是页面跳转在浏览器中实现的效果,在这些文字的位置上建立相应的矛点,导航的文字是以锚点名建立的超链接,当点击03光标就链接到03锚点的位置,代码如下。
页面标题
目录
01
02
03
01
认识HTML
02
HTML文本标记
03
HTML超链接及图片
a标签的另一个属性target,表示目标链接文档的打开方式,默认情况属性值为_self,表示在当前浏览器窗口打开; 如果属性值改为_blank,表示在新窗口中打开链接文档。
显示的文本或图像
显示的文本或图像
2 图像标记 图像是最早引入到网页中的多媒体元素,在网页中应用十分广泛,HTML中的图像标签为img,该标签单独使用没有结束标签,它有两个重要的属性:src和alt。
src属性值为需要加载的图片的url地址; alt属性表示当网页图片加载失败后将在显示图片的位置显示替代的文本。
下面这行代码表示,如果在image文件夹中找不到img1.jpg文件,那么在指定高度宽度的位置显示文本内容“img1”。
2.1 图片超链接 下面这行代码在超链接开始标签a和结束标签/a之间是img标签实现了图片超链接。
