1.4 图像
范例1-12 链入图像
实例位置：光盘\ch01\1-12
范例说明 About the Example
本范例介绍如何在网页中链入图像的方法。程序运行效果如图1-12所示。
图1-12 链入图像的运行效果图
(a) 鼠标悬浮在图片上显示文字
(b) 图片错误显示文字
(c) 设置图片边框效果
(d) 带链接的图片
语法说明 About the Expression
<img>标记及其属性说明：
● src属性——在HTML中插入图片。
语法形式：<img src = #1>
#1 = 图片的路径和文件名。
● alt属性——假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。
语法形式：<img alt = #2>
#2 = 在浏览器尚未完全读入图像时，在图像位置显示的文字。
● border属性——图像的边框。
语法形式：<img border = #3>
#3 = 数字（单位为像素）。
● width属性和height属性——设置图像宽度和图像高度。
语法形式：<img width = #4 height = #4>
#4 = 可用数字（绝对像素值）或百分比表示（为该图像所在容器的百分比）。
关键步骤 Key Steps
1.打开Eclipse。
2.在ch01工程中的Webcontent目录下新建一个EX012目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-12.html，输入代码。
3.打开浏览器，输入 http://127.0.0.1:8080/ch01/EX012/EX1-12.html，即可显示如图1-12所示的内容。
程序代码 Codes
EX1-12.html： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>JSP通用范例大全</title> </head> <body> <img src=image/pig.jpg alt=动画小猪>普通插入alt="动画小猪"的意思是鼠标悬浮在图片上方时会 提示文字"动画小猪"； <br> <img src=image/pig2.jpg alt=动画小猪>插入错误时alt="动画小猪"的作用是在图片应该显示的地方 会出现提示文字"动画小猪"。 <br> <img src=image/pig.jpg border=5 width=100 height=100> border=5 width=100 height=100的效果 <br> <img src=image/pig.jpg border=2> <a href=EX1-12-sample.html><img src=image/pig.jpg border=2></a>将图片和链接合用效果 </body> </html> EX1-12-sample.html： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>JSP通用范例大全</title> </head> <body> 小猪图片 </body> </html>
范例1-13 图像和文字的对齐
实例位置：光盘\ch01\1-13
范例说明 About the Example
本范例介绍图像与文字在网页中的对齐方式。程序运行效果如图1-13所示。
图1-13 图像与文字的对齐方式的运行效果图
(a) 图像和文字的对齐
语法说明 About the Expression
<img>标记及其属性说明：
(b) 图像和文字的布局
● align属性——可以改变图片的垂直（居上、居中、居下）对齐方式和水平对齐
方式（居左、居右）。
语法形式：<img align = #1>
#1 = top，middle，bottom，left，right。
● vspace和hspace属性——改变图片与文字的垂直间隔和水平间隔。
语法形式：<img vspace = #3 hspace = #3>
#3 = 数字（单位为像素）。
关键步骤 Key Steps
1.打开Eclipse。
2.在ch01工程中的Webcontent目录下新建一个EX013目录，然后在此目录下新建一个HTML页面，命名其文件名为EX1-13.html，输入代码。
3.打开浏览器，输入 http://127.0.0.1:8080/ch01/EX013/EX1-13.html，即可显示如图1-13所示的内容。
程序代码 Codes
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<p>图像和文字的对齐</p>
<img src=image/pig.jpg align=top>动画小猪
<br>
<img src=image/pig.jpg align=middle>动画小猪
<br>
<img src=image/pig.jpg align=bottom>动画小猪
<p>图像和文字的布局</p>
<p>
<img src=image/pig.jpg align=left>
Java<br>
HTML<br>
JSP<br>
动画小猪<br>
</p>
<p>
<img src=image/pig.jpg align=right>
Java<br>
HTML<br>
JSP<br>
动画小猪<br>
</p>
</body>
</html>