With HTML you can display images in a document.
HTML可以让你在文档中显示一些图片。
Examples
例子
Insert images
插入图象
This example demonstrates how to display images in your Web page.
这个案例展示了在网页中显示图片的方法。
Insert images from different locations
从不同的地点插入图象
This example demonstrates how to display images from another folder or another server in your Web page.
演示了怎样将别的文件夹或是别的服务器上的图象放在你的WEB页面上。
(You can find more examples at the bottom of this page)
下面会有更多的例子
The Image Tag and the Src Attribute
图像标签和Src 属性
In HTML, images are defined with the
The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
URL指向这个图象的存放地点。一个叫做“boat.gif”的图象放在"www.w3schools.com"中的"images"下的话就需要这样写URL：http://www.w3schools.com/images/boat.gif.
The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
图象标签出现在哪则浏览器就把图象显示在哪。如果你把一个图象放在两个段落之间，浏览器就会先显示第一个段落然后显示你的图象再是第二个段落。
The Alt Attribute
Alt属性
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
alt属性是给图象提供一个选择的文本。它的值由作者自定义。
The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
"alt"可以告诉读者这个浏览器没能显示的图象到底是什么内容。浏览器将会把文本内容代替图象。在一个页的图象里添加alt属性是个好习惯，而且对那些只有文本浏览器的人来说是非常有用的。
Basic Notes - Useful Tips
实用提示
If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.
如果一个HTML页面里包含10个图象-11个文件被要求显示在页面的右侧。加载图象会花费时间，所以建议：谨慎的使用图象。
More Examples
更多的例子
Background image
背景图象
This example demonstrates how to add a background image to an HTML page.
这个案例展示了如何向一个HTML页面中添加一张背景图象。
Aligning images
图象的对齐
This example demonstrates how to align an image within the text.
这个案例展示了如何在文本中对齐图象。
Let the image float
让图象浮动
This example demonstrates how to let an image float to the left or right of a paragraph.
这个案例展示了如何让图象浮动到段落的左边或者是右边。
Adjust images to different sizes
调整图象的大小
This example demonstrates how to adjust images to different sizes.
这个案例展示了如何调整图象的尺寸大小。
Display an alternate text for an image
为图象显示替换文字
This example demonstrates how to display an alternate text for an image. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. It is a good practice to include the "alt" attribute for each image on a page.
这个案例展示了如何为图像设定替换文字。如果浏览器不能夹在图象，“alt”属性将给出提示。给网页中的每一个图象设置“alt”属性是一个很好的习惯。
Make a hyperlink of an image
给图象添加连接
This example demonstrates how to use an image as a link.
这个案例展示了如何建立图象连接。
Create an image map
给图象建立热点地图
This example demonstrates how to create an image map, with clickable regions. Each of the regions is a hyperlink.
这个案例展示了如何建立一个图象的热点地图，当点到不同的热点，会到不同的连接上。
Turn an image into an image map
使图象转换为热点地图
This example demonstrates how to turn an image into an image map. You will see that if you move the mouse over the image, the coordinates will be displayed on the status bar.
这个案例展示了如何将图象转换为热点地图。 你可以在状态栏看到坐标数字的变化。
Image Tags
图象标签
Tag
标签
Description
描述
Defines an image
定义图象
Defines an image map
定义一图象地图
Defines a clickable area inside an image map
定义图象地图的热点（可点击区域）