设置图像高度,默认情况下,改变高度的同时,其宽度也会等比例进行调整;设置图像宽度,如果同时设置两个属性,且缩放比例不同的情况下,图像很可能变形;在默认情况下,页面中插入的图像是没有边框的,可以通过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>