ဟယ်င်လ် အင်တာမ <img> ချက်
定义和用法
<img>
标签用于在 HTML 页面中嵌入图像。
从技术上讲,实际上并没有将图像插入到网页中,而是将图像链接到了网页。<img>
标签创建了一个容器,用于引用图像。
<img>
标签有两个必需的属性:
အခြေအနေ:အခြား အချက်အလက် တွင် ပုံ အကြီးအကြွင်း ကို သတ်မှတ်ပါသည်。
အဆိုပါအတွက်:အခြား အချက်အလက် တွင် ပုံ ကို အခြား အချက်အလက် ကို လက်ခံပါသည်。 <img>
အခြား အချက်အလက် ပြုစုလုံး <a> အခြား အချက်အလက် တွင် (အောက်ပါ အကျိုးသက် ကြည့်ပါ)。
အခြား ကြည့်ရန်:
HTML စာကြောင်းHTML ဂုဏ်ပုံ
HTML DOM ကိုးကွယ်သုံး စာကြောင်းImage အိုက်အိုက်အို
CSS စာကြောင်းပုံ အော်ဒီစက် ကို သတ်မှတ်ပါသည်。
အခြား ကြည့်ရန်:ပုံ ကို အခ်န်အချင်း သုံးစွဲပုံ
အကျိုးသက်
အမှတ် 1
အောက်ပါ အချက်အလက် တွင် ကျွန်တော် သည် ဘော်လ်ဝီ3ဝီစမေးကွန် က ရန်ကုန် ပန်းခြံ တွင် ရိုက်ပြသော နေင်းပြုတ် ပုံ ကို စာမျက်နှာ တွင် ထိန်းချိန်ပါသည်:
<img src="tulip.jpg" alt="ရန်ကုန် ပန်းခြံ - နေင်းပြုတ်" />

အမှတ် 2
ပုံ ထိန်းချိန် အပြုအမူ တစ်ခု ပြောကြားပါသည်:
<img src="dancer.png" alt="ပန်းခြံ အောင်ပြန်" width="500" height="749">
အဆိုပါအတွက်:စာမျက်နှာ နောက်ပိုင်း တွင် အများအပြား အကျိုးသက် ပြောကြားပါသည်。
ဗဟုသုတ
ဗဟုသုတ | အတ္ထုပတ္တိ | ဖော်ပြ |
---|---|---|
alt | စာ | ပုံ အား အားပေးသော စာကြောင်း ကို သတ်မှတ်ပါသည်。 |
crossorigin |
|
အခြား အားကစား အားကစား လမ်းကြောင်း ကို အသုံးပြုသည် သုံးစွဲသင့်လာကြား သုံးစွဲသင့်လာကြား သတ်မှတ်ပါသည်。 |
height | ပမာဏ | ပုံ အမြင့် ကို သတ်မှတ်ပါသည်。 |
ismap | ismap | ပုံ ကို ဆိုင်ချက် ပုံမှန် ပုံ ကို သတ်မှတ်ပါသည်。 |
loading |
|
ဘရာဇက်တန်နာ က ပုံ ကို အမြန်မြန် သုံးစွဲသင့်လာကြား သို့မဟုတ် သုံးစွဲသင့်လာကြား မဟုတ် အခြား အခြေအနေ သို့ ကူးပြောင်းသင့်လာကြား သတ်မှတ်ပါသည်。 |
longdesc | URL | ပုံ အသေးစိတ်ကို ဖော်ပြသော URL ကို သတ်မှတ်ပါသည်。 |
referrerpolicy |
|
ပုံ ကို ရယူရာ သုံးလျှင် အသုံးပြုသည် သတ်မှတ်သော ကိုးကွယ်သည်。 |
sizes | အရွယ် | မတူညီ စာမျက်နှာ ပစ်ပုံ လမ်းကြောင်း ပုံအရွယ် ကို သတ်မှတ်ပါသည်。 |
src | URL | ယခု ပုံ လမ်းကြောင်း ကို သတ်မှတ်ပါသည်。 |
srcset | URL-list | အခြား အကြောင်းကြောင်း များ တွင် အသုံးပြုရန် ယဉ်းပုံ ဖိုင် စာရင်း: |
usemap | #mapname | ယဉ်းပုံ ကို အသုံးပြုရာ အကောင်းကျသော အင်တာနက် အချက်အလက်: |
width | ပမာဏ | ယဉ်းပုံ အကျယ်အဝန်း ကို အဆိုပါ: |
ကွပ်ကဲ့အချက်
<img>
အချက် HTML တွင် ကွပ်ကဲ့အချက်。
ဖြစ်ပေါ်စေရန် လက်တွေ့အချက်
<img>
အချက် HTML တွင် ဖြစ်ပေါ်စေရန် လက်တွေ့အချက်。
ပိုမိုအကြောင်းကြောင်း
အကြောင်းကြောင်း 3
ယဉ်းပုံ ချိတ်ဆက်ရန်:
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">
အကြောင်းကြောင်း 4
ယဉ်းပုံတွင် အကြားလက်ပစ်ရန်:
<img src="flower.gif" alt="[#1#]" style="border:5px solid black">
အကြောင်းကြောင်း 5
ယဉ်းပုံတွင် အရှေ့ အနောက် အစား အသုံးပြုရန်:
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">
အကြောင်းကြောင်း 6
ယဉ်းပုံတွင် အထက် အနား အရှေ့ အနောက် အစား အသုံးပြုရန်:
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">
အကြောင်းကြောင်း 7
အခြားဖြင့် သို့မဟုတ် အခြားဝတ္ထုပိုင်းမှ တူးပြီး ယဉ်းပုံများ ထည့်သွင်းရန် ဘယ်လိုဖြစ်သလဲ:
<img src="/photo/flower.gif" alt="Flower" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">
အမှတ် 8
ဝတ္ထုကို အသင်းဖမ်းတတ် တာ
<a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a>
အမှတ် 9
ဝတ္ထုကို စိတ်အားသို့ ပြုလုပ်တတ် ဝတ္ထု၏ အချို့သော အခြေအနေများ ကို စိတ်အားသို့ ပြုလုပ်တတ်
<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map>
နောက်ထပ် စာတမ်းများ - ဝတ္ထုကို အခ်န်အခ်န် အသုံးပြုတတ် တာ
HTML နှင့် XHTML အရေးပါသော အရေးပါ အကျိုးသမားများထဲမှ တစ်ခု ဖြစ်သည် မှာ ဝတ္ထု၏ အချို့သော အကျယ်အဝန်း မှ ဝတ္ထုကို ဖြည့်စွက်တတ် ဝတ္ထုကို ဝတ္ထု၏ အချို့သော အကျယ်အဝန်း မှ ဖြည့်စွက်တတ်
ဝတ္ထု၏ အချို့သော အခြေအနေများ ကို ဝတ္ထု၌ ထည့်သွင်းတတ် ဝတ္ထု၏ အချို့သော အခြေအနေများ ကို ဝတ္ထု၌ ထည့်သွင်းတတ်
ဝတ္ထု၏ အချို့သော ပုံများ အသုံးပြုတတ် လျှင် ဝတ္ထုသည် ဖျက်ကျသွား ပြီး အလွန် အပြင်းအထန် အပြင် စာတမ်းကြည့်ချင် သော သုံးစွဲသူများ အတွက် အလွန် အချိုးချိုး ဖြစ်ပေါ်လာ တတ်
အောက်ပါ ဆောင်းပါးကို ဖတ်ပါ ဝတ္ထု၏ ဝတ္ထု အချို့သော ပုံများ ကို အသိအဖွယ်ဖွယ် ပြုလုပ်တတ် ဝတ္ထု၏ အချို့သော ပုံများ ကို ဖော်ပြတတ် ဝတ္ထု၏ အချို့သော ပုံများ ကို ဖော်ပြတတ်
အခြေခံ ပလာဟ် အစီအစဉ်
အားလုံးသော ဘရပ်သူများ သုံးစွဲသော အခြေခံ အတိုင်း ဖော်ပြတတ် <img>
အရာပါဝင်သည်:
img { display: inline-block; }
ဘာသာပြန်လည် ကူညီ
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ |