HTML <img> ετικέτα

  • Προηγούμενη Σελίδα <iframe>
  • Επόμενη Σελίδα <input>

Ορισμός και χρήση

<img> Η ετικέτα χρησιμοποιείται για την ενσωμάτωση εικόνας σε ιστοσελίδες HTML.

Στα τεχνικά, δεν εισάγεται πραγματικά η εικόνα στην ιστοσελίδα, αλλά συνδέεται η εικόνα με την ιστοσελίδα.<img> Η ετικέτα δημιουργεί έναν κουτί, για να αναφέρεται στην εικόνα.

<img> Η ετικέτα έχει δύο απαραίτητα χαρακτηριστικά:

  • src - Ορίζει το δρόμο της εικόνας
  • alt - Αν για κάποιο λόγο η εικόνα δεν μπορεί να εμφανιστεί, καθορίστε το εναλλακτικό κείμενο της εικόνας

Σημείωση:Επιπλέον, πάντα να καθορίζετε το πλάτος και το ύψος της εικόνας. Αν δεν καθοριστούν το πλάτος και το ύψος, η σελίδα μπορεί να κουνιέται κατά τη φόρτωση της εικόνας.

Συμβουλή:Για να συνδέσετε την εικόνα σε ένα άλλο έγγραφο, απλά προσθέστε <img> Μάρκες ενσωματωμένες <a> Στην ετικέτα (βλέπε το παρακάτω παράδειγμα).

Επίσης, δείτε:

HTML ΕκμάθησηHTML Εικόνα

HTML DOM ΕγχειρίδιοImage αντικείμενο

CSS Εκμάθηση:Ρύθμιση του στυλ της εικόνας

Επεκταμένη ανάγνωση:Πώς να χρησιμοποιήσουμε σωστά την εικόνα

Παράδειγμα

Παράδειγμα 1

Στο παρακάτω παράδειγμα, έχουμε εισάγει μια φωτογραφία τρούβλιου που φωτογραφίστηκε από έναν μηχανικό του CodeW3C.com στο Shanghai Flower Port:

<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Δοκιμάστε το προσωπικά

Shanghai Flower Port - Tulip

Παράδειγμα 2

Μια άλλη παράδειγμα για την εισαγωγή εικόνας:

<img src="dancer.png" alt="Dancer" width="500" height="749">

Δοκιμάστε το προσωπικά

Συμβουλή:Προσφέρει περισσότερες παραδείγματα στο κάτω μέρος της σελίδας.

Σημείωση

Σημείωση Τιμή Περιγραφή
alt Κείμενο Ορίζει το εναλλακτικό κείμενο της εικόνας.
crossorigin
  • anonymous
  • use-credentials
 Επιτρέπει τη χρήση εικόνων από τρίτους ιστότοπους που επιτρέπουν την πρόσβαση από άλλες οδηγίες.
height Π像 Ορίζει το ύψος της εικόνας.
ismap ismap Ορίζει την εικόνα ως χάρτη εικόνας στο server.
loading
  • eager
  • lazy
 Ορίζει αν ο περιηγητής θα φορτώσει αμέσως την εικόνα ή θα την αναβάλει μέχρι να ικανοποιηθούν κάποιες προϋποθέσεις.
longdesc URL Ορίζει το URL που δείχνει την λεπτομερή περιγραφή της εικόνας.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Ορίζει τις πληροφορίες που χρησιμοποιούνται κατά την απόκτηση της εικόνας.
sizes Μέγεθος Ορίζει το μέγεθος της εικόνας για διαφορετικά σχήματα σελίδας.
src URL Ορίζει το δρόμο του εικόνας.
srcset URL-list Ορίζει τη λίστα των αρχείων εικόνας που χρησιμοποιούνται σε διαφορετικές περιπτώσεις.
usemap #mapname Ορίζει την εικόνα ως πελάτη του χάρτη εικόνας.
width Π像 Ορίζει το πλάτος της εικόνας.

Γενικές ιδιότητες

<img> Οι ετικέτες υποστηρίζουν Γενικές ιδιότητες στο HTML。

ιδιότητες εκδηλώσεων

<img> Οι ετικέτες υποστηρίζουν Αντικειμενικές ιδιότητες εκδηλώσεων στο HTML。

Περισσότερες παραδείγματα

Παράδειγμα 3

Ευθυγράμμιση εικόνας (χρησιμοποιώντας CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Δοκιμάστε το προσωπικά

Παράδειγμα 4

Προσθήκη περιθωρίου για εικόνα (χρησιμοποιώντας CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Δοκιμάστε το προσωπικά

Παράδειγμα 5

Προσθήκη περιθωρίων για εικόνα (χρησιμοποιώντας CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Δοκιμάστε το προσωπικά

Παράδειγμα 6

Προσθήκη περιθωρίων για εικόνα (χρησιμοποιώντας CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Δοκιμάστε το προσωπικά

Παράδειγμα 7

Πώς να εισάγουμε εικόνα από άλλο φάκελο ή από άλλο ιστότοπο:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Δοκιμάστε το προσωπικά

Example 8

How to add a hyperlink to an image:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Δοκιμάστε το προσωπικά

Example 9

How to create an image map with clickable areas. Each area is a hyperlink:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Δοκιμάστε το προσωπικά

Extended reading - How to use images correctly

One of the most notable features of HTML and XHTML is that images can be included in the text of the document, either as an intrinsic object of the document (inline image) or as a separate document that can be downloaded via a hyperlink, or as the background of the document.

Including images (static or animated icons, photos, descriptions, paintings, etc.) in the document content reasonably will make the document more vivid and engaging, look more professional, and be more informative and easy to navigate. It can also be specifically made a visual guide image that becomes a hyperlink.

However, if images are overused, the document becomes fragmented, chaotic, and unreadable, and it will take more unnecessary waiting time for users to download and view the page.

Please read the following article to learn about the two main image formats on the Web: GIF and JPEG, and how to use images correctly:

Default CSS settings

Most browsers will display the following default values <img> Εлемент:

img {
  display: inline-block;
}

Δοκιμάστε το προσωπικά

Υποστήριξη Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη Σελίδα <iframe>
  • Επόμενη Σελίδα <input>