风云际 2005-7-16 23:35
HTML简单教程 4 (图象标志)
[TABLE][TR][TD][TR][TD][ALIGN=center]教程四、图像标志[/ALIGN][/TD][/TR][TR][TD]1.<img>
2.<hr>[/TD][/TR][TR][TD] 再简单朴素的网页如果只有文字而没有图像的话将失去许多活力,图像在网页制作中是非常重要的一个方面,Html语言也专门提供了<img>标志来处理图像的输出。
1.<img>
<img>标志并不是真正地把图像给加入到Html文档中,而是将标志对的[COLOR=#ff0000]src[/COLOR]属性赋值,这个值是图形文件的文件名,当然包括路径,这个路径可以是[COLOR=#008000]相对路径[/COLOR],也可以是[COLOR=#008000]网址[/COLOR]。实际上就是通过路径将图形文件嵌入到您的文档中。您可能并不知道什么是相对路径,我现在就来讲一讲相对路径。所谓相对路径是指您所要链接或嵌入到当前Html文档的文件与当前文件的相对位置所形成的路径。假如您的Html文件与图形文件(文件名假设是logo.gif)在同一个目录下,则可以将代码写成<img src="logo.gif">;假如您的图形文件放在当前的Html文档所在目录的一个子目录(子目录名假设是images)下,则代码应为<img src="images/logo.gif">;假如您的图形文件放在当前的Html文档所在目录的上层目录(目录名假设是home)下,则相对路径就必须是[COLOR=#800000]准网址[/COLOR]了,即用“[COLOR=#8000ff]../[/COLOR]”表示您的网站,然后在后边紧跟文件在您的网站中的路径,假设home是您的网站下的一个目录,则代码应为<img src="../home/logo.gif">,若home是您的网站下的目录king下边的一个子目录,则代码应该变为<img src="../king/home/logo.gif">了。现在您对相对路径应该有所了解了吧!
必须强调一下,src属性在<img>标志中是[COLOR=#8000ff]必须赋值[/COLOR]的,是标志中不可缺少的一部分。除此之外,<img>标志还有[COLOR=#ff0000]alt[/COLOR]、[COLOR=#ff0000]align[/COLOR]、[COLOR=#ff0000]border[/COLOR]、[COLOR=#ff0000]width[/COLOR]和[COLOR=#ff0000]height[/COLOR]属性。align是图像的对齐方式,在前边的教程中已经讲了很多了,这里就不再提了。border属性是图像的边框,可以取[COLOR=#8000ff]大于或者等于0的整数[/COLOR],默认单位是[COLOR=#8000ff]像素[/COLOR]。width和Height属性是图像的[COLOR=#8000ff]宽[/COLOR]和[COLOR=#8000ff]高[/COLOR],默认单位也是象素。alt属性是当鼠标移动到图像上时显示的[COLOR=#8000ff]文本[/COLOR]。
2.<hr>
<hr>标志是在Html文档中加入一条水平线,它可以直接使用,具有[COLOR=#ff0000]size[/COLOR]、[COLOR=#ff0000]color[/COLOR][COLOR=#000000]、[/COLOR][COLOR=#ff0000]width[/COLOR]和[COLOR=#ff0000]noshade[/COLOR]属性。size是设置水平线的[COLOR=#8000ff]厚度[/COLOR],而width是设定水平线的[COLOR=#8000ff]宽度[/COLOR],默认单位是像素。想必大家对color属性已经很熟悉了,在此就不再用多讲。noshade属性不用赋值,而是直接加入标志即可使用,它是用来加入一条[COLOR=#8000ff]没有阴影[/COLOR]的水平线(不加入此属性水平线将有阴影)。
下面是本教程的一个综合例子。
例5 图像标志举例
[COLOR=#0000ff]<html>
<head>
<title>图像标志的综合示例</title>
</head>
<body>
<p align="center"><img src="../logo468_60.gif" alt="网页制作" WIDTH="468" HEIGHT="60"></p>
<hr width="600" size="1" color="#0000FF">
</body>
</html>[/COLOR]
[ALIGN=center] [/ALIGN][/TD][/TR][/TABLE][/TD][/TR][TABLE][TR][TD][HR][/TD][/TR][/TABLE]