网页设计html中的img图片标签使用攻略

来源：互联网 2023-03-16 19:12:37 178

网页设计中图片通常是必不可少的，因为，有时候图片可以更清楚的表达思想，有时候图片更加吸引人等等。本文就为您介绍图片的IMG标签使用攻略

方法/步骤

创建h5页面

1）打开VSCode，新建一个文件，保存为html后缀

2）在文件中输入一个感叹号，按下tab键，就可以快速创建html5的dom结构

3）在页面同级添加一个Images文件夹，并放入任何一张图片

4前端页面开发工具 - VSCode的下载与安装

网页设计html中的img图片标签使用攻略

本地路径图片

在html页面中添加一个img标签，并将其src属性值指向Images文件夹中的图片，将页面在浏览器中打开，即可运行看到图片在网页中呈现的效果

网页设计html中的img图片标签使用攻略

网络路径图片

在html页面中添加一个新的img标签，src属性值指向网上一个图片的地址，在浏览器中运行，效果如图所示

网页设计html中的img图片标签使用攻略

3该信息未经许可获取自百度经验

设置图片大小

通过img标签的width属性，可以设置图片的宽度。height属性可以设置图片的高度

网页设计html中的img图片标签使用攻略

设置图片加载失败的信息

通过img标签的alt属性，可以设置图片没有加载成功时，显示的文字。比如，将图片路径指向一个不存在的图片，就会显示alt对应的文字内容

网页设计html中的img图片标签使用攻略

设置图片的提示文字

通过img标签的title属性，可以设置鼠标放到图片上时，显示的提示文字。同时，这个title还可以帮助搜索引擎搜索到当前图片，所以，通常希望被搜索引擎收缩到的图片，建议都加上title属性

网页设计html中的img图片标签使用攻略

设置图片位置

通过img标签的align属性，可以设置图片与文字的展示方式。在实际项目中，图片大小、位置通常通过css来控制，一般不写死在img标签内部

网页设计html中的img图片标签使用攻略

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML