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>
效果
可以看出来图片的位置因为边距的改变，它们的位置跟上面那张图片有所不同
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>
效果
