Pengenalan terperinci tentang cara menambah imej dalam HTML

Dalam penghasilan laman web, gambar merupakan salah satu elemen yang sangat penting, menambahkan lagi kesan visual dan keindahan pada tapak web. Oleh itu, cara menambah gambar dalam HTML telah menjadi isu penting. Artikel ini akan memperkenalkan pembaca kepada cara menambah imej dalam HTML secara terperinci, dengan harapan dapat membantu pembaca menguasai kemahiran pengeluaran tapak web dengan lebih baik.

1. Sintaks rujukan imej asas

Dalam HTML, menambah imej sebenarnya menambah sintaks rujukan imej pada dokumen HTML. Dalam HTML, gunakan teg untuk merujuk imej. Sintaks asas adalah seperti berikut:

Antaranya, atribut src mewakili alamat gambar yang dirujuk , yang boleh menjadi setempat Laluan imej, yang juga boleh menjadi alamat imej yang menghala ke pelayan jauh. Atribut alt mewakili maklumat perihalan imej Jika imej tidak dapat dipaparkan secara normal atas sebab tertentu, maklumat atribut alt akan menggantikan maklumat paparan asal imej.

Sebagai contoh, jika anda ingin menambah gambar bernama example.png ke HTML, dan gambar itu berada dalam folder imej di bawah C: cakera keras tempatan, maka kod yang menggunakan sintaks rujukan gambar adalah sebagai berikut:

Dalam HTML, terdapat beberapa yang lain atribut untuk menggunakan imej, seperti lebar mewakili lebar gambar, ketinggian mewakili ketinggian gambar, sempadan mewakili saiz sempadan gambar, dsb. Melalui sifat ini, anda boleh mempunyai lebih banyak tetapan dan kawalan ke atas imej.

2. Laluan relatif dan laluan mutlak

Dalam perkara di atas, kami menunjukkan kaedah merujuk imej dengan menggunakan laluan mutlak dalam atribut src. Malah, dalam pengeluaran tapak web, kami juga boleh menggunakan laluan relatif untuk merujuk imej Laluan relatif adalah relatif kepada laluan dokumen HTML. Ia boleh menjadikan memetik imej di laman web lebih mudah dan lebih mudah.

Terdapat dua jenis laluan relatif, iaitu laluan relatif mutlak dan laluan relatif relatif. Antaranya, laluan relatif mutlak bermakna apabila merujuk imej, ia mula-mula melompat ke direktori lain, dan kemudian membuat rujukan relatif berdasarkan direktori. Laluan relatif dirujuk relatif kepada dokumen semasa.

Ambil direktori fail sebagai contoh Jika terdapat direktori fail berikut:

home/

|____ index.html
|____ images/
        |____ pic1.jpg
        |____ pic2.jpg

Anda ingin merujuk pic1.jpg di bawah folder imej. dalam index.html Gambar boleh dirujuk melalui laluan relatif, iaitu, menggunakan ../ untuk mewakili direktori peringkat atas Kodnya adalah seperti berikut:

3. Format imej

Dalam pengeluaran tapak web sebenar, format imej yang biasa digunakan termasuk JPEG, PNG dan GIF. Berbanding dengan dua format lain, format JPEG mempunyai nisbah mampatan yang lebih tinggi, yang boleh menjimatkan ruang storan imej. Format PNG menyokong latar belakang lutsinar dan tidak mengalami kekaburan dan herotan imej format JPEG. Format GIF menyokong animasi dan latar belakang lutsinar, tetapi kedalaman warnanya lebih rendah daripada format JPEG dan PNG.

Untuk menjadikan halaman dimuatkan dengan lebih pantas dan meningkatkan pengalaman pelawat, pembangun tapak web perlu mempertimbangkan saiz dan kualiti imej, kelajuan pemuatan, prestasi dan faktor lain apabila memilih format imej.

4. Ringkasan

Dalam artikel ini, kami memperkenalkan secara terperinci cara menambah imej dalam HTML, dan memperkenalkan format imej, laluan relatif dan laluan mutlak kepada pembaca. Gambar adalah salah satu elemen yang sangat penting dalam penghasilan laman web. Mencipta imej yang cantik boleh menambahkan banyak daya hidup dan menarik kepada tapak web, jadi menguasai kemahiran menambah imej dalam HTML adalah bahagian yang sangat penting untuk pembuat laman web.

Atas ialah kandungan terperinci Pengenalan terperinci tentang cara menambah imej dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!