HTML基礎(chǔ) 之 img 圖片

圖像標(biāo)簽(<img>)和源屬性(Src)

  • 在 HTML 中,圖像由 <img> 標(biāo)簽定義伦腐。
  • <img> 是空標(biāo)簽,意思是說失都,它只包含屬性蔗牡,并且沒有閉合標(biāo)簽。
  • 要在頁面上顯示圖像嗅剖,你需要使用源屬性(src)辩越。src 指 "source"。源屬性的值是圖像的 URL 地址信粮。
  • URL 指存儲(chǔ)圖像的位置黔攒。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中,那么其 URL 為 http://www.w3school.com.cn/images/boat.gif
  • 瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方督惰。如果你將圖像標(biāo)簽置于兩個(gè)段落之間不傅,那么瀏覽器會(huì)首先顯示第一個(gè)段落,然后顯示圖片赏胚,最后顯示第二段访娶。

替換文本屬性(Alt)
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的觉阅。

![](boat.gif)

在瀏覽器無法載入圖像時(shí)崖疤,替換文本屬性告訴讀者她們失去的信息。此時(shí)典勇,瀏覽器將顯示這個(gè)替代性的文本而不是圖像劫哼。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣,這樣有助于更好的顯示信息割笙,并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的

基本的注意事項(xiàng) - 有用的提示:

假如某個(gè) HTML 文件包含十個(gè)圖像权烧,那么為了正確顯示這個(gè)頁面,需要加載 11 個(gè)文件伤溉。加載圖片是需要時(shí)間的般码,所以我們的建議是:慎用圖片。

HTML 與 XHTML 之間的差異

  • 在 HTML 中乱顾,<img> 標(biāo)簽沒有結(jié)束標(biāo)簽侈询。
  • 在 XHTML 中,<img> 標(biāo)簽必須被正確地關(guān)閉糯耍。
  • 在 HTML 4.01中扔字,不推薦使用 image 元素的 "align"、"border"温技、"hspace" 以及 "vspace" 屬性革为。
  • 在 XHTML1.0 Strict DTD 中,不支持 image 元素的 "align"舵鳞、"border"震檩、"hspace" 以及 "vspace" 屬性。

基本代碼如下

<html>
<!--設(shè)置網(wǎng)頁背景圖片-->

<body  style="background:url('background.jpg') no-repeat;background-size: 100%;">

<!--圖片與html在同一級(jí)目錄則只需要寫圖片名稱蜓堕,如果在更深層目錄這要寫到同一級(jí)目錄-->
<p>圖片的排列 ![](one.png)設(shè)置了對(duì)齊方式 </p>

<!--帶有圖像的一個(gè)段落抛虏。圖像的 align 屬性設(shè)置為 "right"。圖像將浮動(dòng)到文本的右側(cè)套才。-->
<p>圖片的排列 ![](one.png) align圖片位置 </p>

<p>如果無法顯示圖像迂猴,將顯示 "alt" 屬性中的文本:![](11one.png)</p>


<!--您也可以把圖像作為鏈接來使用-->
<a href="http://www.reibang.com/u/3f6026e916d5">
![](a-http.png)
</a>


<p>請(qǐng)點(diǎn)擊圖像上的星球,把它們放大背伴。</p>

<img
src="one.png"
border="0" usemap="#planetmap"
alt="Planets" height="260" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="http://www.reibang.com/u/3f6026e916d5"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="http://www.reibang.com/u/3f6026e916d5"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"

target ="_blank"
alt="Sun" />

</map>

<p><b>注釋:</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性(根據(jù)瀏覽器)沸毁,所以我們同時(shí)向 map 元素添加了 "id" 和 "name" 屬性峰髓。</p>

</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市息尺,隨后出現(xiàn)的幾起案子携兵,更是在濱河造成了極大的恐慌,老刑警劉巖搂誉,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件徐紧,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡炭懊,警方通過查閱死者的電腦和手機(jī)并级,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凛虽,“玉大人死遭,你說我怎么就攤上這事广恢】” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵钉迷,是天一觀的道長至非。 經(jīng)常有香客問我,道長糠聪,這世上最難降的妖魔是什么荒椭? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮舰蟆,結(jié)果婚禮上趣惠,老公的妹妹穿的比我還像新娘。我一直安慰自己身害,他們只是感情好味悄,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著塌鸯,像睡著了一般侍瑟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上丙猬,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天涨颜,我揣著相機(jī)與錄音,去河邊找鬼茧球。 笑死庭瑰,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的抢埋。 我是一名探鬼主播见擦,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼钉汗,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了鲤屡?” 一聲冷哼從身側(cè)響起损痰,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎酒来,沒想到半個(gè)月后卢未,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡堰汉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年辽社,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片翘鸭。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡滴铅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出就乓,到底是詐尸還是另有隱情汉匙,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布生蚁,位于F島的核電站噩翠,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏邦投。R本人自食惡果不足惜伤锚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望志衣。 院中可真熱鬧屯援,春花似錦、人聲如沸念脯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽和二。三九已至徘铝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間惯吕,已是汗流浹背惕它。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留废登,地道東北人淹魄。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像堡距,于是被迫代替她去往敵國和親甲锡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子兆蕉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)HTML的最佳網(wǎng)站沒有之一http://www.w3school.com.cn/html/ 關(guān)于HTML/HT...
    Amyyy_閱讀 2,054評(píng)論 0 16
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評(píng)論 1 41
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理缤沦,服務(wù)發(fā)現(xiàn)虎韵,斷路器,智...
    卡卡羅2017閱讀 134,637評(píng)論 18 139
  • HTML基礎(chǔ) 本文包括 HTML基本知識(shí)與結(jié)構(gòu) HTML常見標(biāo)簽 標(biāo)簽寫法與嵌套的討論 HTML缸废、CSS包蓝、java...
    廖少少閱讀 2,082評(píng)論 2 21
  • 仿佛夢(mèng)回少年,不知道是雨水還是淚水
    耍耍三郎77閱讀 193評(píng)論 0 1