1.相对路径:以当前位置作为参考点,去建立路径。
若后期调整了文件位置,那么文件中的路径也要作相应修改。
同级目录: | ./图片名.jpg ( ./ 也可省略,即直接src=xxx.jpg) |
下一级: | ./文件夹名/图片名.jpg |
上一级: | ../文件夹名/图片名.jpg |
2.绝对路径:以根位置作为参考点,去建立路径。
绝对路径分为:本地绝对路径和网络绝对路径
注:使用本地绝对路径,一旦更换设备,路径处理起来比较麻烦(所以很少使用);
使用网络绝对路径,方便但是要注意,若服务器开启了防盗链,会造成图片引入失败。
代码示例:
目录结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML图片标签</title>
</head>
<body>
<!--src:图片路径 alt:图片描述 width:图片宽度,单位是像素 height:图片高度,单位是像素 -->
<img src="1.jpg" alt="花" width="300" height="350" >
<!--相对路径-->
<!--1.同级-->
<img src="./1.jpg" alt="花花" width="300" >
<!--2.下一级 -->
<img src="./image/2.jpg" alt="天空" width="300" >
<!--3.上一级 -->
<img src="../image2/3.jpg" alt="贝壳" width="300" >
<!-- 绝对路径,分为两类:本地绝对路径、网络绝对路径-->
<!-- 本地绝对路径 -->
<img src="D:\Chromedownload\26.png" width="300" >
<!--网络绝对路径 -->
<img src="https://i0.hdslb.com/bfs/archive/77c9304d7e040b72e1ec24c33175b47ece9c3b6b.jpg" width="400" alt="网上随便搜的壁纸">
</body>
</html>