HTML-Tag: Zusammenfassung der Verwendung des img-Tags

Der Inhalt dieses Artikels handelt von HTML-Tags: Eine Zusammenfassung der Verwendung von IMG-Tags hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

1. Das Img-Tag hat zwei wichtige Attribute:

1.src-Attribut: die Adresse des Bildes

2.alt-Attribut: das Bild nicht Die Anzeige ist tatsächlicher Text

2. Das Img-Tag ist ein Element auf Zeilenebene:

img und input sind Inline-Ersetzungselemente. Höhe/Breite/Polsterung/Rand sind alle verfügbar. Der Effekt ist gleich dem Blockelement. Inline-Nicht-Ersatzelemente, zum Beispiel Höhe/Breite/Abstand oben, Unten/Rand oben/unten, haben keine Auswirkung. Nur

kann verwendet werden, um die Breite mit Abstand links/rechts und Rand links/rechts zu ändern .

3. Zentrieren Sie das IMG-Tag:

1. Die erste Methode: Diese Methode gefällt mir nicht besonders. Das IMG-Tag kann nicht auf table- gesetzt werden. Zelle. Fehleranfällig.

img_p{
        display: table-cell;vertical-align: middle;  /*控制图片垂直居中*/
        text-align: center;  /*控制图片水平居中*/      }

2. Die zweite Methode: Bei dieser Methode ist es am besten, das Margin-Attribut für das Img-Tag nicht zu haben, da es sonst nicht zentriert wird.

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}

4. IMG-Tag-Ereignis:

1. Verwenden Sie das onerror-Ereignis des HTML-DOM-Ereignisobjekts, um Bilder zu verarbeiten, die Ausnahmen anzeigen.

<img src="img/1.jpg" alt="这是一张图片" onerror="alert(this.alt)">

Empfohlene verwandte Artikel:

HTML-Layout: Implementierungscode des dreispaltigen HTML-Layouts

Was ist das innerHTML-Attribut? Verwendung des innerHTML-Attributs

Das obige ist der detaillierte Inhalt vonHTML-Tag: Zusammenfassung der Verwendung des img-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!