練習五 怎樣認識圖片標籤

1、圖片標籤<IMG 的表達方式為：src="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg">添加css的絕對定位樣式或者相對定位樣式： <IMG style="POSITION: absolute; WIDTH: 450px; TOP: 1200px; LEFT: 0px" alt="" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_15.jpg" width_=450>要添加css的相對定位樣式，把absolute修改為 relative即可。4、修改圖片的規格：修改前：

修改後：

5、替換圖片地址：原圖：<img src="https://www.getit01.com/getimg_360.php?url=http://image24.360doc.com/DownloadImg/2011/02/2622/9514743_1.jpg" alt="黃均工筆仕女人物畫作品欣賞">替換後：<imgsrc="https://www.getit01.com/getimg_360.php?url=http://image24.360doc.com/DownloadImg/2011/02/2622/9514743_3.jpg" alt="黃均工筆仕女人物畫作品欣賞">6、認識圖片的「標題」屬性、「替代文本」屬性、「邊框線」屬性、「對齊方式」屬性、「外邊矩」屬性，並學會應用這些屬性：A、「標題」屬性： title屬性：標題。在等號後面的雙引號內輸入標題內容，當用滑鼠箭頭指向圖片的時候，就會顯示出這些文字。示例：代碼：<DIV><IMG style="WIDTH: 599px; HEIGHT: 398px" title="玄武湖之夏" src="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=http://userimage5.360doc.com/14/0411/11/9496045_201404111133390506.jpg">&nbsp;</DIV>圖片：

例2：alt="東方女性美美美"。當圖片無法顯示的時候，就會顯示出東方女性美美美的文字內容，說明這個圖片是美女圖片。代碼：<img style="width: 300px; height: 450px;" alt="東方女性美美美" src="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=http://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="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=225>居中效果：

修改為居左代碼：<IMG style="TEXT-ALIGN: left; DISPLAY: block" alt="" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=225>居左效果：

修改為居右代碼：<IMG style="TEXT-ALIGN: right; DISPLAY: block" alt="" src="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=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、給圖片添加絕對定位樣式：<IMGstyle="POSITION:absolute;WIDTH:200px;TOP:0px;LEFT:200px"src="https://www.getit01.com/getimg_360.php?url=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="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=200>把絕對定位樣式改變成css的相對定位樣式，只要把absolute修改為 relative即可。
推薦閱讀：