HTML <figure> κείμενο

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

<figure> η ετικέτα καθορίζει αυτοσufficient content, όπως εικόνες, γραφήματα, φωτογραφίες, λίστες κώδικα κ.λπ.

Αν και <figure> Ο περιεχόμενος του στοιχείου είναι σχετικός με το κύριο περιεχόμενο, αλλά η θέση του είναι ανεξάρτητη από το κύριο ρεύμα περιεχομένου. Αν το διαγράψετε, δεν θα επηρεάσει το ρεύμα του έγγραφου.

Συμβουλή:Χρησιμοποιήστε <figcaption> στοιχείο Για <figure> Προσθήκη τίτλου στο στοιχείο.

Δείτε επίσης:

Βιβλίο αναφορών HTML DOM:Οντότητα Figure

Παράδειγμα

Παράδειγμα 1

Χρήση του στοιχείου <figure> για να σημειώσετε φωτογραφίες στο έγγραφο, και του στοιχείου <figcaption> για να ορίσετε τον τίτλο της φωτογραφίας:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  Εικόνα 1 - Οι Trulli στην περιοχή της Puglia της Ιταλίας.
</figure>

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

Παράδειγμα 2

Ρύθμιση στυλ για το <figure> και <figcaption> με CSS:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  Εικόνα 1 - Οι Trulli στην περιοχή της Puglia της Ιταλίας.
</figure>
</body>
</html>

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

Γενικές Περι属性

<figure> Η ετικέτα υποστηρίζει επίσης Γενικές Περι属性 στο HTML.

Ενέργειες Περι�性

<figure> Η ετικέτα υποστηρίζει επίσης Ενέργειες Περι�性 στο HTML.

Προεπιλεγμένες Ρυθμίσεις CSS

Οι περισσότεροι περιηγητές θα χρησιμοποιήσουν τις παρακάτω προεπιλεγμένες τιμές για την εμφάνιση <figure> Στοιχείο:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

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

Υποστήριξη Browser

Ο αριθμός στη τάβλη αναφέρει την έκδοση του πρώτου προγράμματος που υποστηρίζει το στοιχείο.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Σχόλια: Η ετικέτα <figure> είναι μια νέα ετικέτα του HTML 5.