HTML入门:[3]图片类的代码处理

2026-04-01 15:07:01

1、本节需要用到一些图片,首先需要找一些图片素材,将图片改为英文名字(中文名字在网站链接中容易出现错误),修改图片大小。

HTML入门:[3]图片类的代码处理

2、编写一个基础页面【图片.html】,和图片文件放在同一文件夹下。

HTML入门:[3]图片类的代码处理

3、图像标签

可以设置图片的源文件位置、图片大小和提示文字等内容。图片尺寸大小可以通过右键查看图片属性获得。

代码设置如下:

HTML入门:[3]图片类的代码处理

HTML入门:[3]图片类的代码处理

4、页面显示如下:

并列显示3副图片。

HTML入门:[3]图片类的代码处理

5、设置文字与图像对齐方式,可以设置上对齐、中间对齐或下对齐。

首先看代码设置,下面3副图的文字分别设置了上对齐、中间对齐和下对齐。

HTML入门:[3]图片类的代码处理

6、页面显示如下:

HTML入门:[3]图片类的代码处理

HTML入门:[3]图片类的代码处理

7、网页背景图片的设置;

在Body标签中可以设置背景图片的属性。

进行背景图片1设置的测试。

HTML入门:[3]图片类的代码处理

HTML入门:[3]图片类的代码处理

8、进行背景图片2设置的测试。

HTML入门:[3]图片类的代码处理

HTML入门:[3]图片类的代码处理

猜你喜欢