免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
自學(xué)代碼教程☆圖片標(biāo)簽
自學(xué)代碼教程☆圖片標(biāo)簽
編輯/吉祥如意988  資料/ 春天沒來
圖片標(biāo)簽<img >基本語法表達(dá)式
圖片標(biāo)簽,又叫做貼圖標(biāo)簽。是制作網(wǎng)頁的一種基本標(biāo)簽。圖片標(biāo)簽,沒有尾標(biāo)簽。
圖片標(biāo)簽一般的基本語法表達(dá)方式為:
<IMG src="
圖片標(biāo)簽<img>語法表達(dá)式解析
圖片標(biāo)簽解析:<圖片標(biāo)簽  路徑="地址"  寬度=450  高度=673>
圖片標(biāo)簽css樣式
圖片標(biāo)簽的寬度與高度(也叫圖片的規(guī)格),還可以用css樣式表示。例如:
<img style="width: 300px; height: 450px;"  src="
圖片的路徑,是指圖片保存在哪個(gè)網(wǎng)站的服務(wù)器中,也就是指圖片的地址。
圖片標(biāo)簽中添加屬性與屬值
圖片標(biāo)簽中,還可以添加許多屬性與屬值:
title屬性:標(biāo)題。在等號(hào)后面的雙引號(hào)內(nèi)輸入標(biāo)題內(nèi)容,當(dāng)用鼠標(biāo)箭頭指向圖片的時(shí)候,就會(huì)顯示出這些文字。
例如:title="東方女性之魅力"。當(dāng)用鼠標(biāo)箭頭指向圖片的時(shí)候,就會(huì)顯示出“東方女性之魅力”這些文字。
標(biāo)題的文字內(nèi)容,可以是對(duì)圖片的描述,也可以是你的空間的名稱等內(nèi)容。
alt屬性:替代文本。
alt屬性的作用是:當(dāng)圖片無法顯示的時(shí)候,就會(huì)顯示出這里的文字內(nèi)容。
例1:alt="“春天沒來”歡迎您" 。當(dāng)圖片無法顯示的時(shí)候,就會(huì)顯示出“春天沒來”歡迎您的文字內(nèi)容,說明這個(gè)圖片來自“春天沒來”的圖書館。
例2:alt="東方女性美美美"。當(dāng)圖片無法顯示的時(shí)候,就會(huì)顯示出東方女性美美美的文字內(nèi)容,說明這個(gè)圖片是美女圖片。
圖片標(biāo)簽添加標(biāo)題屬性與替代屬性語法表達(dá)式
添加了標(biāo)題屬性與替代文本屬性的圖片標(biāo)簽:
<img style="width: 300px; height: 450px;" title="東方女性之魅力" alt="“春天沒來”歡迎您" src="
圖片標(biāo)簽添加邊框線屬性語法表達(dá)式
圖片標(biāo)簽還可以添加邊框線的屬性:
<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="
上面的圖片標(biāo)簽中添加了寬度為4px的灰色的實(shí)線型邊框線。要修改邊框線的顏色,你就修改上面標(biāo)簽中括號(hào)內(nèi)的數(shù)值;要修改邊框線的寬度,你就修改“4px”中的“4”;要修改邊框線的樣式,你就替換solid代碼。
BORDER-LEFT(左邊框?qū)挘〣ORDER-TOP(上邊框?qū)挘〣ORDER-RIGHT(右邊框?qū)挘〣ORDER-BOTTOM(下邊框?qū)挘?div style="height:15px;">邊框線的樣式如下:dotted是點(diǎn)虛線型;dashed是線虛線型;solid是實(shí)線型;double是雙線型;groove是3D溝槽狀;ridge是3D脊?fàn)?;inset是3D內(nèi)嵌式;outset是3D外嵌式。(邊框線的設(shè)置方法,我將在“表格標(biāo)簽”一節(jié)中詳細(xì)講解。)
圖片標(biāo)簽添加對(duì)齊方式屬性語法表達(dá)式
圖片標(biāo)簽還可以添加對(duì)齊方式屬性:
<IMG style="TEXT-ALIGN: center; DISPLAY: block" alt="" src="
你看看效果吧,圖片是不是居中顯示的?(對(duì)齊方式,我在以后的相關(guān)教程中詳細(xì)講解。)
圖片標(biāo)簽還可以添加自定義鼠標(biāo)指針樣式
<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="你看看效果吧,圖片中是不是有了漂亮的光標(biāo)了?(這種效果,可能有的瀏覽器不支持。)
圖片標(biāo)簽還可以添加外邊距屬性
<IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 20px; WIDTH: 450px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" src="
圖片標(biāo)簽添加了外邊矩屬性,會(huì)在圖片外圍的四周留出一定的空白部位。也可以設(shè)置為在圖片外圍的某一邊留出一定的空白部位(外邊矩屬性,我在以后的相關(guān)教程中詳細(xì)講解。)。
圖片標(biāo)簽添加css的絕對(duì)定位樣式或者相對(duì)定位樣式
圖片標(biāo)簽添加css的絕對(duì)定位樣式或者相對(duì)定位樣式,添加了這些屬性,可以將圖片放置到你想放置的任意地方:
<IMG style="POSITION: absolute; WIDTH: 450px; TOP: 1200px; LEFT: 0px" alt="" src="
上面的圖片標(biāo)簽添加了css的絕對(duì)定位樣式,要添加css的相對(duì)定位樣式,把a(bǔ)bsolute修改為 relative即可。
你看看這個(gè)圖片,是不是放置到網(wǎng)頁下方很遠(yuǎn)的地方了?需要向下拖動(dòng)豎向滾動(dòng)條才可以看到哦!
css的絕對(duì)定位樣式與相對(duì)定位樣式,我將單獨(dú)撰寫一節(jié)教程專題講解。
圖片標(biāo)簽可以添加的屬性還有很多很多,等到你代碼入門以后,自己再研究探討吧。
查找圖片地址
要想應(yīng)用圖片標(biāo)簽,你還得學(xué)會(huì)尋找圖片的地址。尋找圖片地址的方法如下:
例如這個(gè)圖片:
在欣賞圖片的頁面中,“右擊”圖片,然后點(diǎn)擊“屬性”,就會(huì)彈出一個(gè)“屬性”的方框,方框中就有這個(gè)圖片的地址了:
http://image59.360doc.com/DownloadImg/2013/03/2017/31071360_11.jpg
如下圖:
在制作網(wǎng)頁時(shí),我們常常要修改圖片的大小。修改圖片的方法有好幾種,最簡(jiǎn)單實(shí)用的方法就是在代碼中修改。在代碼中修改圖片的寬度值與高度值即可。
例如:這個(gè)圖片:<IMG src="其寬度值是450,高度值是673。你只要修改這兩個(gè)數(shù)值,就可以把圖片變大或者變小。
復(fù)習(xí)思考作業(yè)題
1、認(rèn)識(shí)圖片標(biāo)簽的一般表達(dá)方式,弄清楚圖片屬性:路徑、寬度、高度的含義。
2、會(huì)在圖片標(biāo)簽中修改圖片的規(guī)格,會(huì)在圖片標(biāo)簽中替換圖片的地址。
3、認(rèn)識(shí)圖片的“標(biāo)題”屬性、“替代文本”屬性、“邊框線”屬性、“對(duì)齊方式”屬性、“外邊矩”屬性,并學(xué)會(huì)應(yīng)用這些屬性。
4、試著給圖片添加一個(gè)自定義鼠標(biāo)指針。自定義鼠標(biāo)指針,見我整理的這些文章:
http://www.360doc.com/content/13/0825/08/4127803_309703150.shtml
http://www.360doc.com/content/13/0825/12/4127803_309747794.shtml
http://www.360doc.com/content/13/0825/13/4127803_309760722.shtml
http://www.360doc.com/content/13/0825/13/4127803_309763960.shtml
http://www.360doc.com/content/13/0825/17/4127803_309816084.shtml
添加方法:用這些文章中的“鼠標(biāo)特效代碼”替換上面講解的“添加了自定義鼠標(biāo)指針樣式的圖片標(biāo)簽”中“括號(hào)內(nèi)的鼠標(biāo)地址”。
5、試著給圖片添加絕對(duì)定位樣式,觀察其顯示效果。
6、試著給圖片添加相對(duì)定位樣式,觀察其顯示效果。
歡迎光臨吉祥如意圖書館
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
代碼學(xué)習(xí)群簡(jiǎn)易教程(5)
練習(xí)五 怎樣認(rèn)識(shí)圖片標(biāo)簽
css基礎(chǔ)知識(shí)
【聊代碼】第十集 圖片標(biāo)簽(之二)
【聊代碼】第十集:圖片標(biāo)簽(之二)|老小孩博文
HTML、CSS、JavaScript學(xué)習(xí)總結(jié)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服