HTML（五）：图片、超链接

日常浏览网页中，在一个页面中会有文字、图片、音频等等，一般一个页面想要获取更多流量，一般通过“图文并茂”这一维度进行挖掘。 在HTML中，使用img标签来表达显示一张图片。对于img标签而言，我们需要了解img的三个标签属性：src、alt和title。 语法：

src用于指定图片的所在路径，这个路径可以是相对路径也可以是绝对路径。 语法格式：

解析： 所谓图片路径，指的是图片的存放地址。任何一张图片只有指定地址才能够显示。通俗来书，img标签和src属性就是一对孪生兄弟，不可或缺。 这里通过代码举例：

实现如下：

alt和title用于指定图片的提示文字，一般情况，两者属性值相同，不过两者也有区别

前面提到，我们想要像是一张图片，我们就必须设置该图片的路径（图片地址）。也就是说我们必须设置img的src属性。 在这里，src属性在HTML中分为两种属性，绝对路径和相对路径，接下来通过两个网页进行路径分析讲解。

在讲解绝对路径前，我们知道，当我们想去一个地方旅游时，如果在没有导航前提下，我们是不是需要了解一个景点的地址，例如广州塔，我们是不是需要了解到广州塔它位于广东省-广州市-海珠区-阅江西路222号我们才能够到达呢 ？ 同理，一个图片采用绝对地址也是需要从最广到最细进行引用。 例如：

对比与绝对路径下，相对路径就相对容易了解了，同样以景区问路作为例子，相对路径犹如本地人寻路，我们还是以广州塔作为例子，相对路径就是广州海珠区，本地就能知道在哪。 好了，接下来呈现下相对路劲写法：

好了，现在有一些小小疑问？

为什么我根据你这样写，图片却不能显示出来呢？

对于图片或者文件，我可以用中文名吗？

作为初学者，我老是忘记路劲怎么写？该怎么办呢？

在网页中，图片格式一般有两种格式，一种是“位图”，另外一种是“矢量图”。

位图图像（bitmap）：亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。用数码相机拍摄的照片、扫描仪扫描的图片以及计算机截屏图等都属于位图。位图的特点是可以表现色彩的变化和颜色的细微过渡，产生逼真的效果，缺点是在保存时需要记录每一个像素的位置和颜色值，占用较大的存储空间。 在实际开发中，常见的位图格式有三种：.jpg（.jpeg）、.png、.gif。对于升入理解三种图片适合放在什么情况下使用，是非常重要。

矢量图：也称为面向对象的图像或绘图图像，在数学上定义为一系列由点连接的线。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。 矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

我们常见的矢量图格式有：.ai、.cdf、.fh、.swf。其中，.swf在网页上最为常见。它指的是flash动画。

在网页中，超链接随处可见，例如导航栏、图片、按钮等等。只要我们轻轻一点，就会跳转到别的页面当中。但是，究竟什么叫做超链接呢？

超链接 ：超级链接简单来讲，就是指按内容链接。       超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

在HTML中，我们可以使用a标签来实现超链接 语法格式：

解析： href表示你先要跳转页面的路径（地址），可以是相对路径，也可以是绝对路径 举例：

形成如下： 当我们点击后会跳转到CSDN页面上。

接着，我们采用图片超链接

解析：当我们点击图片后，会自动跳转到CSDN首页。

在超链接中，在默认情况下都是在当前浏览器窗口打开一个新页面。但是在HTML中，我们可以通过target属性定义超链接打开窗口方式。 语法： 说明：a标签的target属性共有4种；

注：一般默认情况采用_blank值。

上一篇：HTML（四）：列表与表格 下一篇：HTML（六）：表单