Bagaimana untuk menambah gambar ke html

Kini, dengan perkembangan Internet, reka bentuk web telah menjadi kemahiran penting. Dalam reka bentuk web, gambar selalunya merupakan elemen yang sangat penting. Oleh itu, cara menambah imej dalam HTML adalah pengetahuan asas yang perlu dikuasai oleh setiap pereka web. Artikel ini akan memperkenalkan teg imej asas, atribut imej dan format imej biasa dalam HTML, serta cara mengoptimumkan dan memetik imej.

1. Teg imej asas dan atribut

Dalam HTML, imej boleh disisipkan melalui teg Berikut ialah sintaks paling asas bagi teg

<img src="图片的url" alt="图片的描述">

Antaranya, atribut src diperlukan dan ia menentukan URL fail imej, iaitu alamat imej pada pelayan. Atribut alt adalah pilihan dan mentakrifkan teks alternatif yang dipaparkan apabila imej tidak boleh dimuatkan. Contohnya:

<img src="https://example.com/image.jpg" alt="这是一张图片">

Jika fail imej dan fail HTML berada dalam direktori yang sama, anda boleh menggunakan URL relatif:

<img src="image.jpg" alt="这是一张图片">

Anda juga boleh menggunakan laluan relatif ke nyatakan subdirektori tempat imej terletak:

<img src="images/image.jpg" alt="这是一张图片">

Selain atribut src dan alt, terdapat juga beberapa atribut yang biasa digunakan yang boleh digunakan untuk mengawal penampilan dan tingkah laku imej, seperti:

• atribut lebar dan ketinggian: nyatakan masing-masing Lebar dan tinggi imej, unit boleh menjadi piksel (px) atau peratusan (%).
• atribut sempadan: Tentukan lebar sempadan imej, unit boleh menjadi piksel (px).
• atribut sejajar: Menentukan penjajaran mendatar imej, nilai boleh ke kiri, kanan atau tengah.
• atribut tajuk: Tentukan teks gesaan yang dipaparkan apabila pengguna menuding tetikus pada imej.

Sebagai contoh, kod berikut boleh memusatkan imej dan menentukan lebar, tinggi dan jidar:

<img src="image.jpg" alt="这是一张图片" width="200" height="150" border="1" align="center">

2. Format imej biasa

Dalam web reka bentuk, terdapat tiga format imej yang biasa digunakan: JPEG, PNG dan GIF.

JPEG (juga dikenali sebagai JPG) ialah format mampatan lossy yang biasa digunakan untuk menyimpan foto dan imej kehidupan sebenar yang lain. Kualiti mampatan JPEG boleh dikawal dengan melaraskan nisbah mampatan Semakin tinggi nisbah mampatan, semakin buruk kualiti imej dan semakin kecil saiz fail.

PNG (Grafik Rangkaian Mudah Alih) ialah format mampatan tanpa kehilangan yang boleh memaparkan ketelusan dan kedalaman warna yang lebih tinggi serta sesuai untuk menyimpan grafik dan ikon peringkat piksel. PNG biasanya mempunyai saiz fail yang lebih besar daripada JPEG, tetapi mempunyai kualiti yang lebih baik.

GIF (Graphics Interchange Format) ialah format grafik berasaskan bitmap yang menyokong animasi dan ketelusan, serta boleh memampatkan berbilang gambar ke dalam satu fail. GIF biasanya digunakan untuk menyimpan gambar dinamik kecil, seperti emoji dan animasi kecil.

Apabila memilih format imej, anda perlu memutuskan format yang hendak digunakan berdasarkan jenis dan tujuan imej. Contohnya, apabila anda perlu menyimpan kecerunan warna dan butiran kaya dalam gambar, anda boleh menggunakan format JPEG dan apabila anda perlu menyimpan ketelusan dan kualiti yang lebih tinggi, anda boleh menggunakan format PNG.

3. Optimumkan dan petikan imej

Dalam reka bentuk web, mengoptimumkan dan memetik imej juga sangat penting. Mengoptimumkan imej boleh mengurangkan saiz fail dan membuat halaman dimuatkan dengan lebih cepat. Berikut ialah beberapa kaedah pengoptimuman biasa:

• Memampatkan imej: Kecilkan saiz fail tanpa menjejaskan kualiti imej.
• Pangkas imej: Simpan hanya bahagian imej yang diperlukan dan kecilkan saiz fail.
• Caching imej: Gunakan cache penyemak imbas untuk mengelakkan memuat turun imej yang sama berulang kali.
• Gunakan Sprite CSS: Gabungkan berbilang gambar kecil menjadi satu gambar besar, gunakan kedudukan latar belakang dalam CSS untuk memaparkan bahagian yang diperlukan dan kurangkan bilangan permintaan HTTP.

Apabila memetik imej, anda perlu memberi perhatian kepada perkara berikut:

• Laluan fail imej mesti betul: jika laluan salah, imej tidak boleh dimuatkan.
• Imej harus sepadan dengan tema halaman: imej yang tidak sesuai boleh mengacaukan halaman.
• Jangan membesarkan imej: Imej yang terlalu besar akan meningkatkan masa muat halaman.

Terdapat banyak cara untuk merujuk imej Sebagai contoh, anda boleh menggunakan URL relatif dan URL mutlak, atau anda boleh menggunakan teg asas untuk menentukan URL asas. Berikut ialah beberapa contoh kod:

Gunakan URL relatif:

<img src="../images/image.jpg" alt="这是一张图片">

Gunakan URL mutlak:

<img src="https://example.com/image.jpg" alt="这是一张图片">

Gunakan teg asas:

  


  <img src="images/image.jpg" alt="这是一张图片">

Ringkasan

Dalam reka bentuk web, gambar merupakan elemen yang sangat penting. Untuk merujuk dan mengoptimumkan imej dengan betul, kita perlu memahami teg imej asas dan atribut dalam HTML, serta memilih format imej dan kaedah pengoptimuman yang betul. Hanya dengan menguasai pengetahuan ini kita boleh mereka bentuk halaman web yang cantik dan cekap.

Atas ialah kandungan terperinci Bagaimana untuk menambah gambar ke html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!