imej HTML
Imej HTML - Tag imej (<img>)
Dalam HTML, imej diwakili oleh <img>
<img> ialah teg kosong, yang bermaksud ia hanya mengandungi atribut dan tiada teg penutup.
Imej HTML - Atribut Sumber (Src)
Untuk memaparkan imej pada halaman, anda perlu menggunakan Atribut Sumber (src) . src merujuk kepada "sumber". Merujuk kepada lokasi di mana imej disimpan,
Jika imej dan teks HTML berada dalam direktori yang sama: contohnya index.html dan img.jpg
Penulisan: <img src= "img.jpg">
Gambar dan HTML tidak berada dalam direktori yang sama: terdapat dua situasi:
1 Gambar img.jpg berada dalam imej folder dan indeks .html dan folder imej berada dalam direktori yang sama
Penulisan: <img src="images/img.jpg">
2 imej, index.html berada dalam folder pengawal, imej Dalam direktori yang sama dengan folder pengawal
Penulisan: <img src="../images/img.jpg">
Jika sumbernya daripada Internet, perlu Gunakan laluan mutlak
untuk menulis: <img src="http://www.baidu.com/pic/img.jpg">
Imej HTML - Atribut Alt
Atribut alt digunakan untuk menentukan rentetan teks boleh diganti yang disediakan untuk imej.
Nilai atribut teks gantian ditakrifkan pengguna.
<img src="1.jpg" alt="Paparan apabila gambar tidak boleh dipaparkan">
Apabila penyemak imbas tidak dapat memuatkan imej, atribut teks gantian memberitahu pembaca maklumat yang mereka tiada. Pada ketika ini, penyemak imbas akan memaparkan teks alternatif ini dan bukannya imej. Adalah amalan yang baik untuk menambahkan 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 (tinggi) dan lebar (lebar) digunakan untuk menetapkan ketinggian dan lebar imej.
Unit lalai nilai atribut ialah piksel:
<img src="../style/images/pulpit.jpg" alt="Batu mimbar" width= "304" height="228">
Petua: Adalah satu tabiat yang baik untuk menentukan ketinggian dan lebar imej. Jika imej mempunyai ketinggian dan lebar yang ditentukan, dimensi yang ditentukan akan dikekalkan apabila halaman dimuatkan. Jika saiz imej tidak dinyatakan, reka letak keseluruhan halaman HTML mungkin dimusnahkan apabila memuatkan halaman,
Nota Asas
Nota: Jika fail HTML mengandungi sepuluh imej, untuk memaparkannya dengan betul Halaman ini perlu 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.
Contoh
Tambahkan imej latar belakang pada halaman web kami
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body background="http://imglf0.ph.126.net/1EnYPI5Vzo2fCkyy2GsJKg==/2829667940890114965.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面,图像会进行重复。</p> </body> </html>
Jalankan program dan lihat jika terdapat sebarang perubahan
Contoh
Contoh ini menunjukkan bagaimana Ubah saiz gambar kepada saiz yang berbeza.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="50" height="50"> <br /> <img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="100" height="100"> <br /> <img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="200" height="200"> <p>通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。</p> </body> </html>
Jalankan program dan lihat
Contoh
Gunakan gambar untuk membuat hiperpautan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>创建图片链接: <a href="http://www.php.cn/"> <img src="http://img3.redocn.com/20100401/Redocn_2010022518194991.jpg" alt="HTML 教程" width="100" height="100"></a></p> </body> </html>
Jalankan program dan klik pada gambar untuk melihat
Contoh
Contoh ini menunjukkan cara untuk tukar imej biasa Tetapkan sebagai peta imej
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化。</p> <a href=""> <img src="http://p11.qhimg.com/t010fae31f5653bffe7.jpg" ismap /> </a> </body> </html>
Jalankan dan lihat
Teg imej HTML
标签 | 描述 |
<img> | 定义图像。 |
<map> | 定义图像地图。 |
<area> | 定义图像地图中的可点击区域。 |
Cari gambar dan letakkan dalam direktori yang ditetapkan anda dan cuba masukkan ke dalam halaman web anda