Η ιδιότητα border του ετικέτας HTML <img>
Παράδειγμα
Το παρακάτω HTML μπορεί να δημιουργήσει διαφορετικά πλάθη περιγράμματος εικόνας:
<html> <body> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="1" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="2" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="4" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="8" /> </a> </body> </html>
Ορισμός και χρήση
Η ιδιότητα border του ετικέτας <img> ορίζει το πλάτος του περιγράμματος γύρω από την εικόνα, δηλαδή μπορείτε να αυξήσετε ή να αφαιρέσετε το πλαίσιο της εικόνας.
Σχόλια:Από προεπιλογή, οι εικόνες δεν έχουν πλαίσιο (μακρύτερα από όταν η εικόνα βρίσκεται μέσα σε ετικέτα a).
Οι πλοηγείς συνήθως εμφανίζουν τις εικόνες που αντιπροσωπεύουν υπερσυνδέσμους (π.χ. εικόνες που περιλαμβάνονται στο ετικέτα <a>) σε πλαίσιο δύο pixels για να δείξουν ότι ο αναγνώστης μπορεί να επιλέξει αυτή την εικόνα για να επισκεφθεί το σχετικό έγγραφο.
Με τη χρήση της ιδιότητας border και μιας τιμής πλάτους σε pixels, μπορείτε να αφαιρέσετε (border="0") ή να αυξήσετε το πλάτος του περιγράμματος της εικόνας.
Σημείωση:Η ιδιότητα αυτή δεν προτείνεται πλέον στο HTML 4 και XHTML, και πρέπει να αντικατασταθεί από το στυλ, αλλά εξακολουθεί να υποστηρίζεται καλά από τους δημοφιλείς πλοηγούς.
Υποστήριξη πλοηγού
Αν και δεν προτείνεται η χρήση της ιδιότητας border, όλες οι κύριες πλοηγούς υποστηρίζουν αυτή την ιδιότητα.
Σημειώσεις και σχόλια
Σχόλια:Δεν προτείνεται η χρήση της ιδιότητας "border" των εικόνων στο HTML 4.01. Στο XHTML 1.0 Strict DTD και HTML 5, η ιδιότητα αυτή δεν υποστηρίζεται πλέον.
Σημείωση:Παρακαλώ χρησιμοποιήστε Ιδιότητες περιγράμματος του CSS Για να αλλάξετε το στυλ περιγράμματος του στοιχείου. Μπορείτε να χρησιμοποιήσετε την ιδιότητα περιγράμματος του CSS σε εξωτερικό αρχείο στυλ, για να θέσετε ομοιόμορφα πλαίσια σε όλες τις εικόνες του ιστοχώρου σας. Σε σύγκριση με τη χρήση της ιδιότητας border για κάθε εικόνα, αυτός ο τρόπος είναι无疑 πιο αποδοτικός.
Σχόλια για την συμβατότητα
Δεν προτείνεται η χρήση της ιδιότητας border του στοιχείου img; Στο HTML 4.01 Strict και XHTML 1.0 Strict DTD, η ιδιότητα border του στοιχείου img δεν υποστηρίζεται.
Παρακαλώ χρησιμοποιήστε CSS.
Γραμματική CSS: <img style="border:5px solid black">
Παράδειγμα CSS: Πλαίσια εικόνων
Στο 我们的 CSS 教程中，您可以找到更多有关 Ιδιότητα border Λεπτομέρειες.
Γραμματική
<img border="value" />
Αξία ιδιότητας
| Αξία | Περιγραφή |
|---|---|
| pixels | Πλάτος του περιγράμματος, σε pixels. |
Παράδειγμα TIY
- Ετικέτα <img> και η ιδιότητα border
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιείτε την ιδιότητα border του ετικέτα <img> για να αλλάξετε τα όρια της εικόνας.
Εκτεταμένη ανάγνωση: Αφαίρεση ορίων από εικόνες
Με τη χρήση της ιδιότητας border="0" στο ετικέτα <img>, μπορείτε να αφαιρέσετε τα όρια γύρω από τον υπερσύνδεσμο της εικόνας. Για ορισμένες εικόνες, ειδικά για τις εικόνες χάρτη, η αφαίρεση των ορίων μπορεί να βελτιώσει την εμφάνιση της σελίδας. Για τα κουμπιά που καθοδηγούν σε άλλες εικόνες και που είναι σαφώς σύνδεσμοι, χωρίς όρια η εικόνα μπορεί να φαίνεται καλύτερα.
Αν και η αφαίρεση των ορίων δεν μειώνει την προσβασιμότητα του έγγραφου, πρέπει να είστε προσεκτικοί. Γιατί χωρίς όρια σημαίνει ότι αφαιρείτε μια πολύ συχνή οπτική ένδειξη για υπερσυνδέσμους, κάτι που μπορεί να κάνει τους αναγνώστες να μην μπορούν να βρουν εύκολα αυτούς τους συνδέσμους. Οι περιηγητές συνήθως αλλάζουν τη μορφή του δακτυλιδίου όταν το κατέβασμα στο εικονίδιο του υπερσυνδέσμου, αλλά δεν μπορείτε να περιμένετε ότι αυτό θα συμβεί πάντα, και δεν πρέπει να αφήσετε τους χρήστες να αναζητούν αόρατους συνδέσμους χωρίς όρια.
Προτείνουμε ιδιαίτερα να χρησιμοποιείτε άλλες μεθόδους όταν χρησιμοποιείτε εικόνες χωρίς όρια, ώστε οι αναγνώστες να γνωρίζουν ότι πρέπει να κάνουν κλικ σε αυτές τις εικόνες. Είναι δύσκολο να κάνετε το έγγραφο πιο προσβάσιμο για τους αναγνώστες ακόμη και με απλό κείμενο.
