Berbicara tentang gambar, saya yakin semua orang sudah mengenalnya, karena dalam kehidupan dan penggunaan kita sehari-hari, kita selalu dapat melihat gambar, dan gambar lebih ekspresif dan menarik daripada kata-kata bila kita menggunakan gambar dengan tepat, kita dapat membuat orang menjadi halaman web lebih indah dan intuitif, terutama tampilan pertama halaman web sangatlah penting.
1. atribut src
Simbol: img
Fitur: label tunggal
Kode:
<!doctypehtml><html><head><metacharset=utf-8><title>Gambar sisipan HTML</title></head><body><p>Gambar yang akan ditampilkan:</p><imgsrc=fish .jpg></tubuh></html>
Ringkasan: Penyisipan gambar dapat diselesaikan dengan memasukkan nama atribut src pada tag img, dimana nilai atribut src adalah "nama file" atau "path./nama file". file yang sama dengan proyek html Tertangkap! Bagian ini akan memberikan penjelasan utama.
2. Atribut lainnya
3. penggunaan alternatif
Deskripsi: Ketika gambar tidak dapat ditampilkan karena alasan tertentu, nilai atribut yang sesuai dengan atribut alt akan ditampilkan.
Kode:
<!doctypehtml><html><head><metacharset=utf-8><title>Gambar sisipan HTML</title></head><body><p>Gambar yang akan ditampilkan:</p><imgsrc=potato .jpgwidth=500alt=Kentang></body></html>
Ditampilkan di bawah ini:
4. Penggunaan judul
Catatan: Jika gambar ditampilkan secara normal, ketika mouse diarahkan ke gambar, konten yang sesuai dengan nilai atribut dari atribut judul akan ditampilkan.
Kode:
<!doctypehtml><html><head><metacharset=utf-8><title>Gambar sisipan HTML</title></head><body><p>Gambar yang akan ditampilkan:</p><imgsrc=fish .jpgwidth=500alt=fish title=Ini adalah ikan yang dimasak></body></html>
Efek: Jika gambar dapat ditampilkan secara normal, jika Anda mengarahkan mouse ke gambar tersebut, akan muncul tulisan "Ini adalah ikan matang".
Ditampilkan seperti yang ditunjukkan:
5. Karakteristik atribut
Karakteristik atribut tag gambar berlaku untuk sebagian besar tag HTML:
1. Atribut tag dituliskan di dalam tag awal.
2. Beberapa atribut bisa ada di tag secara bersamaan
3. Pisahkan atribut dengan spasi.
4. Nama tag dan atribut harus dipisahkan dengan spasi.
5. Tidak ada urutan antar atribut.
6. Penjelasan jalur dan penyisipan gambar lintas tingkat
(1) Pengenalan jalur
1. Jalan mutlak
Posisi absolut di bawah direktori dapat langsung mencapai lokasi target, biasanya mengacu pada jalur yang dimulai dari huruf drive atau URL lengkap. Dalam penyisipan gambar html, jalur absolut umumnya tidak digunakan, dan jalur relatif lebih umum digunakan.
2. Jalur relatif
Proses pencarian file target mulai dari file saat ini sering digunakan.
(2) Sisipkan gambar melintasi level
1. Tingkat yang sama
Jika gambar yang akan disisipkan sejajar dengan file html yang dibuat, maka dapat langsung disisipkan. Nilai atribut src adalah "nama file target.akhiran" atau "./nama file target.akhiran". Saat menggunakan kompiler untuk membuat kode, jika Anda memasukkan huruf pertama dari nama file dengan level yang sama, kompiler akan sering kali secara otomatis melompat keluar dari konten lainnya.
Tampilan kode: (dengan asumsi gambar diberi nama gambar dan dalam format jpg)
<imgsrc=gambar.jpg> atau <imgsrc=./gambar.jpg>
2. Bawahan
Jika file html berada pada level yang sama dengan folder file dan gambar yang akan disisipkan berada pada folder file, maka memasukkan gambar tersebut ke dalam file html merupakan operasi akses gambar lintas level. Kodenya adalah sebagai berikut:
<imgsrc=file/gambar.jpg>
3. Unggul
Jika ada gambar di folder total dan folder tes lainnya, dan file html ada di folder tes, maka memasukkan gambar tersebut ke dalam file html milik mengakses folder tingkat atas. Kodenya adalah sebagai berikut:
<imgsrc=../gambar.jpg>
Jika Anda perlu mengakses gambar di folder dua tingkat atas, kodenya adalah:
<imgsrc=../../gambar.jpg>
4. Aplikasi yang komprehensif
Jika terdapat dua folder yaitu file1 dan file2, file1 menyimpan file html, dan file2 menyimpan flag gambar untuk disisipkan dalam format jpg, maka kode untuk menyisipkan gambar flag ke dalam file html adalah sebagai berikut:
<imgsrc=../file2/flag.jpg>
(Kembali ke level sebelumnya terlebih dahulu, lalu kunjungi level berikutnya)