HTML中图像标记img的使用

小橙子鸭

于 2024-03-06 22:10:55 发布

阅读量1.4k

点赞数 29

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_45872389/article/details/136484693

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML中图像标记img的使用

标记的属性
1.图像的替换文本属性alt
- 代码展示
- 效果
2. 图像的宽度、高度以及边框属性（width、height、border）
- 代码
- 效果
图像的边距属性（vspace、hspace）
- 代码
- 效果
4.图像的对齐属性（align）
- 代码
- 效果
完结撒花

标记的属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标指针悬停时显示的内容
width	数字	图像的宽度
height	数字	图像的高度
border	数字	图像的边框的宽度
vspace	数字	图像顶部和底部的空白(垂直边距)
hspace	数字	图像的左侧和右侧的空白(水平边距)
align	left right	将图像对齐到右边将图像对齐到左边
align	top middle bottom	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方将图像底部和文本的第一行文字对齐，其他文字居图像下方

1.图像的替换文本属性alt

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记的alt属性</title>
	</head>
	<body>
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片"/>
		<!-- 下面这行是没有图片地址的 img标签 -->
		<img src="" alt="这是一张图片"/> 
	</body>
</html>

效果

这是一张图片

2. 图像的宽度、高度以及边框属性（width、height、border）

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记的alt属性</title>
	</head>
	<body>
		<!-- 这里设置了图片的宽度，它的高度也随着宽度变化了 -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="120px"/> 
		<!-- 这里设置了图片的宽度和高度，图片被拉伸变形了 -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="50px" height="100px"/>  
		<!-- 这里额外设置了图片的边框线的属性 -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="80px" height="100px" border ="10px"/>
	</body>
</html>

效果

设置图片的宽高和

图像的边距属性（vspace、hspace）

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记的alt属性</title>
	</head>
	<body>
<!-- 		这里给第一张图片设置了垂直边距10px -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="120px" vspace="10px"/> 
<!-- 		这里给第二张图片设置了水平边距10px -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="50px" height="100px"/ hspace = "10px">  
		
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="80px" height="100px" border ="10px"/>
	</body>
</html>

效果

可以看出来图片的位置因为边距的改变，它们的位置跟上面那张图片有所不同

图像的边距属性（vspace、hspace）

4.图像的对齐属性（align）

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记的alt属性</title>
	</head>
	<body>
<!-- 		这里给第一张图片设置了垂直边距10px -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="120px" vspace="10px"/> 
<!-- 		这里将第二张图片的对齐方式改为了向右对齐 -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="50px" height="100px"/ hspace = "10px" align="right">  
		<h1>我是一只小小鸭子</h1>
		<p>我爱睡懒觉,可是我睡不着,所以我现在在躺着.</p>
		<p>今天我学习了HTML中的img标记,我知道它在HTML中可以设置宽度,高度,边框,垂直边距,水平边距和对齐属性.</p>
<!-- 		这里将第三张图片的对齐方式改为了向右对齐 -->
		<img src="http://www.muxc888.cn/picture.jpeg" alt="这是一张图片" width="80px" height="100px" border ="10px" align="right"/>
	</body>
</html>