图片标签和路径

134 阅读1分钟

图片标签:

<img/>标签定义HTML中的图像

图片标签的属性:

  1. src 路径(图片地址与图片名)
  2. width(设置图片的宽度)
  3. height(设置图片的高度)
  4. title(鼠标悬停在图片上给予的提示)
 <img src="2.jpg" alt="很遗憾,图片出错了" border="10px"/>
  1. alt 图像的替换文本属性,在图像无法显示时告诉用户该图片的内容。
  2. border 为图像添加边框,设置边框的宽度。但边框颜色的调整仅仅通过 HTML 属性是不能够实现的。
 <img src="2.jpg" alt="很遗憾,图片出错了" border="10px"/>
  1. vspace HTML 中通过 vspace 调整图像的垂直边距(浏览器上端到图片距离)
  2. hspace HTML 中通过 vspace 调整图像的水平边距(浏览器左边到图片距离)
<img src="z.jpg" width="200px" height="200px" vspace="30px" hspace="10px"/>
  1. align 对齐方式(注意,居中对齐无效)
  • align="left" 靠左对齐(默认)
  • align="right" 靠右对齐
 <img src="z.jpg" width="400px" height="400px" align="right">

路径

绝对路径:

绝对路径:就是电脑的盘符存储与访问的地址(就是图片所在的地址写 盘符开始写全,那么就是图片地址+图片名)

<body>
    <img src="2.jpg"/>
    <img src="D:/testHtml/2.jpg"/>
</body>

相对路径:

1.同级关系:可以直接写图片名
<img src="2.jpg"/>
2.子级关系:从HTML文件目录开始往下写
<img src="img/2.jpg"/>
3.父级关系:../表示去当前目录的上一级目录
<img src="../上级文件夹/pic.jpg">

u=3532582294,1633498557&fm=253&fmt=auto&app=138&f=JPEG.webp