电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> HTML>>HTML基础之HTML图像:

HTML基础之HTML图像

来源:www.cncfan.com | 2006-1-21 | (有1854人读过)

使用HTML可以在文档中显示图像。


--------------------------------------------------------------------------------

示例

插入图像:


<html>
<body>
<p>
An image:
<img src="./images/constr.gif" width="144" height="50">
</p>
<p>
A moving image:
<img src="./images/hackanm.gif" width="48" height="48">
</p>
<p>
Note that the syntax of inserting a moving image is no different from that of a non-moving image.
</p>
</body>
</html>


这个例子说明了如何在网页中显示图像。


插入非本地图像:


<html>
<body>
<p>
An image from W3Schools:
<img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>


这个例子说明了如何在网页中显示非本地图像。


在这个页面的底部,还有更多例子。


--------------------------------------------------------------------------------

Img标签和src属性

在HTML里面,图像是由<img>标签定义的。

<img>是空标签,意思是说,它只拥有属性,而没有结束标签。

想要在页面上显示一个图像,需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。

插入图像的语法:


<img src="url">

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

当浏览器在文档中遇到img标签时,就放置一个图像。如果把img标签放在两个段落之间,就会先显示一个段落,然后是这个图像,最后是另外一个段落。


--------------------------------------------------------------------------------

alt属性

alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。


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

“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯,它有助于更好地显示信息,而且,对纯文本浏览器很有用。


--------------------------------------------------------------------------------

基本注意点——有用的技巧

如果一个HTML文档包含10个图像,那么为了正确显示这个页面,需要加载11个文件。加载图像是需要时间的,所以请谨慎使用图像。


--------------------------------------------------------------------------------

更多示例:

背景图像:

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


这个例子说明了在HTML页面中如何添加背景图像。


对齐图像:

<html>
<body>
<p>
An image
<img src="./images/xhtml.gif" align="bottom" width="100" height="50">
in the text
</p>
<p>
An image
<img src="./images/xhtml.gif" align="middle" width="100" height="50">
in the text
</p>
<p>
An image
<img src="./images/xhtml.gif" align="top" width="100" height="50">
in the text
</p>
<p>Note that bottom alignment is the default alignment</p>
<p>
An image
<img src="./images/xhtml.gif" width="100" height="50">
in the text
</p>
<p>
<img src="./images/xhtml.gif" width="100" height="50">
An image before the text
</p>
<p>
An image after the text
<img src="./images/xhtml.gif" width="100" height="50">
</p>
</body>
</html>


这个例子说明了在文字中如何对齐图像。


浮动图像:

<html>
<body>
<p>
<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.
</p>
<p>
<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.
</p>
</body>
</html>


这个例子说明了如何让图像浮动在段落的旁边。


调整图像大小:

<html>
<body>
<p>
<img src="./images/hackanm.gif" width="20" height="20">
</p>
<p>
<img src="./images/hackanm.gif" width="45" height="45">
</p>
<p>
<img src="./images/hackanm.gif" width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag.
</p>
</body>
</html>


这个例子说明了如何改变图像的大小。


图像的交互文本:

<html>
<body>
<img src="./images/prev.gif" alt="Last Page">
<p>
Text-only browsers will only display the text in the "alt" attribute, which is "Last Page".Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>


这个例子说明了如何为图像创建交互文本。将鼠标放在图像上,将能够看到这个文本。


图像链接:

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


这个例子说明了如何使用图像作为链接。


图像地图:

<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<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>
<p>
<b>Note:</b> We use both an <b>id</b> and a <b>name</b> attribute in the map tag because some versions of Netscape don't understand the id attribute.</p>
</body>
</html>


这个例子说明了如何创建带有可点击区域的图像地图。每个可点击区域是一个超级链接。


将图像转化为图像地图:

<html>
<body>
<p>
Move the mouse over the image, and look at the status bar to see how the coordinates change.
</p>
<p>
<a href="ismap.htm">
<img src="./images/planets.gif" ismap width="146" height="126">
</a>
</p>
</body>
</html>


这个例子说明了如何将图像转化为图像地图。将鼠标在图像上移动,状态栏将显示坐标。
上一篇HTML表单
下一篇HTML基础之HTML背景
HTML热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2022 电脑爱好者 版权所有 备案号:鲁ICP备09059398号