|
第五节 图片标签 图片标签，又叫做贴图标签。是制作网页的一种基本标签。图片标签，没有尾标签。
图片标签一般的表达方式为：<IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450 height=673>
图片标签解析：<图片标签 路径＝“地址” 宽度＝450 高度＝673>
图片标签的宽度与高度（也叫图片的规格），还可以用css样式表示。例如： <img style="width: 300px; height: 450px;" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">
图片的路径，是指图片保存在哪个网站的服务器中，也就是指图片的地址。
图片标签中，还可以添加许多属性与属值：
title属性：标题。在等号后面的双引号内输入标题内容，当用鼠标箭头指向图片的时候，就会显示出这些文字。例如：title="东方女性之魅力"。当用鼠标箭头指向图片的时候，就会显示出“东方女性之魅力”这些文字。
标题的文字内容，可以是对图片的描述，也可以是你的空间的名称等内容。
alt属性：替代文本。alt属性的作用是：当图片无法显示的时候，就会显示出这里的文字内容。
例1：alt="“春天没来”欢迎您" 。当图片无法显示的时候，就会显示出“春天没来”欢迎您的文字内容，说明这个图片来自“春天没来”的图书馆。
例2：alt="东方女性美美美"。当图片无法显示的时候，就会显示出东方女性美美美的文字内容，说明这个图片是美女图片。
添加了标题属性与替代文本属性的图片标签：
<img style="width: 300px; height: 450px;" title="东方女性之魅力" alt="“春天没来”欢迎您" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg"> 图片标签还可以添加边框线的属性：
<IMG style="BORDER-BOTTOM: rgb(153,153,153) 4px solid; BORDER-LEFT: rgb(153,153,153) 4px solid; BORDER-TOP: rgb(153,153,153) 4px solid; BORDER-RIGHT: rgb(153,153,153) 4px solid" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450>
上面的图片标签中添加了宽度为4px的灰色的实线型边框线。要修改边框线的颜色，你就修改上面标签中括号内的数值；要修改边框线的宽度，你就修改“4px”中的“4”；要修改边框线的样式，你就替换solid代码。
边框线的样式如下：dotted是点虚线型；dashed是线虚线型；solid是实线型；double是双线型；groove是3D沟槽状；ridge是3D脊状；inset是3D内嵌式；outset是3D外嵌式。（边框线的设置方法，我将在“表格标签”一节中详细讲解。）
图片标签还可以添加对齐方式属性： （DISPLAY: block属性不可省略）
<IMG style="TEXT-ALIGN: center; DISPLAY: block" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450>
你看看效果吧，图片是不是居中显示的？（对齐方式，我在以后的相关教程中详细讲解。）
图片标签还可以添加自定义鼠标指针样式：
<img style="border-width: 0px; margin: 0px; width: 700px; height: 900px; cursor: url(http://imgup2.poco.cn/mypoco/ani/mouse015.ani), w-resize;" id="albums" src="http://image18.360doc.com/DownloadImg/2010/12/1220/7595222_18.jpg"> 你看看效果吧，图片中是不是有了漂亮的光标了？（这种效果，可能有的浏览器不支持。）
图片标签还可以添加外边矩属性：
<IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 20px; WIDTH: 450px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg">
图片标签添加了外边矩属性，会在图片外围的四周留出一定的空白部位。也可以设置为在图片外围的某一边留出一定的空白部位（外边矩属性，我在以后的相关教程中详细讲解。）。
图片标签还可以添加css的绝对定位样式或者相对定位样式，添加了这些属性，可以将图片放置到你想放置的任意地方：
<IMG style="POSITION: absolute; WIDTH: 450px; TOP: 1200px; LEFT: 0px" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_15.jpg" width=450>
上面的图片标签添加了css的绝对定位样式，要添加css的相对定位样式，把absolute修改为 relative即可。
你看看这个图片，是不是放置到网页下方很远的地方了？需要向下拖动竖向滚动条才可以看到欧！
css的绝对定位样式与相对定位样式，我将单独撰写一节教程专题讲解。
图片标签可以添加的属性还有很多很多，等到你代码入门以后，自己再研究探讨吧。
要想应用图片标签，你还得学会寻找图片的地址。
寻找图片地址的方法如下：
例如这个图片：
 在欣赏图片的页面中，“右击”图片，然后点击“属性”，就会弹出一个“属性”的方框，方框中就有这个图片的地址了：http://image59.360doc.com/DownloadImg/2013/03/2017/31071360_11.jpg
如下图：
 在制作网页时，我们常常要修改图片的大小。修改图片的方法有好几种，最简单实用的方法就是在代码中修改。在代码中修改图片的宽度值与高度值即可。
例如：这个图片：<IMG src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450 height=673>
其宽度值是450，高度值是673。你只要修改这两个数值，就可以把图片变大或者变小。
作业：
1、认识图片标签的一般表达方式，弄清楚图片属性：路径、宽度、高度的含义。
2、会在图片标签中修改图片的规格，会在图片标签中替换图片的地址。
3、认识图片的“标题”属性、“替代文本”属性、“边框线”属性、“对齐方式”属性、“外边矩”属性，并学会应用这些属性。
4、试着给图片添加一个自定义鼠标指针。自定义鼠标指针，见我整理的这些文章：
添加方法：用这些文章中的“鼠标特效代码”替换上面讲解的“添加了自定义鼠标指针样式的图片标签”中“括号内的鼠标地址”。
5、试着给图片添加绝对定位样式，观察其显示效果。
6、试着给图片添加相对定位样式，观察其显示效果。
“春天没来”编撰
2014年4月2日于北京
|
|
|
