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 <img> tag. 
在HTML，用<img>标签定义图象。

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
<img>是个空标签，意思就是它只包含属性而且它没有关闭标签。

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
要在一个页面上显示图象，你需要使用src属性。 Src就是"source"。它的值就是你想要显示图象的URL地址。

The syntax of defining an image:
定义图象的句法：

<img src="url">

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属性是给图象提供一个选择的文本。它的值由作者自定义。

<img src="boat.gif" alt="Big Boat">

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
图象标签

HTML 表单 HTML 背景

评论 (0) All