上QQ阅读APP看书，第一时间看更新
2.5 在网页中插入图像
在网页中可以插入Logo（网站标志）、Banner（横幅广告）、照片等各种图片，浏览者浏览网页时，这些图片将会自动显示出来。合理应用图片，可以让网页看起来更美观、重点更突出、形式更活泼、浏览更方便。在HTML中可以通过<IMG>元素插入图片，其语法格式如下。
<IMG SRC="URL" ALT=" 替代文本" NAME=" 名字" WIDTH="宽度" HEIGHT=" 高度" BORDER=" 边框” ALIGN=" 对齐方式" ID=" 编号">
<IMG>元素的属性很多，上面代码只包含了常用的8种，其说明如下。
• SRC：用于指定图片所在位置，可以是相对路径或绝对路径。
• ALT：指定用于替代图片的文本，当图片不能正常显示时，可以使用该文本替代图片。
• WIDTH：指定图片的宽度。
• HEIGHT：指定图片的高度。
• BORDER：指定图片的边框大小。该属性的值越大，边框越粗。
• ALIGN：用于设置图片的对齐方式。该属性有5个值：LEFT、RIGHT、TOP、MIDDLE和BOTTOM，分别表示左对齐、右对齐、顶部、中间和底部对齐方式。
• NAME：图片的名称，很多时候可以省略。
• ID：图片的编号，也可以省略。在同一个HTML文档中不允许出现相同的ID，但可以出现相同的NAME。
【示例2-15】设置不同属性的图片。
01 <HTML> 02 <HEAD> 03 <TITLE>缩放图</TITLE> 04 </HEAD> 05 <BODY> 06 <P> 07 原图大小：<BR> 08 <IMG SRC="2.1.jpg" NAME="page1" ID="page1"> 09 </P> 10 <P> 11 缩小的图片：<BR> 12 <IMG SRC="2.1.jpg" WIDTH="100" HEIGHT="75"> 13 </P> 14 <P> 15 替代图片的文本：<BR> 16 <IMG SRC="2.2.jpg" ALT="这是图片2.2.jpg"> 17 </P> 18 <P> 19 设置图片边框为5 像素：<BR> 20 <IMG SRC="2.1.jpg" BORDER="5px" > 21 </P> 22 </BODY> 23 </HTML>
第8行演示了普通图片标签<IMG>的使用，在第12行为<IMG>标签添加WIDTH与HEIGHT属性以指定尺寸显示；在第16行使用ALT属性为图片指定替代文本；在第20行使用BORDER属性为图片添加边框。示例2-15运行效果如图2.18所示。
图2.18 在网页中插入图片运行效果