Bagaimana untuk memperkenalkan imej dalam HTML (dua kaedah)

HTML (Hypertext Markup Language) ialah salah satu bahasa asas halaman Web Sama ada anda membina halaman statik atau halaman dinamik, HTML adalah bahagian yang sangat diperlukan. Gambar adalah salah satu elemen yang sangat penting dan biasa digunakan semasa membuat halaman web, jadi kita perlu tahu cara memperkenalkan gambar dalam HTML.

HTML boleh memperkenalkan berbilang jenis imej, seperti .gif, .jpeg, .png dan format lain. Sebelum memperkenalkan imej, kita perlu mencipta folder imej untuk dokumen HTML untuk menyimpan semua fail imej. Biasanya, folder gambar diletakkan dalam direktori yang sama dengan fail HTML supaya fail HTML boleh mengaksesnya dengan mudah.

Dalam HTML, kita boleh menggunakan dua kaedah berikut untuk merujuk imej ke dalam halaman web.

1. Menggunakan imej dalam teg guna. Berikut ialah sintaks asas teg:

Antaranya, atribut src digunakan untuk memberitahu penyemak imbas tempat untuk memuatkan imej, dan nama fail imej ialah nama fail imej (perhatikan bahawa laluan relatif harus diberikan di sini, dan bukan laluan mutlak).

<img src="image filename">

Sebagai contoh, jika folder imej dan fail HTML kami berada dalam direktori yang sama, dan kami ingin memperkenalkan imej bernama "example.gif" ke dalam halaman web, kod tersebut akan kelihatan seperti ini:

Ini akan memaparkan imej bernama "example.gif" pada halaman.

<img src="example.gif">

Jika kita ingin menambah lebih banyak atribut pada imej, seperti membiarkannya memaut ke halaman web lain, menambah tajuk, menukar lebar dan ketinggian, dsb., kita boleh menggunakan tag berikut:

Antaranya, atribut alt digunakan untuk menambah nama imej, yang akan dipaparkan apabila imej tidak dapat dipaparkan; daripada imej; atribut sempadan digunakan untuk menambah lebar sempadan digunakan untuk mengawal Penjajaran imej dengan teks lain.

<img src="image filename" alt="Image title" title="Image tooltip" height="number" width="number" border="number" align="left/right/center">

Sebagai contoh, jika kita ingin menambah imej dengan lebar 200 piksel dan ketinggian 100 piksel, dan memautkannya ke halaman lain, kod tersebut akan kelihatan seperti ini:

Gunakan CSS untuk mencipta imej di latar belakang

<a href="https://www.example.com/"><img src="example.gif" alt="Example Image" title="Click this image to go to example.com" height="100" width="200" border="1" align="center"></a>

2. Kami juga boleh menggunakan CSS (Cascading Style Sheets) untuk menambah imej di latar belakang halaman web, yang merupakan satu lagi kaedah biasa. Tidak seperti teg , kaedah ini menggunakan imej sebagai latar belakang keseluruhan halaman web dan bukannya sebagai elemen yang berasingan.

Berikut ialah cara menambah imej di latar belakang menggunakan CSS:

Antaranya, atribut imej latar belakang digunakan untuk memberitahu pelayar imej yang perlu dipaparkan di latar belakang. Ia juga boleh mempunyai pilihan tambahan seperti menetapkan warna latar belakang dan cara imej latar belakang dijubin.

body {
    background-image: url('image filename');
}

Sebagai contoh, jika kita mahu memaparkan imej bernama "example.gif" di latar belakang halaman web dan mengulanginya secara mendatar dan menegak, kod tersebut akan kelihatan seperti ini:

Ini akan menyebabkan latar belakang keseluruhan halaman diisi dengan imej "example.gif".

body {
    background-image: url('example.gif');
    background-repeat: repeat;
}

Apabila menggunakan kaedah ini, kita perlu memberi perhatian khusus kepada saiz imej untuk memastikan ia dipaparkan dengan betul pada jenis peranti yang berbeza.

Ringkasan

Sama ada anda menggunakan imej dalam teg atau menambah imej pada latar belakang menggunakan CSS, HTML menyediakan pelbagai cara untuk memperkenalkan imej. Apabila menggunakan kaedah ini, kita perlu memberi perhatian kepada saiz, laluan dan format imej untuk memastikan ia boleh dipaparkan dengan betul dalam halaman Web. Dengan menggunakan imej dalam HTML, kami boleh menambah elemen diperibadikan dengan mudah pada halaman web, menjadikannya lebih kaya dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan imej dalam HTML (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!