Verwendung des HTML-IMG-Tags-HTML-Tutorial-php.cn

Verwendung des HTML-IMG-Tags

韦小宝

Freigeben： 2017-12-02 10:26:27

Original

3511 Leute haben es durchsucht

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">

Nach dem Login kopieren

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"/>

Nach dem Login kopieren

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">

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

Das Obige dreht sich alles um die Verwendung von HTML-IMG-Tags. Ich hoffe, dass es für alle hilfreich ist.

Verwandte Empfehlungen:

Detaillierte grafische Erklärung des Unterschieds zwischen alt und title im img-Attribut

Detaillierte Erklärung zum Erstellen einer Bildzuordnung mit dem -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!