5.5　在页面中插入图像

可以在网页中放置各种各样的图像，从标志到照片都可以。只要浏览器没有关闭图像显示，当访问者进入你的页面时，页面上的图像就会自动显示出来（参见图5.5.1和图5.5.2）。

  1. ...
  2. <body>
  3.  
  4. <h2>Barcelona's Market</h2>
  5.  
  6. <img src="cornermarket.jpg" />
  7.  
  8. <p>This first picture shows one of the fruit stands in the Mercat de la Boquería, the central market that is just off the Rambles. It's an incredible place, full of every kind of fruit, meat, fish, or whatever you might happen to need. It took me a long time to get up the nerve to actually take a picture there. You might say I'm kind of a chicken, but since I lived there, it was just sort of strange. Do you take pictures of your supermarket?</p>
  9.  
  10. </body>
  11. </html>

图5.5.1　这个图像的URL只包含文件名，没有路径，因此代表该图像位于与此网页相同的文件夹

5.5　在页面中插入图像 - 图1

图5.5.2　图像贴向页面的左侧，与文本的对齐方式一致。使用float（参见11.10节）等CSS属性可以改变对齐方式或让文字环绕图像

在页面中插入图像的步骤

  • 在HTML代码中，将光标放在希望图片出现的位置。

  • 输入，其中image.url指示图像文件在服务器上的位置。

  • 输入一个空格和/>。

提示　图像必须先上传到服务器上，访问者才有可能看到它们。

　

提示　不要期望你的访问者会长时间等待页面加载和显示。可以对页面进行测试（别忘了你的连接速度可能比访问者的快）。如果你都等不下去，那么访问者也一样等不下去。另一种办法是为大图创建缩略图，让访问者可以通过链接选择查看大图。

　

提示　有一个已经废弃的border属性（border="n"，其中n是以像素为单位的宽度），它可以在图像周围添加或去除边框（特别是去除链接图像周围自动出现的边框）。更好的方法是使用样式表控制图像的边框以及所有其他的方面。