HTML格式8

来源：互联网发布：java 线程通信编辑：程序博客网时间：2024/05/29 08:10

参考：http://www.521yy.com/tools/html/images.htm

加载图像是需要时间的，所以请谨慎使用图像。

1.语法原理

Img标签和src属性。
在HTML里面，图像是由<img>标签定义的。
<img>是空标签，意思是说，它只拥有属性，而没有结束标签。
想要在页面上显示一个图像，需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。

插入图像的语法：

URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下： “http://www.w3schools.com/images/boat.gif”。

或者本地图片src="./image.jpg"
当浏览器在文档中遇到img标签时，就放置一个图像。如果把img标签放在两个段落之间，就会先显示一个段落，然后是这个图像，最后是另外一个段落。

2.背景图像

<html>
<body background="./images/background.jpg">
<h3>Look: A background image!</h3>
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat itself.
</body>
</html>

3.对齐图像

<html>
<body>

An image
<img src="./images/xhtml.gif" align="bottom" width="100" height="50">
in the text

4.浮动图像

<html>
<body>

<img src="./images/xhtml.gif" align="left" width="100" height="50">
A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.


<img src="./images/xhtml.gif" align="right" width="100" height="50">
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.

</body>
</html>

5.调整图像大小

<html>
<body>

<img src="./images/hackanm.gif" width="20" height="20">


<img src="./images/hackanm.gif" width="45" height="45">


<img src="./images/hackanm.gif" width="70" height="70">


You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag.

</body>
</html>

6.图像链接

<html>
<body>

You can also use an image as a link:
<a href="back.htm">
<img border="0" src="./images/next.gif">
</a>

</body>
</html>

7.图像地图

<html>
<body>

Click on one of the planets to watch it closer:

<img src="./images/planets.gif" width="145" height="126" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Note: We use both an id and a name attribute in the map tag because some versions of Netscape don't understand the id attribute.
</body>
</html>

8.图像转化为图像地图

<html>
<body>

Move the mouse over the image, and look at the status bar to see how the coordinates change.


<a href="ismap.htm">
<img src="./images/planets.gif" ismap width="146" height="126">
</a>

</body>
</html>

将鼠标在图像上移动，状态栏将显示坐标(IE)