Alex's Blog : IMG代码参数使用方法图文教程

IMG代码参数使用方法图文教程

===========================================================

作者: alexclark(http://alexclark.itpub.net)
发表于: 2006.10.01 13:24
分类: 所见即所得
出处: http://alexclark.itpub.net/post/670/216140
---------------------------------------------------------------

我们常常会在编辑日志的时候配以图片，怎么样可以更好的安排我们的版式，让页面看起来更漂亮呢？那就需要用到<IMG>这个代码啦，我们来一起走进<IMG>这个代码使用方法图文教程吧~
* 首先来认识一下这个代码：<IMG>称为图形标记，主要用以将图片于插入到网页中。
<IMG>的一般参数设定，也就是可以控制图片是大是小，是左是右的控制参数有： src=” ”
alt=
width=
height=
hspace=
vspace=
border=
align= * 进入日志编辑页面，点 HTML即可 编辑这些代码

* 举个例子吧，比如下面的这段代码：

<IMG src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG" alt=不同的位置 width=220 height=146 align=right hspace=8 vspace=3 border=1>在地铁里有两种位置........（文本）
它能够实现的效果：

大家在编辑自己的日志的时候，可以将这段参数拷贝到自己的 HTML 编辑模式的界面下，修该成自己想要的数值就可以了。
* 下面我们来分析一下具体的参数在效果中的作用：

1. src="//www.viewstock.com/full/dir2494/dir853/1720037.JPG"
网络上的图片地址，可以链接自其他的网页，了解这个地址的方法很简单，在图片上点鼠标右键，选择属性，就可以看到图片的地址了，把这个地址复制下来就可以了。

2. alt=不同的位置
这是用以描述这个图片的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字就会显示。 这个可有可无，根据个人的需要吧~

3. width=220
设置图片的宽度，以象素（Pixels）为单位。

4. height=146
设置图片的高度，以象素（Pixels）为单位。
在设定大小的时候，我们只需要选择规定一定的宽度或一定的高度就可以了，图片会按比例自动缩放，不用全部都设定，避免计算错误导致图片被拉伸。例如在上边的例子中，为了让大家看效果，我用了两个参数，其实只需要用width=220就可以达到我想要的效果了。
为了避免失真，最好设为图片的真实大小，若需要改变图片大小最好使用图像编辑工具事先编辑好。当然如果我们懒一点，或对图片的效果要求不高，那么我们就没必要，毕竟编辑图片也要花时间嘛~

5. hspace=8
图片与周围文字或图片的左右边距，以象素（Pixels）为单位。

6. vspace=3
图片与周围文字或图片的上下边距，以象素（Pixels）为单位。
这两个参数用于设定图片边沿空白，以免文字或其它图片过于贴近，让页面看起来更美观

7. border=1
图片边框厚度。

8. align=right
调整图片在页面上出现的位置，你可以控制文字环绕在图片的左边或右边等。可用值：left, right （即图片在左边，右边）
还有其他可选值：top, middle,bottom（即图片在上方，中间，下方），但文字只会有一行出现在图片旁边的上方，中间或下方，不会出现整段的环绕。
例如：把刚才那段代码中的align值设为 align=Top
<IMG src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG" alt=不同的位置 width=220 height=146 align=Top hspace=8 vspace=3 border=1>在地铁里有两种位置........（文本）

怎么样？清晰一些了吗？参数上自己可以多实验一下，就可以看到不同的效果了,现在来动手尝试一下吧。