HTML（五）：图片、超链接

最新推荐文章于 2024-10-04 16:20:28 发布

不知名的MasaNvi

最新推荐文章于 2024-10-04 16:20:28 发布

阅读量5.3k

点赞数 3

文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_43936723/article/details/119886056

版权

HTML 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

图片

一、图片标签

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

	< img src="" alt="" title=""/>

1、src属性

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

< img src="图片路径"/>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*,body{margin: 0px auto;}
			img{margin: 50px 50px; border: 1px solid red;}
		</style>
	</head>
	<body>
		<div>
			<!--这里是图片原始大小，为700*622大小-->
			<img src="img/picture.jpg"/>
		</div>
	</body>
</html>

实现如下：
在这里插入图片描述

2、alt属性和title属性

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

alt属性用于描述图片，这一描述一般给搜索引擎，当图片无法显示时，会显示alt描述文字
title属性也用于描述图片，但这一描述给用户观看，鼠标移动到图片会显示提示文字

二、图片路径

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

1、绝对路径

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*,body{margin: 0px auto;}
			img{margin: 50px 50px; border: 1px solid red;}
		</style>
	</head>
	<body>
		<div>
			<!--这里是图片原始大小，为700*622大小-->
			<img src="C:/Users/Administrator/HBuilderProjects/1/img/picture.jpg"/>
		</div>
	</body>
</html>

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e7ab669a4d6ecfd5cc42472c5ab2503c.png

2、相对路径

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*,body{margin: 0px auto;}
			img{margin: 50px 50px; border: 1px solid red;}
		</style>
	</head>
	<body>
		<div>
			<!--这里是图片原始大小，为700*622大小-->
			<img src="img/picture.jpg"/>
		</div>
	</body>
</html>

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

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

 当我们使用绝对路径时，编辑器往往不能吧图片的路径解析出来，因此无法在网页上呈现出来。
 在真正开发过程中，对于图片或者文件引用的路径，我们一般采用相对路径。

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

 一般不建议采用中文形式，应为许多服务器为英文操作系统，对中文文件兼容较低。所以不管
 是图片或者文件夹，一般采用英文格式

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

 一般情况下，编译器会进行提示帮助我们填上正确的地址，不过需要我们勤能补拙，多加练习，加以熟悉。

三、图片格式

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

1、位图

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

.jpg：使用存储颜色丰富的复杂图片，如高清图片等等，但，jpg本身体积较大，并且不支持透明格式
.png：一种无损格式，可以无损压缩以保证页面的打开速度。对比jpg下，png体积较小并且支持透明，不过不适合存储颜色丰富的图片。
.gif：图片效果差，适合制作动图。

2、矢量图

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

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

超链接

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

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

一、a链接

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

	<a href="链接地址">文本或者图片</a>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.csdn.net/">点击这里进入CSDN</a>
	</body>
</html>

形成如下：
在这里插入图片描述
当我们点击后会跳转到CSDN页面上。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.csdn.net/"><img src="img/picture.jpg"/></a>
	</body>
</html>