1、常见的图片格式
- jpg
- gif(动态图)
- png
- bmp(位图)
2、img标签使用
<img src = "path" alt = "text" title = "text" width = "x" height = "y">
img:是image图像的缩写。是一个自闭合标签。
属性:
src:是图片的存储路径
alt:是图片无法显示的时候,显示的一段话,也就是图像的代替文字
title:鼠标悬停提示的文字
width:图片的宽度
height:图片的高度
3、src的两种写法
- 绝对路径:如 G:\Hbuilder\first\img\1.png 这样的写法,就是绝对路径。在 IDEA 中可以右键图片复制路径。就可以轻松的得到绝对路径了。(不推荐使用)
- 相对路径:也就是从文件本身出发,他的上一级,使用两个点 … 表示,当前目录用一个点表示 . 如(推荐使用)
当前目录下的a.jpg文件表示为: ./a.jpg
上一级目录下的a文件夹下的b.jpg 文件表示为: ../a/b.jpg
4、目录的创建
通常来说,习惯在项目中创建一个名为 resources 的文件夹,然后再在这 resources 文件夹 下面创建一个名为 image的文件夹,用来存放 图片。如果以后还有视频的话,就可以再在 resources 下创建一个名为 video 的文件夹,专门用来存放视频文件。
这样也可以方便 写文件的 定位,也就是文件的路径。
使用 两个点 … 代表上一级目录,使用一个点 代表 当前目录。
这样就可以很轻松的描述出文件的路径了。
5、验证alt属性值
只需要修改图片的src地址为错误的,也就是让浏览器找不到正确的图片显示,就会显示alt属性里面的值。