标签：
设置图像高度，默认情况下，改变高度的同时，其宽度也会等比例进行调整；设置图像宽度，如果同时设置两个属性，且缩放比例不同的情况下，图像很可能变形；在默认情况下，页面中插入的图像是没有边框的，可以通过border属性为图像添加边框。<img src="图像文件的地址" width="图像的宽度" height="图像的高度" border="图像边框的宽度"/>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>插入图像文件</title> 6 </head> 7 <body> 8 <h3>编程词典，精彩无限</h3> 9 编程词典个人版是一套学、查、用为一体的数字化学习编程软件。<br /> 10 <center> 11 <img src="2.jpg" height="310" width="310" border="3"/> 12 <img src="2.jpg" height="100" width="120"/> 13 </center> 14 </body> 15 </html>
设置图像水平间距，如果不适用<br/>或<p>标记进行换行显示，那么添加的图像会紧跟在文字之后。而图像与文字之间的水平距离是可以通过hspace参数进行调整的。<img src="图像文件的地址" hspace="水平间距"/>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>设置图像的水平间距</title> 6 </head> 7 <body> 8 <h3>请选择您喜欢的图片:</h3> 9 <hr size="2"/> 10 人物头像<img src="1.jpg" height="160" width="160" border="2"/> <img src="2.jpg" height="160" width="160" border="2"/> <img src="3.jpg" height="160" width="160" border="2"/> <img src="4.jpg" height="160" width="160" border="2"/> <br /> 11 <br /> 12 另外一组人物头像<img src="1.jpg" height="160" width="160" border="2" hspace="20"/> <img src="1.jpg" height="160" width="160" border="2" hspace="20"/> <img src="1.jpg" height="160" width="160" border="2" hspace="20"/> <img src="1.jpg" height="160" width="160" border="2" hspace="20"/> 13 </body> 14 </html>
设置图像的提示文字，提示文字有两个作用:第一，当浏览该网页时，如果图像下载完成，光标放在该图像上片刻就会出现提示文字；第二，如果图像没有被下载，在图像的位置上就会显示提示文字<img src="图像文件的地址" alt="提示文字的内容"/>。设置图像垂直间距，vspace属性用来调整图像和文字之间的上下距离<img src="图像文件的地址" vspace="垂直间距"/>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>设置图像的垂直间距</title> 6 </head> 7 <body> 8 <img src="1.jpg" height="160" width="160" border="2" vspace="30" alt="编程词典个人版，是今年明日科技主推的产品"/>编程词典个人版是一套学、查、用为一体的数字化学习编程软件。 9 </body> 10 </html>
设置图像和文字之间的排列通过align参数来调整，图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字对齐方式则是指图像与一行文字的相对位置<img src="图像文件的地址" align="相对文字的对齐方式">
| align | 对齐方式 |
| top | 把图像的顶部和同行的最高部分对齐 |
| middle | 把图像的中部和同行的中部对齐 |
| bottom | 把图像的底部和同行文本的底部对齐 |
| texttop | 把图像的顶部和同行中最高的文本顶部对齐 |
| absmiddle | 把图像的中部和同行中最大项的中部对齐 |
| baseline | 把图像的底部和文本的基线对齐 |
| absbottom | 把图像的底部和同行中最低项的底部对齐 |
| left | 使图像和左边界对齐 |
| right | 使图像和右边界的对齐 |
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>设置图像与文字的相对位置</title> 6 </head> 7 <body> 8 <font size="+3" color="#FF66CC">图片的相对位置</font> <img src="1.jpg" height="160" width="160" border="2" align="right"/> <img src="2.jpg" height="160" width="160" border="2" align="left"/> <img src="3.jpg" height="160" width="160" border="2" align="middle"/> <img src="3.jpg" height="160" width="160" border="2" align="baseline"/> 9 </body> 10 </html>
设置整幅图像文件的超链接<a href="链接地址" target="目标窗口的打开方式"><img src="图像文件的地址" /></a>
设置图像热区链接，首先需要在图像文件中设置映射图像（即包含热区的图像）名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称，语法如下:<img src="图像地址" usemap="映射图像名称" />，然后需要定义热区图像以及热区的链接属性，语法如下:<map name="映射图像名称"><area shape="热区形状" coords="热区坐标" href="链接地址" /></map>
标签：
原文地址：http://www.cnblogs.com/yyxiangjava/p/5426504.html
