html画图代码_img图像标签HTML入门基础（017）

最新推荐文章于 2026-04-08 00:09:52 发布

最新推荐文章于 2026-04-08 00:09:52 发布 · 1.1k 阅读

标签

#html画图代码 #html让图片移动到一定位置 #img src 放绝对路径报错 #img src 文件流 #img src 本地路径

本文详细介绍了HTML img标签的使用方法，包括src、alt和title属性的含义及示例，探讨了相对路径与绝对路径的区别，并展示了如何处理文件路径在本地开发与服务器部署中的灵活性。

这一节内容，我们分享一下关于图像标签的使用方法。在网页中少不了图片的存在，一个网页如果有了图片会显得生动很多。在HTML中，图像标签是，img英文意思就是image，它是一个自闭合标签，常用的属性包括src、alt和title三个。

img标签符常用属性
属性	说明
src	图像的文件地址
alt	图片未加载时替换显示的文字
title	鼠标移动到图片上提示的文字

src和alt两个属性是必选的。语法：

img标签是一个自闭合标签，没有结束标签。可以写成，也可以写成，src属性用于设置图像文件的路径，可以是相对路径，也可以是绝对路径。示例代码：

      图像标签

在这里我们可以用画图工具，随意的画点东西，然后将文件保存至桌面，在桌面我们可以新建一个文件夹，名称是website，然后在这个文件夹下面再建立一个文件夹和一个文件，文件夹名称是images，文件名称是1.html，然后将刚才保存的图片文件1.jpg，移动或者剪切到文件夹images里存放，当你运行以上代码时，会发现图片可以显示的。以上的路径是相对路径。alt属性用于设置图片的描述信息，是为你给搜索引擎查看的，这个对于SEO很重要。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"

来看个实际的例子：

      路径问题

通常我们在网页代码中都是使用相对路径，绝对路径很少使用，另外插一句，在计算机文件系统中表示路径时，通常是斜杠分隔，就是d:\website\1.html，但是在HTML网页开发中，路径通常是使用反斜杠分隔的，比如 ./images/1.jpg，这个初学者一定要注意掌握。当网站开发过程中，文件系统中文件比较多，我们需要找到同级目录文件和上级目录文件该如何表示呢？通常都是从自身文件出发，如果你的网页代码是1.html，images文件夹与你同级目录，路径可以表示为 ./images/1.jpg，如果需要找到你的上级目录，路径表示为 ../website/xxx。