当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 网页制作解惑:图象文件的路径

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 网页制作解惑:图象文件的路径


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 48 ::
收藏到网摘: n/a

本文属于软晨学习网闪电儿原创,转载可以去掉这句话,但是不要以任何借口或方式更改文章的内容,否则后果自负!转载请注明作者和出处。

很久以前一直到现在,有好多网友问过我类似的问题,尤其是拷贝了本站的一些图形图像特效代码后,总是图片显示不出来等问题出现,在这里专门为这些初学者写一篇相关的教程,如果您没有这方面的疑问,请自行走开!

关于网页中应用图像的问题,也就是网页中图像标记的应用,下面给大家总结一下!

1)图像标记概述。

如果网页只有文字而没有图像,像失去了很多活力,图像在网页制作中是非常重要的一个方面,HTML专业提供了<IMG>标记来把图像输出到网页上。该标记有SRC、ALT、ALIGN、BORDER、WIDTH和HEIGHT属性。

2)属性介绍。

SRC属性。对于<IMG>标记,其SRC属性是必然属性,即在<IMG>标记中SRC是必须赋值的,是标记不可缺少的一部分。这时,IMG应该写成如下格式:

<IMG SRC=”参数值”>

其中,参数值为图像的文件名全称和路径。

我们知道图像文件占用的空间一般远大于诸如HTML文档这样的纯文本文件,而网页设计经常需要加入许多图像以便增加吸引力,如果这些图像文件都要加入HTML文档里,HTML文档就会变得很大,在网络上传输必然会很慢。

<IMG>标记并不是真正把图像加入到HTML文档中,而是告诉HTML:图像文件是哪个?在哪里?以便HTML到图像文件的原始位置去调用它。SRC属性的作用就是回答这两个问题,所以SRC属性的参数值一定要有图像文件的文件名全称,即文件名和扩展名,如logo.gif,这就回答了图像文件是哪个的问题;其参数值也要有图像文件的路径,以便HTML知道在什么地方去找到这个图像文件。
SRC属性的参数值中,如何撰写图像文件的路径对于初学者往往是个问题。

图像文件的路径可以是相对路径,也可以是网址。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前HTML文件的相对位置所形成的路径。假如HTML文件与图像文件(假设名字为logo.gif)在同一个目录下,则可以将代码写成<IMG SRC=”logo.gif”>;假如该图像文件放在当前的HTML文件所在目录的一个子目录(假设子目录名为images)下,则代码应为<IMG SRC=”images/logo.gif”>;假如该图像文件放在当前HTML文件所在目录的上层目录(假设上层目录名为home)下,则相对路径必须是准网址了,即用“../”来表示开发者的网站,然后在后边紧跟图像文件在开发者网站中的路径。例如,假设home是这个网站下的一个目录,则代码应该为<IMG SRC=”../home/logo.gif”>,若home是网站下的目录king下的一个子目录,则代码应该写为<IMG SRC=”../king/home/logo.gif”>。

其它属性。<IMG>标记的ALT、ALIGN、BORDER、WIDTH和HEIGHT属性是可选的。ALIGN属性是图像的对齐方式,参数取值为左(left)、中(center)、右(right);BORDER是图像的边框,其参数取大于或等于0,默认单位为像素;WIDTH和HEIGHT属性是图像的宽和高,其参数的默认单位为像素;ALT属性是当鼠标移动到图像上时显示的文本,在这里提醒大家制作网页时一定要使用该属性,这样做的目的是什么呢?是当图像由于某种原因不能显示时可以显示提示的文字,这样增加了对用户的友好度。