HTML-Hintergrundbild und Hintergrundfarbe_PowerNode Java Academy

1. HTML-Bild <img>

1. Das <img>-Tag und sein src-Attribut

In HTML werden Bilder durch das Tag <img> definiert. <img> ist ein leeres Tag, d. h. es enthält nur Attribute und hat kein schließendes Tag (es endet direkt mit "/>"). Um ein Bild auf einer Seite anzuzeigen, müssen Sie das Quellattribut (src) verwenden. src bedeutet „Quelle“. Der Wert der Quelleigenschaft ist die URL-Adresse des Bildes. Die Syntax zum Definieren eines Bildes lautet: <img src="url" />, wobei sich URL auf den Speicherort des Bildes bezieht. Der Browser zeigt das Bild in dem Dokument an, in dem das Bild-Tag erscheint.

<!--Nur das Bild mit dem angegebenen src-Attribut-->
<img src="images/bjpowernode.jpg" />

2. Weitere Attribute des <img>-Tags

alt-Attribut: Wird verwendet, um eine Zeichenfolge mit vorbereitetem, austauschbarem Text für das Bild zu definieren. Wenn das Bild nicht angezeigt werden kann, wird der durch das alt-Attribut definierte Text angezeigt. Wenn das Bild normal angezeigt wird, wird eine schwebende Eingabeaufforderung angezeigt, wenn die Maus darauf platziert wird, z. B. „Klicken Sie, um ein größeres Bild anzuzeigen.“ Es empfiehlt sich, Bildern auf der Seite alternative Textattribute (alt) hinzuzufügen. Dies trägt dazu bei, Informationen besser anzuzeigen und ist sehr nützlich für Benutzer, die nur Textbrowser verwenden. Darüber hinaus schreibt der XHTML1.0-Standard jetzt die Verwendung des Alt-Attributs vor. Wenn das <img>-Tag kein Alt-Attribut hat, wird in VS die folgende Eingabeaufforderung angezeigt.

Titelattribut: Wird verwendet, um den Text anzuzeigen, wenn die Maus auf das Bild bewegt wird. Es handelt sich um einen erklärenden Text für das Bild. Viele Websites verfügen mittlerweile beispielsweise über die Funktion „Klicken, um zur nächsten Seite zu springen“, die beim Durchsuchen von Bildern zur Verfügung steht.

Der Unterschied zwischen dem Alt-Attribut und dem Title-Attribut: Das Alt-Attribut des <img>-Tags ist eine alternative Sprache, die surfenden Benutzern zur Verfügung gestellt wird, wenn das Bild aufgrund von Browserkompatibilität, Ladefehlern oder Adressfehlern nicht angezeigt wird. Es ist ein Ersatz für das Bild, während das Title-Attribut des img-Tags einige zusätzliche Informationen über das Bild ausdrückt. Es ist eine Bemerkung oder Anmerkung und der Text wird angezeigt, wenn die Maus darüber bewegt wird.

Rahmenattribut: Gibt den Rahmen an. Bei border="0" wird der Rahmen nicht angezeigt.

Breiten- und Höhenattribute: Geben Sie die Anzeigegröße des Bildes an. Wenn nicht angegeben, wird die Originalgröße des Bildes verwendet. Es ist am besten, Breite und Höhe anzugeben, auch wenn es sich um die Originalgröße handelt, denn wenn die Größe nicht angegeben ist, nimmt das Bild keinen Platz auf der Seite ein. Wenn die Größe des Bildes nach dem Herunterladen geändert wird, wird das Seitenlayout unübersichtlich. Wenn Breite und Höhe angegeben sind, wird das Bild verwendet, auch wenn es noch nicht geladen wurde.

<img src="images/1499417200939140562.jpg" />
 <!--Geben Sie das Alt-Attribut des Bildes an-->
<img src="images/1499417200939140562.jpg" alt="Ein schönes Bild" />
<!--Bild mit Titelattribut angeben-->
<img src="images/1499417200939140562.jpg" alt="Ein schönes Bild" title="Haha" />
 <!--Breite und Höhe des Bildes festlegen-->
<img src="images/xxxx.gif" title="img" alt="img" width="454" height="340" />

3. <img> als Hyperlink

<img> als Hyperlink (also Bild-Hyperlink) bedeutet, dass das <img>-Tag als Linkobjekt des <a></a>-Tags verwendet wird. Hinweis: Wenn <img> als Hyperlink-Objekt verwendet wird, fügt der IE-Browser automatisch einen blauen Rahmen (border="1") zu <img> hinzu. Dies ist oft nicht das, was wir wollen. Sie können den Rahmen entfernen, indem Sie border="0" festlegen.

<!--Bild-Hyperlink, verwenden Sie das img-Tag als Hyperlink-Objekt-->
<a href="../HTMLHyperlink.html" title="HTML-Hyperlink-Syntax">
<img src="http://www.bjpowernode.com/image/m.jpg" border="0" alt="Bildlink" />
</a>

2. HTML-Hintergrund

1. Hintergrundfarbe (Bgcolor)

Die Eigenschaft „background-color“ legt für den Hintergrund eine bestimmte Farbe fest. Der Eigenschaftswert kann eine Hexadezimalzahl, ein RGB-Wert oder ein Farbname sein.

<body bgcolor="#000000"> <!--Hexadezimaler Farbwert-->
<body bgcolor="rgb(0,0,0)"> <!--rgb-Farbwert-->
<body bgcolor="schwarz"> <!--Farbname-->

2. Hintergrund

Die Hintergrundeigenschaft legt den Hintergrund eines Bildes fest. Der Attributwert ist die URL des Bildes. Wenn die Bildgröße kleiner als das Browserfenster ist, wird das Bild über das gesamte Browserfenster dupliziert. Hinweis: Um die Anzeige von Webseiten zu beschleunigen und die Benutzerfreundlichkeit der Website zu verbessern, sollte die Größe des Hintergrundbilds 10 KB nicht überschreiten.

<body background="clouds.gif"> <!--Relative URL-->
<body background="http://www.bjpowernode.com /clouds.gif"> <!--Absolute URL-->

Hinweis: Im neuen Standard wurden die Attribute Hintergrundfarbe (bgcolor) und Hintergrundbild (background) von HTML-Elementen aufgegeben. Stattdessen wird CSS verwendet, um die Hintergrundfarbe und das Hintergrundbild des Elements festzulegen.

3. Farbe

1. Farbe

Die Farbe ist eine Mischung aus Rot, Grün und Blau. Farbwert: Eine Farbe wird durch eine hexadezimale Notation bestehend aus Rot-, Grün- und Blauwerten (RGB) definiert. Der Minimalwert für jede Farbe ist 0 (hexadezimal: #00). Der Maximalwert ist 255 (hexadezimal: #FF). Beispielsweise lautet der Farbname von Schwarz „black“, seine hexadezimale Darstellung ist #000000 und sein RGB-Wert ist rgb (0,0,0).

2. Farbname

Es gibt nur 16 Farbnamen, die vom HTML 4.0-Standard des W3C unterstützt werden. Dies sind: Aquamarin, Schwarz, Blau, Fuchsia, Grau, Grün, Limettengrün, Kastanienbraun, Marineblau, Olivgrün, Lila, Rot, Silber, Blaugrün, Weiß und Gelb. Wenn Sie andere Farben verwenden müssen, müssen Sie hexadezimale Farbwerte verwenden.

3. Websichere Farben

Vor einigen Jahren, als die meisten Computer nur 256 Farben unterstützten, wurde ein Satz von 216 websicheren Farben als Webstandard vorgeschlagen. Der Grund dafür ist, dass Microsoft- und Mac-Betriebssysteme 40 verschiedene reservierte feste Systemfarben verwenden (jeweils etwa 20). 4.216 Plattformübergreifende Farben

Ursprünglich wurden 216 plattformübergreifende websichere Farben verwendet, um sicherzustellen, dass alle Computer bei Verwendung einer 256-Farben-Palette alle Farben korrekt anzeigen.