练习五 怎样认识图片标签

360docflash_1_

1、图片标签<IMG 的表达方式为：

src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450 height=673>

图片标签解析：<图片标签 路径＝“地址” 宽度＝450 高度＝673>

2、图片标签css的表达方式为：

<img style="width: 300px; height: 450px;"  src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">

3、图片标签的属性：

title属性：标题。在等号后面的双引号内输入标题内容，当用鼠标箭头指向图片的时候，就会显示出这些文字。

alt属性：替代文本。alt属性的作用是：当图片无法显示的时候，就会显示出这里的文字内容。

添加边框线的属性： <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>

边框线的样式如下：dotted是点虚线型；dashed是线虚线型；solid是实线型；double是双线型；groove是3D沟槽状；ridge是3D脊状；inset是3D内嵌式；outset是3D外嵌式。要修改边框线的颜色，你就修改上面标签中括号内的数值；要修改边框线的宽度，你就修改“4px”中的“4”；要修改边框线的样式，你就替换solid代码。

添加对齐方式属性： <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的相对定位样式，把absolute修改为 relative即可。

4、修改图片的规格：

修改前：

修改后：

5、替换图片地址：

原图： <img src="//image24.360doc.com/DownloadImg/2011/02/2622/9514743_1.jpg" alt="黄均工笔仕女人物画作品欣赏">

替换后：<img src= "http://image24.360doc.com/DownloadImg/2011/02/2622/9514743_3.jpg" alt="黄均工笔仕女人物画作品欣赏">

6、认识图片的“标题”属性、“替代文本”属性、“边框线”属性、“对齐方式”属性、“外边矩”属性，并学会应用这些属性：

A、“标题”属性： title属性：标题。在等号后面的双引号内输入标题内容，当用鼠标箭头指向图片的时候，就会显示出这些文字。

示例：

代码：

<DIV><IMG style="WIDTH: 599px; HEIGHT: 398px" title="玄武湖之夏" src="http://userimage5.360doc.com/14/0406/16/9496045_201404061655060526.jpg">&nbsp;</DIV>

title="玄武湖之夏"。当用鼠标箭头指向图片的时候，就会显示出“玄武湖之夏”这些文字。

b、“替代文本”属性：

alt属性：替代文本。

alt属性的作用是：当图片无法显示的时候，就会显示出这里的文字内容。 例1：alt="“蟠龙书馆”欢迎您" 。当图片无法显示的时候，就会显示出“蟠龙书馆”欢迎您的文字内容，说明这个图片来自“蟠龙书馆”的图书馆。

代码：<DIV><IMG style="WIDTH: 401px; HEIGHT: 600px" alt=“蟠龙书馆”欢迎您 src="http://userimage5.360doc.com/14/0411/11/9496045_201404111133390506.jpg">&nbsp;</DIV>

图片：

例2：alt="东方女性美美美"。当图片无法显示的时候，就会显示出东方女性美美美的文字内容，说明这个图片是美女图片。

代码：<img style="width: 300px; height: 450px;"  alt="东方女性美美美" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">

图片：

c、“边框线”属性：

<IMG style="BORDER-BOTTOM: rgb(255,255,0) 40px solid; BORDER-LEFT: rgb(153,153,153) 20px dotted; BORDER-TOP: rgb(153,153,153) 30px dashed; BORDER-RIGHT: rgb(153,153,153) 15px double"

<img src="//image48.360doc.com/DownloadImg/2012/01/3115/21168215_2.jpg" alt="中国名家百幅人物画(上)。 - │Icê Blüe│ - ∑xtent°∧rt，2011">

D、“对齐方式”属性：图片可以通过修改对齐方式代码，改变图片在网页中的位置。

见附图：

居中图片代码：

<IMG style="TEXT-ALIGN: center; DISPLAY: block" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=225>

居中效果：

修改为居左代码：

<IMG style="TEXT-ALIGN: left; DISPLAY: block" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=225>

居左效果 ：

 修改为居右代码：

<IMG style="TEXT-ALIGN: right; DISPLAY: block" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=225>

居右效果 ：

7、给图片添加一个自定义鼠标指针：

</STRONG></DIV>

<DIV><STRONG><FONT size=5><SPAN id=articlecontent oncgdown="newhighlight = true;" oncgup="newhighlight(event)"><FONT size=3>&nbsp;</FONT> </SPAN></FONT></STRONG></DIV>

<DIV><STRONG style="LINE-HEIGHT: 1.5; COLOR: rgb(0,0,255); FONT-SIZE: 24px">&nbsp;&nbsp;<SPAN id=articlecontent oncgup="newhig)"><FONT size=3>&nbsp;<SPAN id=articlecontent oncgdown="newhighlight = true;" oncgup="newhighlight(event)">

<P><FONT style="FONT-SIZE: 20px" color=#000000><SPAN id=articlecontent oncgdown="newhighlight = true;" oncgup="newhighlight(event)"><FONT size=3>&nbsp;</FONT>

<TABLE>

<TBODY>

<TR>

<TD style="POSITION: relative" width=670>

<DIV id=blog-163-com-topbar class="nb-nbar clearfix">

<DIV class="pl fl clearfix">

<DIV class="nbw-im fl im im0">&nbsp;

<P><IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 720px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 540px; BORDER-LEFT-WIDTH: 0px; CURSOR: url(http://imgup2.poco.cn/mypoco/ani/mouse056.ani

), w-resize" id=albums src="http://userimage5.360doc.com/14/0406/15/9496045_201404061527340495.jpg"></P></DIV></DIV></DIV>

<P>&nbsp;</P>

<P>&nbsp;</P></TD></TR></TBODY></TABLE></SPAN>&nbsp;</FONT></P>

只要修改红色括号内陆址代码即可改变鼠标指针样式。

9、给图片添加绝对定位样式 ：

<IMG style="POSITION: absolute; WIDTH: 200px; TOP: 0px; LEFT: 200px" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>

10、给图片添加相对定位样式：

<IMG style="POSITION: relative; WIDTH: 200px; TOP: 0px; LEFT: 200px" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>

把绝对定位样式改变成css的相对定位样式，只要把absolute修改为 relative即可。