masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492223 permainan