简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

imej HTML

Secara amnya, apa yang kami gunakan adalah untuk memasukkan gambar, kebanyakannya sebagai latar belakang, dan kemudian menggunakan gambar sebagai pautan. Teg yang terlibat ialah < img> Seterusnya, kami akan mula menulis fail HTML untuk memperdalam pemahaman kami Pertama, kami menggunakan penyemak imbas untuk memuat turun beberapa gambar di halaman web (meletakkannya dalam folder yang sama dengan fail HTML). guna nanti.

1 Tetapkan imej sebagai imej latar belakang halaman web

Tambahkan atribut latar belakang pada atribut badan untuk menambah imej latar belakang <. 🎜>

QQ截图20161011091200.png

2. Contohnya, masukkan gambar dan tulis seperti berikut

<img src= "path plus name file">

Selepas memasukkan gambar:

QQ截图20161011091631.png

Pada masa ini kita dapat melihat bahawa fon dan bahagian bawah gambar adalah betul. Mari kita laraskan penjajaran. teg <img> untuk melaraskan penjajaran . Parameter yang boleh ditambah secara relatif kepada bahagian atas dan bawah latihan ialah bahagian bawah, tengah dan atas. Lalai ialah bahagian bawah yang baru kita lihat Parameter yang boleh ditambah secara relatif ke kiri dan kanan fon adalah betul. Lalai kiri ialah kanan

Mari bandingkan terus: 

<html>
<head>
    <title>image test</title>
    </head>
    <body background="./qwe.gif">
    <p>let's have an example<img src="./julizi.png"></p>
    <p> align top<img src="./julizi.png" align="top" ></p>
    <p>align middle<img src="./julizi.png" align="middle"></p>
    <p>align left<img src="./julizi.png" align="left" ></p>
    </body>
</html>

4. Laraskan saiz gambar yang disisipkan

Kebanyakan saiz tidak berapa sesuai, masukkan terus Kesan halaman keseluruhan akan diubah pada masa hadapan. Oleh itu, apabila memasukkan gambar, adalah perlu untuk mengawal saiznya. Anda hanya perlu menambah atribut lebar dan ketinggian pada tag < Kemudian mari kita kawal gambar di atas QQ截图20161011091656.png

width="80" height="80"

(sudah tentu, saya juga melaraskan saiz fon)

5. Buat pemetaan imej

QQ截图20161011091717.png

Sebelum ini, kami telah cuba menggunakan imej sebagai pautan untuk mencetuskan pautan pautan ke alamat lompatan Kadang-kadang kita perlu sedar bahawa mengklik pada bahagian gambar yang berbeza akan melompat ke tempat yang berbeza. Ini bermakna daripada imej kita boleh mencipta peta imej dengan kawasan boleh klik, di mana setiap kawasan adalah hiperpautan. Teg yang terlibat ialah teg <map>
<img src="xx.jpg" usemap="#mp"/>  
<map name="mp" id="mp">  
    <area>
    ...
    ...
    ...
    </area>  
</map>

Di sini kami menggunakan gambar sebagai peta Dalam teg <kawasan> kawasan, dan lompat hiperpautan masing-masing.

Ini adalah kandungan pelaksanaan khusus

<html>
<head>
    <title>image test</title>
    </head>
    <body background="./qwe.gif">
    <p>tap the li zi </p>
    <img src="./julizi.png" usemap="#lizi"/>
    <map name="lizi">
     <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
    </map>  
    </body>
</html>

Kemudian, apabila kita mengklik pada buah berangan yang dibesarkan oleh tupai kecil, anda akan melihat lebih banyak buah berangan

QQ截图20161011091743.png

Nilai atribut bentuk boleh menjadi: tepat (segi empat tepat), bulatan (bulatan), poli (poligon) dan lalai (keseluruhan kawasan imej). Segi empat tepat digunakan di sini.

atribut koordinat Untuk segi empat tepat, koordinat mempunyai 4 nilai, dipisahkan dengan koma, yang mewakili koordinat x penjuru kiri atas, koordinat y penjuru kiri atas, koordinat x penjuru kanan sebelah bawah dan koordinat y sudut kanan bawah kawasan segi empat tepat Dapatkan di sini Dari segi koordinat, hanya gunakan alat tangkapan skrin untuk membantu.

Meneruskan pembelajaran
||
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body background="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  491953 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！