1、6.图片标签 - 图5图标标签,是一个单标签,单标签是不需要闭合的,可以单写一个6.图片标签 - 图6,当然为了统一规范也可以写成6.图片标签 - 图7

示例代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>图标标签</title>
  6. </head>
  7. <body>
  8. <img src="./1.png" alt="访问不到图片时显示的文本" title="鼠标悬停在图片上给的提示" width="200px" height="100px">
  9. </body>
  10. </html>

image.png
注意:只写宽度图片会根据宽度进行等比例设置高度,这样好处是图片不会变形,如果宽度和高度都设置的话那么图片会进行压缩有可能会导致图片变形。

2、src路径属性:

网络路径:https:www.abc.com/test.png
绝对路径:src=”E:\image\1.png”
相对路径:
a、同级关系:/,如html文件和png文件在同一个目录下,用./1.png或者直接用1.png即可
b、子级关系:./,如image文件夹在html的目录中,用./image/1.png即可
c、父级关系:../,如image文件夹在html的上一层目录,用../image/1.png即可

3、如淘宝网中大量运用了6.图片标签 - 图9标签:

image.png