1. 图像标签
1.1 图像标签的定义
在HTML标签中，<img> 标签用于定义HTML页面中的图像。
<img src="图像URL" />单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
1.2 图像标签的其他属性
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字。 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字。 |
| width | 像素 | 设置图像的宽度。 |
| height | 像素 | 设置图像的高度。 |
| border | 像素 | 设置图像的边框粗细。 |
1.3 图像标签的使用
（1）src属性基本使用：
图片和html文件放在同一目录下：
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签的使用</title>
</head>
<body>
<h4>图像标签的使用：</h4>
<img src="helloworld.img" />
</body>
</html>执行效果如下：
（2）alt属性使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签的使用</title>
</head>
<body>
<h4>图像标签的使用：</h4>
<img src="helloworld1.img" alt="这是一个坏掉的hello world图像" />
</body>
</html>执行效果如下：
（3）title属性使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签的使用</title>
</head>
<body>
<h4>图像标签的使用：</h4>
<img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" />
</body>
</html>执行效果如下：
（4）width属性使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签的使用</title>
</head>
<body>
<h4>图像标签的使用：</h4>
<img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
</body>
</html>执行效果如下：
（5）height属性使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签的使用</title>
</head>
<body>
<h4>图像标签的使用：</h4>
<img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" height="10" />
</body>
</html>执行效果如下：
宽度和高度一般情况修改一个就行了，另外一个让他自己等比例进行缩放。
（6）boder属性使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签的使用</title>
</head>
<body>
<h4>图像标签的使用：</h4>
<img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" border="15" />
</body>
</html>执行效果如下：
一般不在属性设定，会通过CSS来进行设定。
1.4 图像标签注意点
（1）图像标签可以拥有多个属性，必须写在标签名的后面。
（2）属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
（3）属性采取键值对的格式，即key = "value", 属性 = "属性值"。
8118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
