HTML中图片的连接img标签

  • <img> 标签并不会在网页中插入图像，而是从网页上链接图像
  • <img> 标签创建的是被引用图像的占位空间
  • <img> 标签有两个必需的属性：src 属性和alt属性

其他还有width (图片的宽度)、height（高度）、border（边框）是可选属性等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>

<img src="image/1.jpg" alt="图片" width="200px" height="200px" border="3px"/><br/>
<img src="image/2.jpg" alt="图片"/>
</body>
</html>
  • <img/>标签中src=""指图片的文件路径，文件路径又分为两种，一个是绝对路径，一个是相对路径，绝对路径是指文件在你电脑上所在的位置，相对路径指在你的编辑器VSCODE上的位置，在使用JetBrains WebStorm 进行使用<img/>标签时，不能使用编辑器打开文件的绝对路径，可以在直接在源代码中点开。
  • <img/>标签中alt=""是指在网页中如果图片不能打开，则显示的所替换的文字。
  • heigt 属性是指插入网页中图片文件的高度，width 属性是指插入网页中图片的宽度，border 属性是指图片的边框，其中px是指像素的大小
  • 在<img/>标签中也可以使用align属性：center，left，right

结果运行如下：

 

版权声明：本文为qq_54108380原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。