HTML ialah dokumen teks biasa yang membenarkan berbilang format bahasa pengaturcaraan untuk melaksanakan aplikasi berasaskan web, yang menggunakan tag untuk menerangkan kefungsian halaman web. Satu teg penting tersebut ialah teg imej yang membolehkan pembangun memasukkan fail imej ke dalam kod untuk memaparkan imej masing-masing pada halaman web. Sintaks ini ialah , dengan ‘imej’ ialah nama teg dan ‘src=’ harus mempunyai URL imej yang diperlukan diberikan kepadanya. Dalam topik ini, kita akan belajar tentang Tag Imej HTML.
Anda boleh menambah IMG pada halaman HTML dengan menggunakan tag dalam dokumen HTML; inilah sintaksnya :
<img src= enter the IMG URL here >
Di sini, IMG memberitahu penyemak imbas bahawa teg adalah mengenai menambah IMG pada dokumen dan "src=" menentukan dari mana untuk memuat turun imej.
Kod:
<!DOCTYPE html> <html> <head> <title> Example HTML IMG Tag </title> </head> <body> <img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg" alt = " Software development icon " height = " 150 " width = "140" /> </body> </html>
Output:
Satu fakta menarik tentang halaman HTML ini ialah apabila anda menggunakan teg IMG, imej tidak dimasukkan ke dalam halaman web tersebut; sebaliknya, ia mewujudkan ruang penahanan tempat imej diletakkan setelah dimuat turun.
Sokongan dan Keserasian Penyemak Imbas dengan Atribut
Seperti yang anda boleh jangkakan, semua pelayar moden menyokong imej dan penggunaan tag IMG. Kadangkala, penyemak imbas mudah alih akan mengubah saiz imej agar muat pada skrin jika imej tidak ditetapkan sebagai responsif.
Mengenai keserasian atribut dengan HTML 4.01 dan HTML5 yang lebih baharu, kebanyakan teg akan berfungsi, kecuali untuk penjajaran, jidar, hspace dan ruang, yang langsung tidak disokong dalam yang terakhir.
Imej sebagai pautan:
Kadangkala, anda akan mahu imej berfungsi sebagai pautan ke halaman lain. Anda boleh menyelesaikannya dengan menambahkan teg IMG di dalam tag.
Menggunakan sifat CSS imej latar belakang dalam elemen Badan halaman, anda boleh menetapkan imej sebagai gambar latar belakang halaman web.
<body style="background-image:url(‘car.jpg');"> <h1>Background Image </h1> </body>
Kami boleh menggunakan sifat CSS "terapung" untuk menetapkan imej terapung di dalam mana-mana dalam tetingkap penyemak imbas. Mari lihat contoh yang akan membantu anda memahami.
<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">
Di sini, imej kereta akan terapung di sebelah kanan teks.
<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">
Di sini, imej kereta akan terapung ke sebelah kiri teks.
Berikut ialah atribut tag imej.
Nilai Berkemungkinan: Atas, Bawah, Tengah, Kiri atau Kanan.
Atribut alight digunakan untuk menentukan penjajaran gambar pada halaman web.
Jenis nilai: Teks
Alt digunakan untuk menentukan teks alternatif gambar halaman web. Dalam kes di mana paparan IMG adalah mustahil, penyemak imbas memaparkan teks ini kepada pengguna. Enjin carian seperti Google dan Bing menggunakan teks alt ini untuk menunjukkan hasil dalam Carian Imej.
Jenis Nilai: Piksel
Ia digunakan untuk mencipta sempadan ketebalan yang ditentukan pengguna di sekeliling gambar. Ia tidak berfungsi dalam HTML5.
Jenis Nilai: Kelayakan Penggunaan Tanpa Nama
Atribut ini digunakan apabila kami ingin menentukan cara foto silang asal harus ditangani. Ini kebanyakannya digunakan dalam kes di mana unsur kanvas apl web JavaScript digunakan.
Jenis Nilai: Peratusan atau Piksel
Yang ini digunakan untuk menandakan ketinggian imej dalam halaman web HTML.
Jenis Nilai: Piksel
Tidak disokong dalam HTML5, atribut hspace digunakan untuk menentukan dalam piksel berapa banyak ruang putih yang perlu ditambahkan di kiri dan kanan imej yang disisipkan.
Jenis nilai: URL Halaman
ismap yang kami gunakan untuk mentakrifkan imej tersebut sebagai peta imej sebelah pelayan. Apabila pengguna mengklik (atau mengetik) di dalam imej, penyemak imbas menghantar koordinat klik (atau ketik) ke pelayan web sebagai URL.
Jenis Nilai: URL
Longdesc memberikan penerangan terperinci tentang imej dengan menggunakan URL. URL dalam atribut digunakan sebagai penerangan imej.
Jenis Nilai: URL
src bermaksud sumber. Ia digunakan untuk menentukan alamat dari mana pelayar akan mendapatkan semula imej; URL ini boleh digunakan pada imej di dalam direktori pada pelayan yang sama. Ia juga boleh menyimpan imej dalam pelayan pihak ketiga dengan nama domain yang berbeza.
Jenis Nilai: #namapeta
Atribut usemap mentakrifkan imej untuk peta imej sebelah pelanggan. Peta guna sentiasa digunakan dengan tag HTML peta dan kawasan.
Jenis Nilai: Piksel
Tidak disokong dalam HTML5, atribut Vspace digunakan untuk menetapkan bilangan piksel yang digunakan sebagai ruang putih di bahagian atas dan bawah imej pada halaman web.
Jenis Nilai: Piksel
Sama seperti namanya, atribut lebar digunakan untuk menentukan lebar gambar di dalam halaman web HTML.
Sekarang kita telah melihat cara imej ditambahkan pada halaman HTML dan cara menetapkan atributnya, kita boleh mencipta halaman web yang kelihatan menarik dalam projek web.
Selain hanya menambah bakat visual pada halaman web, imej adalah berharga kerana ia membantu pengoptimuman enjin carian. Menambah teg alt dan penerangan yang betul pada imej membantu enjin carian memahami kandungan halaman web dengan lebih baik dan meningkatkan kedudukan halaman web dalam banyak kes.
Atas ialah kandungan terperinci Tag Imej HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
