Heim >Web-Frontend >HTML-Tutorial >Verwendung des HTML-IMG-Tags
Verwendung des HTML-IMG-Tags
- 韦小宝Original
- 2017-12-02 10:26:273487Durchsuche
In diesem Artikel werden die verschiedenen Funktionen des Bild-Tags in HTML ausführlich erläutert. Bilder sind auf einer HTML-Seite definitiv unverzichtbar, 🎜>img-Tag von HTML ist auch sehr einfach und leicht zu beherrschen.
img zeigt dieses Kartenstück unter Verwendung relativer Pfade an, wie zum Beispiel:
<img src="./imgs/002.jpg">Entwicklungstipps: In der tatsächlichen Entwicklung wird es normalerweise Erstellen sein Erstellen Sie einen imgs-Ordner im Projektverzeichnis und platzieren Sie alle Bildressourcen darin, um den Bildaufruf während der Entwicklung zu erleichtern. Wie oben gezeigt, ist ./imgs das Verzeichnis, in dem sich das Bild befindet, und /002.jpg ist das auszuwählende Bild.
img zeigt Webseitenbilder mit absoluten Pfaden an, wie zum Beispiel:
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"/>
Unter img stehen viele Attribute zur Auswahl:
1. Alt zeigt den angezeigten Inhalt an, wenn das Bild falsch geladen wird, damit Besucher den Zweck des Bildes erkennen können.
Zum Beispiel:<img src="./imgs/001.jpg12" alt="logo">Das angezeigte Ergebnis ist: Zeigt an, dass es sich bei diesem Bild um ein Logobild handelt.
2. Ausrichten gibt die Ausrichtungsposition des Bildes im Text an.
oben ist oben ausgerichtet, unten ist unten ausgerichtet und die Mitte ist innen ausgerichtet das Zentrum. Standardmäßig wird die untere Ausrichtung verwendet. Zwei Aufhängungseffekte: Das linke Bild schwebt links vom Text und das rechte Bild schwebt rechts vom Text.3. Ändern Sie die Größe des Bildes durch Breite und Höhe
Die Codedemonstration von 2 und 3 ist wie folgt<p>一张百度logo<img src="./imgs/001.jpg" width="100"/></p> <p>一张百度logo<img src="./imgs/001.jpg" align="top" width="100"/></p> <p>一张logo<img src="./imgs/002.jpg" align="bottom" width="100"></p> <p>百度logo<img src="./imgs/002.jpg" align="middle" width="100"></p> <p>百度logo<img src="./imgs/002.jpg" align="left" width="100"></p> <p>百度logo<img src="./imgs/002.jpg" align="right" width="100"></p>Die Bilder sind alle relative Pfade. Lokale Bilder unter
4. Klicken Sie auf das Bild, um einen weiteren Link zu öffnen
<p>点击图片打开链接 <a href="page1.html" title="点击进入page1界面"> <img src="./imgs/001.jpg" alt="logo" width="200px" align="middle"/></a></p>wobei page1.html ein weiteres
HTML-Dokument ist, lautet der Code wie folgt:
<html>
<head>
<title>page1界面</title>
</head>
<body>
<p>我是page1</p>
</body>
</html>Klicken Sie auf das Bild, um page1.html zu öffnen.
5. Bildkartierung
<img src="page.jpg" border="0" usemap="#page" alt="pages" />
<map name="page" id="page">
<area shape="circle" coords="180,139,14" href ="page1.html" alt="page1" />
<area shape="circle" coords="129,161,10" href ="page2.html" alt="page2" />
</map>Dabei werden Fläche und Karte zusammen verwendet, und Fläche steht unter dem Karten-Tag. Die Usemap von img verweist auf den Namen der Karte. Klicken Sie auf verschiedene Positionen des Bildes, um zwei verschiedene Links einzugeben, Seite1 oder Seite2. Verwandte Empfehlungen:
Detaillierte grafische Erklärung des Unterschieds zwischen alt und title im img-Attribut
Detaillierte Erklärung zum Erstellen einer Bildzuordnung mit dem a1f02c36ba31691bcfe87b2722de723b-Tag in HTML
Warum nicht das img-Tag verwenden, um die Bildgröße zu steuern? in HTML?
Das obige ist der detaillierte Inhalt vonVerwendung des HTML-IMG-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!