<img>


HTML <img> Teg

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<img src="/upload/course/000/000/010/580977768651f670.gif" alt="Smiley face" width="42" height="42">

</body>
</html>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Sokongan Penyemak Imbas

1000.png

Semua penyemak imbas utama menyokong teg <img>

Takrifan teg dan arahan penggunaan

<img> Teg

<img> mempunyai dua atribut yang diperlukan: src dan alt.

Nota: Secara teknikal, imej tidak dimasukkan ke dalam halaman HTML, tetapi dipautkan kepadanya. Teg <img> mencipta ruang letak untuk imej yang dirujuk.

Petua: Tambahkan pautan ke dokumen lain dengan meletakkan teg <img>

Perbezaan antara HTML 4.01 dan HTML5

Atribut berikut tidak disokong dalam HTML5: align, border, hspace, longdesc, vspace.

Dalam HTML 4.01, atribut berikut: align, border, hspace, vspace tidak digunakan lagi.

Perbezaan antara HTML dan XHTML

Dalam HTML, teg <img> tidak mempunyai teg penutup.

Dalam XHTML, teg <img>

Atribut

Baharu: Atribut baharu dalam HTML5.

属性值描述
aligntop
     bottom
     middle
     left
     right		HTML5 不支持。HTML 4.01 已废弃。    规定如何根据周围的文本来排列图像。
alttext规定图像的替代文本。
borderpixelsHTML5 不支持。HTML 4.01 已废弃。    规定图像周围的边框。
crossoriginNewanonymous
use-credentials		设置图像的跨域属性
heightpixels规定图像的高度。
hspacepixelsHTML5 不支持。HTML 4.01 已废弃。    规定图像左侧和右侧的空白。
ismapismap将图像规定为服务器端图像映射。
longdescURLHTML5 不支持。HTML 4.01 已废弃。    指向包含长的图像描述文档的 URL。
srcURL规定显示图像的 URL。
usemap#mapname将图像定义为客户器端图像映射。
vspacepixelsHTML5 不支持。HTML 4.01 已废弃。    规定图像顶部和底部的空白。
widthpixels规定图像的宽度。


Atribut global

<img> teg menyokong atribut global HTML.

Atribut acara

<img> teg menyokong atribut acara HTML.

Examples

Cubalah - Contoh

Sisipkan gambar dari lokasi berbeza
Contoh ini menunjukkan cara memaparkan gambar dari folder atau pelayan lain untuk laman web tersebut.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>插入来自一个文件夹的图片:</p>
<img src="/upload/course/000/000/010/5809788beaca7942.gif" alt="Stickman" width="24" height="39">

<p>插入来自一个网站的图片::</p>
<img src="/upload/course/000/000/010/58043146a1da1979.jpg" alt="Lamp" width="15" height="15">

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Membuat Pautan Imej
Contoh ini menunjukkan cara menggunakan imej sebagai pautan.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
一个图片链接:
<a href="http://www.w3cschool.cc">
<img src="/upload/course/000/000/010/5809791e1eef2805.gif" alt="Go to W3CSchool.cc!" width="42" height="42" border="0">
</a>
</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Membuat Peta Imej
Contoh ini menunjukkan cara membuat peta imej dengan kawasan boleh klik. Setiap medan ini adalah hiperpautan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/upload/course/000/000/010/580979883b949162.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Artikel Berkaitan

Tutorial HTML: Imej HTML

Manual Rujukan HTML DOM: Objek Imej