imej HTML

Instance

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

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt="Pulpit rock" width="304" height="228">

</body>
</html>

Run Instance»

Klik "Run Butang " Contoh" untuk melihat contoh dalam talian

Contoh dalam talian

Contoh ini menunjukkan cara memaparkan imej dalam halaman web.

Instance

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

<p>
一个图像:
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="/upload/course/000/000/010/58046a41c6e3c115.gif" alt="Computer man" width="48" height="48"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

Sisipkan gambar dari lokasi berbeza

Contoh ini menunjukkan cara memaparkan gambar dari folder atau pelayan lain ke dalam halaman web.

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/58046b14a8b9f738.gif" alt="Google Chrome" width="33" height="32"><p>一个来自php中文网的图像:</p>
<img src="/upload/course/000/000/010/58046c29b47ef575.png" alt="php.cn" width="336" height="69">

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

(Lebih banyak contoh boleh didapati di bahagian bawah halaman ini.)

Imej HTML - Tag imej (<img>) dan atribut sumber (Src)

Dalam HTML, imej Ditakrifkan oleh teg <img>

<img> ialah teg kosong, yang bermaksud ia hanya mengandungi atribut dan tiada teg penutup.

Untuk memaparkan imej pada halaman, anda perlu menggunakan atribut sumber (src). src merujuk kepada "sumber". Nilai atribut sumber ialah alamat URL imej.

Sintaks untuk mentakrifkan imej ialah:

<img src="url" alt="some_text">

URL merujuk kepada lokasi di mana imej itu disimpan. Jika imej bernama "../style/images/boat.gif" terdapat dalam direktori imej www.php.cn, URLnya ialah http://www.php.cn/images/boat.gif.

Pelayar memaparkan imej dalam dokumen di mana sahaja teg imej muncul. Jika anda meletakkan teg imej antara dua perenggan, penyemak imbas akan memaparkan perenggan pertama dahulu, kemudian imej, dan akhirnya perenggan kedua.

HTML Imej - Atribut Alt

Atribut alt digunakan untuk menentukan rentetan teks boleh diganti yang disediakan untuk imej.

Nilai atribut teks gantian ditakrifkan pengguna.

<img src="../style/images/boat.gif" alt="Big Boat">

Apabila penyemak imbas tidak dapat memuatkan imej, atribut teks gantian memberitahu pembaca maklumat yang mereka hilang. Pada ketika ini, penyemak imbas akan memaparkan teks alternatif ini dan bukannya imej. Amalan yang baik untuk menambah atribut teks alt pada semua imej pada halaman ini membantu memaparkan maklumat dengan lebih baik dan sangat berguna untuk mereka yang menggunakan penyemak imbas teks sahaja.

Imej HTML - Tetapkan ketinggian dan lebar imej

Atribut ketinggian dan lebar digunakan untuk menetapkan ketinggian dan lebar imej.

Unit lalai bagi nilai atribut ialah piksel:

<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Petua: Adalah kebiasaan yang baik untuk menentukan ketinggian dan lebar imej anda. Jika imej mempunyai ketinggian dan lebar yang ditentukan, dimensi yang ditentukan akan dikekalkan apabila halaman dimuatkan. Jika saiz imej tidak dinyatakan, susun atur keseluruhan halaman HTML mungkin dimusnahkan apabila halaman dimuatkan.

Nota Asas - Petua Berguna:

Nota: Jika fail HTML mengandungi sepuluh imej, maka untuk memaparkan halaman dengan betul, ia memerlukan Memuatkan 11 fail. Memuatkan imej mengambil masa, jadi nasihat kami ialah: gunakan imej dengan berhati-hati.

Nota: Semasa memuatkan halaman, beri perhatian kepada laluan untuk memasukkan imej halaman Jika kedudukan imej tidak boleh ditetapkan dengan betul, penyemak imbas tidak boleh memuatkan imej, dan tag imej akan memaparkan imej yang rosak.

Lagi contoh

1. Susun imej

Contoh ini menunjukkan cara menyusun imej dalam teks.

Instance

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

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

2. Imej terapung
Contoh ini menunjukkan cara membuat imej terapung ke kiri atau kanan perenggan.

Instance

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

<p>
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

3. Tetapkan 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.php.cn/html/html-tutorial.html">
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.php.cn/html/html-tutorial.html">
<img border="0" src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

4. Cipta 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/58046db4ca85a572.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 instance dalam talian