ຕາມ HTML <img> ອັບຍາກ
定义和用法
<img>
标签用于在 HTML 页面中嵌入图像。
从技术上讲,实际上并没有将图像插入到网页中,而是将图像链接到了网页。<img>
标签创建了一个容器,用于引用图像。
<img>
标签有两个必需的属性:
注意:另外,始终要指定图像的宽度和高度。如果未指定宽度和高度,则在加载图像时页面可能会闪烁。
提示:如需将图像链接到另一个文档,只需将 <img>
标记嵌套在 标签内(请参阅下面的例子)。
另请参阅:
HTML 教程:HTML ພາບ
HTML DOM 参考手册:Image 对象
CSS 教程:设置图像的样式
延伸阅读:如何正确地使用图像
实例
例子 1
在下面的例子中,我们在页面中插入一幅 CodeW3C.com 的工程师在上海鲜花港拍摄的郁金香照片:

例子 2
另一个如何插入图像的实例:
提示:页面底部提供更多实例。
属性
属性 | 值 | 描述 |
---|---|---|
alt | 文本 | 规定图像的替代文本。 |
crossorigin |
|
允许使用来自允许跨域访问的第三方网站的图像与画布(canvas)一起使用。 |
height | ປະກອບຕົວກຳນົດ. | ກຳນົດຄວາມຫຼາຍຂອງຮູບພາບ. |
ismap | ismap | ກຳນົດຮູບພາບວ່າເປັນຮູບພາບທີ່ຕິດຕັ້ງທີ່ທີ່ບໍລິຫານທີ່ຫຼັງ. |
loading |
|
ກໍານົດວ່າບັນດາຄົນນໍາໃຊ້ບັນດາຄົນນໍາໃຊ້ຄວນຊອກຫາຮູບພາບທັນທີຫຼືຊັກຊ້າຊອກຫາຮູບພາບບັນດາຄວນຕາມເງື່ອນໄຂບັນດາຄວນທີ່ມີຢູ່。 |
longdesc | URL | ກຳນົດ URL ທີ່ຂອດອອກຕາມຮູບພາບທີ່ລະອຽດຫຼາຍຫຼາຍ。 |
referrerpolicy |
|
ກຳນົດຂໍ້ມູນຫຼັກການທີ່ຈະນຳໃຊ້ເມື່ອການຮັບຮູບພາບ。 |
sizes | ຂະໜາດ | ກຳນົດຂະໜາດຮູບພາບສຳລັບຖະແນນຄວາມຈັດການບ່ອນພາບຂອງບັນດາເວັບໄຊທີ່ແຕກຕ່າງກັນ。 |
src | URL | ກຳນົດຖະນົນຮູບພາບ。 |
srcset | URL-list | ກຳນົດລາຍການບັນທຶກສາຍອາກາດທີ່ນຳໃຊ້ໃນຫຼາຍການ. |
usemap | #mapname | ກຳນົດຮູບພາບຈາກຄອມພິວເຕີບ. |
width | ປະກອບຕົວກຳນົດ. | ກຳນົດລະດັບວົງງານຂອງຮູບພາບ. |
ຜົນຜະສານທົ່ວໄປ
<img>
ອີກຕົວຢ່າງທີ່ອານຸພາບ ຜົນຜະສານທົ່ວໄປໃນ HTML。
ຜົນຜະສານຂອງເຫດການ
<img>
ອີກຕົວຢ່າງທີ່ອານຸພາບ ຜົນຜະສານຂອງເຫດການໃນ HTML。
ຫຼາຍຕົວຢ່າງອື່ນ
ຕົວຢ່າງ 3
ປະຕິບັດຮູບພາບ (ນຳໃຊ້ CSS):
<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
ເພີ່ມບານຂອງຮູບພາບ (ນຳໃຊ້ CSS):
<img src="flower.gif" alt="[#1#]" style="border:5px solid black">
ຕົວຢ່າງ 5
ເພີ່ມຂ້າງຂວາຂອງຮູບພາບ (ນຳໃຊ້ CSS):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">
ຕົວຢ່າງ 6
ເພີ່ມຂ້າງສູກຂອງຮູບພາບ (ນຳໃຊ້ CSS):
<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 ແມ່ນສາມາດສະແດງຮູບພາບໃນອີກຂອງສະບັບຄູ່ມູນຄົນປະກອບເພື່ອສະແດງຄວາມຊັບຊ້ອນ (ຮູບພາບຂັ້ນຕົ້ນ) ຫຼືສະແດງຄວາມຊັບຊ້ອນຄົນປະກອບເພື່ອດາວໂຫຼດຄົນປະກອບເພື່ອດາວໂຫຼດຄົນປະກອບເພື່ອດາວໂຫຼດ
ການເພີ່ມຮູບພາບໃນເນື້ອໃນເອກະສານເພື່ອສະແດງຄວາມຊັບຊ້ອນ (ບັນດາອອກພາບພາບສະແດງການຍ້າຍຍ້າຍທີ່ມີຄວາມຫຼິ້ນສະເພາະ ພາບຖານ ຄວາມສັບສຳລັບຄວາມສັນຍາວິດທະຍາອານາຈັກປະເພດມະຫາຊົນ ແລະ ອື່ນໆ) ຈະເຮັດໃຫ້ເອກະສານມີຄວາມຫຼິ້ນສະແດງຫຼວງຫຼາຍ ແລະຫຼາຍກວ່າຄວາມສົມດູດ ແລະສາມາດເບິ່ງຄືກັບການຫຼິ້ນຫຼວງຫຼາຍ ແລະຄວາມສັນຍາວິດທະຍາອານາຈັກປະເພດມະຫາຊົນ ແລະຄວາມສາມາດເບິ່ງຄືກັບການຫຼິ້ນຫຼວງຫຼາຍ
ແຕ່ວ່ານຳໃຊ້ຮູບພາບເກີນກວ່າຄວາມຈຳເປັນ ສະບັບຂອງເອກະສານຈະກາຍເປັນສະບາຍອັນອິດ ຂັດແຍ່ງ ແລະບໍ່ສາມາດອ່ານໄດ້ ແລະຜູ້ໃຊ້ຈະຕ້ອງລໍຖ້າເວລາຫຼາຍຂຶ້ນໃນການດາວໂຫຼດແລະການຕິດຕາມເວັບໄຊດັ່ງກ່າວ
ບັນດາບົດຄວາມດ້ານດ້ານດ້ານຫຼັງຄື: ບົດຄວາມສະເພາະທີ່ໃຊ້ໃນ Web GIF ແລະ JPEG ແລະວິທີການນຳໃຊ້ຮູບພາບທີ່ຖືກການກະຈາຍຢ່າງຫຼວງຫຼາຍ:
ການການປະກາດ CSS ຄົນປະກອບ
ທົດສະບາຍຫຼາຍກົດແບບຈະສະແດງຄູ່ມູນຈາກຄູ່ມູນສະຫຼົກສະເພາະ <img>
ບັນດາບັນລຸ:
img { display: inline-block; }
ການສະໜັບສະໜູນບັນດາບັນດາບັນລຸ
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
ສະໜັບສະໜູນ | ສະໜັບສະໜູນ | ສະໜັບສະໜູນ | ສະໜັບສະໜູນ | ສະໜັບສະໜູນ |