1.插入图像
img是单个标记,图像样式由img标记将图像插入网页中,也可以使用CSS设置成某元素的背景图像,根据图像格式的不同,适用的地方也不同。图像样式由img标记的属性决定。img标记有两个必选的属性,分别是src、alt,其它属性为可选属性,img标记的具体属性、取值如下:
属性 | 取值 | 说明 |
alt | text | 规定图像的代替文本 |
src | URL | 规定图像的URL文本 |
name | text | 规定图像的名称 |
height | pixels,% | 定义图像的高度 |
width | pixels,% | 定义图像的宽度 |
align | top|middle|bottom|left|center|right | 规定如何根据周围的文本来排列图像,分水平、垂直两个方向 |
border | pixels | 定义图像的边框 |
hspace | pixels | 定义图像左侧和右侧的空白 |
vspace | pixels | 定义图像顶和底侧的空白 |
usemap | URL | 将图像定义为客户端图像映射 |
1. 基本语法
<img src="URL" alt="代替文本">
2. alt属性
当图像加载不成功时显示规定文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插入图像及相关属性应用</title>
<style type="text/css">
body{
text-align: center;
}
</style>
</head>
<body>
<h3>网页中插入图像</h3>
<hr color="#3300ff">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.dfae341c76bd4e04efd7d986a4d66e88?rik=mgdtE7lIWErAdA&riu=http://img.zcool.cn/community/01bf2a57
d21aaa0000018c1b0bb237.jpg@2o.jpg&ehk=lN6yYBONZsVGMsA7fQ1ZPnZzIYWaabzpc64Bg2JFya8=&risl=&pid=ImgRaw&r=0" alt="网络机房" title="网络机房">
</body>
</html>
3.设置图像的高度和宽度
1.基本语法
<img src="url" width="value" height="value">
2.语法说明
- 图像高度和宽度的单位可以时像素也可以是百分比
- 在设置图像的宽度高度时,可以只设置宽度和高度中的一个,另一个属性按原图的高度、宽度等比例显示。如果同时设置两个属性,图像会发生变形。
4.设置图像的边框
1.基本语法
<img src="URL" border="value">
2.语法说明
valu为边框线的宽度,用数字表示,单位为像素。
5.设置图像对齐方式
图像与文字之间的对齐方式通过img标记的align属性来设置。图像对其方式分水平对齐和垂直对齐方式两种,其中水平对齐方式有left、center、right,垂直方式的取值有top、middle、bottom,表示图像与同行文字的相对位置。
1.基本语法
<img src="URL" align="value">
2.语法说明
取值 | 说明 |
top | 图像的顶端和当前文字顶端对齐,当前行的高度相应扩大 |
middle | 图像的水平中线和当前行的文字中线对齐,当前行的高度相应扩大 |
bottom | 图像的底端和当前行文字的底端对齐,当前行的高度相应扩大 |
left | 图像左对齐,浮动游离于文字之外,文字环绕图像周围,文字行的高度没有任何变化 |
center | 图像的水平中线和当前行的文字中线对齐,当前行的高度相应扩大 |
right | 图像右对齐,浮动游离于文字之外,文字环绕图像周围,文字行的高度没有任何变化 |
6.设置图像间距
1.基本语法
<img src="url" hspace="水平间距数值" vspace="垂直间距数值">
2.语法说明
hspace调整图像左右两边的空白距离,vspace调整图像上下两边的空白距离。
7.设置图像热区链接
1.基本语法
<img src="图像地址" usemap="#映射图像名称">
<map name="映射图像名称" id="映射图像名称">
<area shape="热区形状1" coords="热区坐标1" href="url1" >
...
</map>