Bagaimana untuk menambah gambar ke html

HTML ialah bahasa penanda yang digunakan untuk mencipta teks, imej, video dan kandungan lain dalam halaman web. Gambar adalah salah satu elemen penting dalam penghasilan halaman web Cara menambah gambar dengan betul adalah kemahiran yang perlu dikuasai oleh setiap pengeluar halaman web.

1. Sintaks asas

Dalam HTML, teg img digunakan untuk memasukkan imej Nama penuh img ialah "imej", yang bermaksud imej. Berikut ialah sintaks asas teg img:

<img src="图片文件路径" alt="图片描述">

Teg img mempunyai dua atribut utama: src dan alt. src merujuk kepada laluan fail imej, dan alt merujuk kepada penerangan teks yang akan dipaparkan apabila halaman tidak dapat memaparkan imej secara normal.

Antaranya, atribut src mesti diisi, manakala atribut alt adalah pilihan. Jika laluan imej tidak betul, imej tidak akan dipaparkan. Jika atribut alt tidak ditetapkan, rentetan teks tidak bermakna mungkin dipaparkan pada halaman di mana imej tidak boleh dipaparkan seperti biasa.

Laluan imej boleh menjadi laluan setempat atau laluan rangkaian. Laluan tempatan merujuk kepada laluan fail imej yang disimpan pada komputer tempatan laluan rangkaian merujuk kepada laluan fail imej yang diakses melalui rangkaian, seperti imej yang dimuat turun dari Internet.

2. Laluan imej tempatan

Laluan imej tempatan dibahagikan kepada laluan mutlak dan laluan relatif. Laluan mutlak menentukan lokasi imej dalam keseluruhan sistem fail, dan anda perlu menulis laluan lengkap laluan relatif ialah penerangan laluan bermula dari fail HTML, dan anda hanya perlu menulis lokasi imej berbanding dengannya; fail HTML.

Berikut ialah dua cara untuk menulis laluan imej tempatan.

1. Laluan mutlak

Laluan mutlak merujuk kepada lokasi imej dalam keseluruhan sistem fail. Bergantung pada sistem pengendalian, laluan mutlak akan berbeza sedikit. Dalam sistem Windows, laluan mutlak bermula dari huruf pemacu, contohnya:

C:\Users\Administrator\Pictures\test.jpg

Dalam sistem Mac OS X, laluan mutlak bermula dari direktori akar, contohnya:

/Users/username/Documents/test.jpg

Ini Kelemahan kaedah ini ialah setiap halaman web mesti menggunakan laluan fail yang lengkap Jika lokasi penyimpanan fail berubah, kod tersebut perlu diubah suai.

2. Laluan relatif

Laluan relatif merujuk kepada lokasi imej berbanding fail HTML. Lebih mudah struktur direktori, lebih mudah untuk menggunakan laluan relatif. Dalam fail HTML, "." mewakili direktori di mana fail semasa berada, dan ".." mewakili direktori di atas direktori tempat fail semasa terletak Jika imej dan fail HTML berada dalam direktori yang sama, laluan relatif boleh digunakan, contohnya:

<img src="./images/test.jpg" alt="测试图片">

Jika imej disimpan dalam folder imej dalam direktori di mana fail HTML terletak, laluannya ialah "./images/test.jpg".

3. Gambar Internet

Gambar Internet merujuk kepada gambar yang diperoleh daripada Internet. Dalam HTML, anda boleh menggunakan teg img untuk memasukkan imej rangkaian sama seperti imej tempatan.

Imej rangkaian biasanya diwakili oleh URL (Uniform Resource Locator), iaitu rentetan yang terdiri daripada nama protokol, nama hos, laluan fail dan nama fail. Sebagai contoh, URL untuk mengakses gambar Baidu ialah:

https://www.baidu.com/img/bd_logo1.png

Antaranya, "https://" ialah nama protokol, menunjukkan bahawa protokol HTTPS digunakan untuk penghantaran data "www.baidu. com" ialah nama hos; " img/bd_logo1.png" ialah laluan fail dan nama fail.

Apabila menambah imej dalam talian, hanya salin URL imej dalam talian ke dalam atribut src tag img, contohnya:

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

Imej Internet lebih mudah dan anda tidak t perlu risau tentang isu laluan Selagi URL imej itu OK, anda boleh menggunakan teg img untuk memasukkan imej terus ke dalam HTML.

4. Penyesuaian Imej

Dalam proses penghasilan halaman web, keperluan biasa adalah untuk membuat penyesuaian saiz imej, supaya ia boleh mempunyai kesan paparan yang lebih baik pada peranti dan skrin yang berbeza. Kaedah yang biasa digunakan termasuk menggunakan CSS untuk menetapkan sifat seperti lebar, tinggi dan lebar maks.

1. Gunakan CSS untuk menetapkan lebar dan tinggi

Atribut lebar dan tinggi dalam CSS boleh menetapkan lebar dan tinggi imej masing-masing, contohnya:

<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

Antaranya, menetapkan lebar kepada 100% bermakna lebar gambar akan berubah dengan perubahan ruang yang ada tetapan ketinggian kepada auto bermakna ketinggian akan dilaraskan secara automatik mengikut nisbah lebar, mengekalkan bahagian asal.

2. Gunakan CSS untuk menetapkan lebar maksimum

Menggunakan atribut lebar maksimum boleh menjadikan imej mengecut secara automatik secara berkadar apabila ia melebihi lebar tertentu, tetapi ia tidak akan menjadi lebih kecil daripada saiz asalnya. Contohnya:

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

Antaranya, lebar maksimum ditetapkan kepada 100%, yang bermaksud bahawa lebar maksimum imej tidak akan melebihi ruang yang tersedia dan tidak akan melebihi saiz asal yang ditetapkan kepada auto, yang bermaksud bahawa ketinggian akan berdasarkan perkadaran lebar secara automatik untuk mengekalkan perkadaran asal.

Ringkasnya, apabila menambahkan imej pada halaman web, anda mesti mempertimbangkan isu seperti laluan imej, perihalan imej, saiz imej dan pelarasan. Selagi anda menguasai sintaks asas dan kaedah biasa, anda boleh menggunakan teg img dalam HTML secara fleksibel untuk menjadikan halaman web lebih berwarna.

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