这一节内容，我们分享一下关于图像标签的使用方法。在网页中少不了图片的存在，一个网页如果有了图片会显得生动很多。
在HTML中，图像标签是<img>，img英文意思就是image，它是一个自闭合标签，常用的属性包括src、alt和title三个。
| img标签符常用属性 | |
| 属性 | 说明 |
| src | 图像的文件地址 |
| alt | 图片未加载时替换显示的文字 |
| title | 鼠标移动到图片上提示的文字 |
src和alt两个属性是必选的。
语法：
<img src="图片的文件路径">
img标签是一个自闭合标签，没有结束标签。可以写成<img>，也可以写成<img/>，src属性用于设置图像文件的路径，可以是相对路径，也可以是绝对路径。
示例代码：
<html><head><title>图像标签</title></head><body><img src="images/1.jpg" alt="我是一张图片"></body></html>
在这里我们可以用画图工具，随意的画点东西，然后将文件保存至桌面，在桌面我们可以新建一个文件夹，名称是website，然后在这个文件夹下面再建立一个文件夹和一个文件，文件夹名称是images，文件名称是1.html，然后将刚才保存的图片文件1.jpg，移动或者剪切到文件夹images里存放，当你运行以上代码时，会发现图片可以显示的。以上的路径是相对路径。
alt属性用于设置图片的描述信息，是为你给搜索引擎查看的，这个对于SEO很重要。
title属性用于鼠标移动至图片上时的提示文字，是给用户看的。
语法：
<img src="图片路径" alt="未加载时提示信息" title="图片标题">
示例代码：
<html><head><title>图像标签</title></head><body><img src="images/1.jpg" alt="我是一张图片" title="我是图片标题"></body></html>
相对路径和绝对路径：
关于路径的问题，初学者一般会比较困惑。我们的计算机为了组织文件，是需要有盘符的，也就是我们通常说的C盘、D盘等，那么我们保存一个文件，就必须让计算机明确知道它的存储位置；
比如我在D盘下，建立一个网站目录，名称是website，内部含有一个文件夹和一个文件，分别是images文件夹用于存放图片，另一个是网页代码文件1.html；
当我们需要保存它们时，绝对路径就表示为d:\website\1.html和d:\website\images\1.jpg，这个就是文件的绝对路径，它明确表示出该文件位于哪个盘符，哪个文件夹下；
那么初学者会说，我们就直接使用绝对路径就好了，为什么还有相对路径呢？
还是拿上面的路径为基础，我们的网站开发在本机编写代码时，保存的路径是如此，但是等我们将网站部署至服务器时，会发现因为环境的因素发生改变，而造成路径变化了；
比如服务器在安装时没有D盘，只有E盘，我们将网站部署在了服务器的E盘，文件夹还是同名，会发现路径变为e:\website\1.html和e:\website\images\1.jpg，由于我们在代码中使用的是绝对路径，会发现全部代码都有出错的可能，程序不能正常运行了。
为了解决这种不灵活的路径问题，就引入了相对路径的方法，比如我们的网站开发时，根目录建立一个文件夹，名称是website，内含一个文件夹images，一个网页文件1.html，代码中我们全部是从根目录开始表示文件的位置，比如images\1.jpg，那么当我们的网站部署在任何盘符下，系统都会自动将相对路径转换为绝对路径来存取文件了，是不是很方便，很灵活。
绝对路径：
src="d:\website\images\1.jpg"
相对路径：
src="website\images\1.jpg"
来看个实际的例子：
<html><head><title>路径问题</title></head><body><img src="./images/1.jpg" alt="未加载提示" title="标题"></body></html>
通常我们在网页代码中都是使用相对路径，绝对路径很少使用，另外插一句，在计算机文件系统中表示路径时，通常是斜杠分隔，就是d:\website\1.html，但是在HTML网页开发中，路径通常是使用反斜杠分隔的，比如 ./images/1.jpg，这个初学者一定要注意掌握。
当网站开发过程中，文件系统中文件比较多，我们需要找到同级目录文件和上级目录文件该如何表示呢？
通常都是从自身文件出发，如果你的网页代码是1.html，images文件夹与你同级目录，路径可以表示为 ./images/1.jpg，如果需要找到你的上级目录，路径表示为 ../website/xxx。
| ./ | 同级目录 |
| ../ | 上级目录 |
下一节我们接着分享关于图像标签的内容。
1946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
