网页制作 > HTML/Xhtml >
HTML网页图片标记
佚名
图像的排列属性ALIGN
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右；而相对文字对齐方式是指图像与一行文字的相对位置。 "基线"(Baseline)、"底部"(Bottom)、"绝对底部"(Absolute Bottom)效果相同，是指图像底端和文字的底端对齐。 对于中文"顶端"(Top)、"文本上方"(TextTop)方式是指图像顶端和文字行最高字符的顶端对齐。 "中间"(Middle)方式是指图像的中间线和文字的底端对齐。 "绝对中间"(Absolute Middle)是指图像的中间线和文字的中间线对齐。"绝对中间"对齐方式用处比较大，文字前如有小图标，那么图标应该使用"绝对中间"对齐方式。
其中align的属性值如下表所示属性值
描述
Top
文字的中间线居在图像上方
Middle
文字的中间线居在图像中间
Bottom
文字的中间线居在图像底部
Left
图片在文字的左部
Right
图片在文字的右部
Absbottom
文字的底线居在图片底部
Absmiddle
文字的底线居在图片中间
Baseline
英文文字基准线对齐
Texttop
英文文字上边线对齐
文件范例：9-8.htm
通过<img>标记的align属性设定图片的排列。
01 <!-- ------------------------------ -->
02<!-- 文件范例：9-8.htm -->
03<!-- 文件说明：设定图片的排列 -->
04<!-- ------------------------------ -->
05<html>
06<head>
07<title>设定图片的排列</title>
08</head>
09<body>
10<h1>主流的网页设计软件</h1>
11<img src="9-1.JPG" align=Left width="100" height="140">
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
13<hr>
14<img src="9-1.JPG" align=Right width="100" height="140">
15 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
16<hr>
17<img src="9-1.JPG" align=Middle width="100" height="140">
18 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
19 </body>
20</html> 文件说明
第11、14、17行分别设定了图片的排列为居左、居右和文字居中。
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右；而相对文字对齐方式是指图像与一行文字的相对位置。 "基线"(Baseline)、"底部"(Bottom)、"绝对底部"(Absolute Bottom)效果相同，是指图像底端和文字的底端对齐。 对于中文"顶端"(Top)、"文本上方"(TextTop)方式是指图像顶端和文字行最高字符的顶端对齐。 "中间"(Middle)方式是指图像的中间线和文字的底端对齐。 "绝对中间"(Absolute Middle)是指图像的中间线和文字的中间线对齐。"绝对中间"对齐方式用处比较大，文字前如有小图标，那么图标应该使用"绝对中间"对齐方式。
-
基本语法
<img src="File＿name" align="Top"> <img src="File＿name" align="Middle"> <img src="File＿name" align="Bottom"> <img src="File＿name" align="Left"> <img src="File＿name" align="Right"> <img src="File＿name" align="Absbottom"> <img src="File＿name" align="Absmiddle"> <img src="File＿name" align="Baseline"> <img src="File＿name" align="Texttop">
其中align的属性值如下表所示
通过<img>标记的align属性设定图片的排列。
01 <!-- ------------------------------ -->
02<!-- 文件范例：9-8.htm -->
03<!-- 文件说明：设定图片的排列 -->
04<!-- ------------------------------ -->
05<html>
06<head>
07<title>设定图片的排列</title>
08</head>
09<body>
10<h1>主流的网页设计软件</h1>
11<img src="9-1.JPG" align=Left width="100" height="140">
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
13<hr>
14<img src="9-1.JPG" align=Right width="100" height="140">
15 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
16<hr>
17<img src="9-1.JPG" align=Middle width="100" height="140">
18 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
19 </body>
20</html> 文件说明
第11、14、17行分别设定了图片的排列为居左、居右和文字居中。