5. HTML 常用标签—图像和路径标签

目录

1 图像标签和路径

1.1 图像标签

1.2 路径

（1）目录文件夹和根目录

（2）相对路径和绝对路径

        1.相对路径

        2. 绝对路径

---

1 图像标签和路径

1.1 图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

< img src= " 图像url "  / >

• img为单词 image 的缩写，意为图像。
• src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。 
• 所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

属性	属性值	说明
src	图片路径	<img> 标签的必须属性
alt	文本	替换文本，图像不能正常显示时使用文字替换图片
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点：

1. 图像标签可以拥有多个属性，必须写在标签名的后面
2. 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
3. 属性采取键值对的格式，即 key= "value" 的格式（属性 = “属性值”）。

1.2 路径

（1）目录文件夹和根目录

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到它们，因此我们需要一个文件夹来管理它们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

（2）相对路径和绝对路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这是再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为相对路径和绝对路径。

        1.相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

                  这里简单来说，图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如<img src="baidu.jpg" />
下一级路径	/	图像文件位于HTML文件下一级，如<img src="images/baidu.jpg" />
上一级路径	../	图像文件位于HTML文件上一级，如<img src="../baidu.jpg" />

相对路径是从代码所在的这个文件的位置出发，去寻找目标文件的。

        若html文件与images文件夹在同一级，而我们要找的图片在images文件夹里，则路径为

src=" images/baidu.jpg "。

        若htmls文件夹与图片文件在同一级，而代码所在的html文件在htmls文件夹里，则将html文件通过../符号跳转到与图片文件同一级，再寻找目标文件，路径为src=" ../baidu.jpg "。

        若htmls文件夹与images文件夹在同一级，而代码所在的html文件在htmls文件夹里，图片在images文件夹里，则将html文件通过../符号跳转到与images文件夹同一级，再在images文件夹中寻找目标文件，路径为src=" ../images/baidu.jpg "。

        2. 绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如: "C:\Users\28891\Desktop\HTML练习\图片\280a2ceffe72660fcea5410821c05c84.jpeg" 或 

完整的网络地址 " http://www.itcast.cn/images/logo.gif " 。