Ετικέτα <a> στο HTML

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

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

<a> Η ετικέτα define το υπερσύνδεσμο, χρησιμοποιείται για να συνδέσει μια σελίδα σε άλλη σελίδα.

<a> Η πιο σημαντική ιδιότητα του στοιχείου είναι Ατрибούτο hrefτοποθετεί το στόχο του σύνδεσμου.

By default, links will be displayed as follows in all browsers:

  • Οι σύνδεσμοι που δεν έχουν επισκεφθεί είναι με υπογράμμιση και μπλε
  • Οι σύνδεσμοι που έχουν επισκεφθεί είναι με υπογράμμιση και μπλε
  • Οι σύνδεσμοι που επισκέπτεστε είναι με υπογράμμιση και κόκκινο

Συμβουλή:Μπορείτε να έχει παρατηρήσει ότι οι σύνδεσμοι στον ιστότοπο CodeW3C.com διαφέρουν πολύ από το προεπιλεγμένο στυλ σύνδεσμων. Μπορείτε να χρησιμοποιήσετε CSS Πseudo-κλάσεις Προσθέστε σύνθετα και ποικίλα στυλ σε κείμενα υπερσυνδέσμων.

Για περισσότερες πληροφορίες:

Εκμάθηση HTML:HTML Σύνδεσμοι

Εγχειρίδιο 参考手册 για HTML DOM:Αντικείμενο Anchor

CSS Εκμάθηση:Στυλ σύνδεσμων

Επεξηγήσεις όρων

Τι είναι η υπερtekst?

Παράδειγμα

Παράδειγμα 1

Δημιουργία σύνδεσμου προς το codew3c.com:

<a href="https://www.codew3c.com">Επισκεφθείτε το codew3c.com!</a>

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Πώς να χρησιμοποιήσετε την εικόνα ως σύνδεσμο:

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

Προσπαθήστε το προσωπικά

Παράδειγμα 3

Πώς να ανοίξετε έναν σύνδεσμο σε νέο παράθυρο του περιηγητή:

<a href="https://www.codew3c.com" target="_blank">Επισκεφθείτε το codew3c.com!</a>

Προσπαθήστε το προσωπικά

Παράδειγμα 4

Πώς να συνδέσετε σε μια διεύθυνση email:

<a href="mailto:someone@example.com">Αποστολή email</a>

Προσπαθήστε το προσωπικά

Παράδειγμα 5

Πώς να συνδέσετε σε έναν αριθμό τηλεφώνου:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Προσπαθήστε το προσωπικά

Παράδειγμα 6

Πώς να συνδέσετε σε άλλο τμήμα της ίδιας σελίδας:

<a href="#section2">Μεταπήδηση στο δεύτερο κεφάλαιο</a>

Προσπαθήστε το προσωπικά

Παράδειγμα 7

Πώς να συνδέσετε στο JavaScript:

<a href="javascript:alert('Hello World!');">Εκτέλεση JavaScript</a>

Προσπαθήστε το προσωπικά

Συμβουλές και σχόλια

Συμβουλή:Αν η ετικέτα <a> δεν έχει ιδιότητα href, είναι απλώς ένας προκαθορισμένος δείκτης υπερσυνδέσμου.

Συμβουλή:Η σελίδα που συνδέεται συνήθως εμφανίζεται στη τρέχουσα βιβλιοθήκη περιηγητή, εκτός αν ορίσετε έναν άλλο στόχο (με την ιδιότητα target).

Συμβουλή:Χρησιμοποιήστε τις ρυθμίσεις CSS για να ορίσετε τον τύπο του συνδέσμου:CSS Σύνδεσμοι και CSS Κουμπιά.

Ιδιότητες

Ιδιότητες Τιμή Περιγραφή
download Όνομα αρχείου Ορίζει το στόχο που θα κατεβάσει ο χρήστης όταν κάνει κλικ στο υπερσύνδεσμο.
href URL Ορίζει τη διεύθυνση URL της σελίδας που στοχεύει ο σύνδεσμος.
hreflang Κώδικας γλώσσας Ορίζει τη γλώσσα που χρησιμοποιείται από το συνδεδεμένο έγγραφο.
media Ερωτήματα μέσου Ορίζει για ποιο μέσο/επιτόπο θα προσαρμοστεί το συνδεδεμένο έγγραφο.
ping Λίστα URL Ορίζει μια λίστα URL που διαχωρίζονται με κενά, όταν ο σύνδεσμος επισκεφθείται, ο περιηγητής θα στείλει POST αίτημα με σώμα ping (στο παρασκήνιο). Χρησιμοποιείται συνήθως για την παρακολούθηση.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Ορίζει τις πληροφορίες αναφοράς που θα σταλούν μαζί με το σύνδεσμο.
rel
  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
 Ορίζει τη σχέση μεταξύ του τρέχοντος εγγράφου και του συνδεδεμένου εγγράφου.
target
  • _blank
  • _parent
  • _self
  • _top
 Ορίζει πού θα ανοίξει το συνδεδεμένο έγγραφο.
type Τύπος μέσου Ορίζει τον τύπο του μέσου που χρησιμοποιείται από το συνδεδεμένο έγγραφο.

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

<a> Η ετικέτα υποστηρίζει Γενικές ιδιότητες του HTML.

αιθέρια ιδιότητες

<a> Η ετικέτα υποστηρίζει Αιθέρια ιδιότητες του HTML.

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

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

a:link, a:visited {
  χρώμα: (εσωτερική τιμή);
  text-decoration: underline;
  cursor: auto;
}
a:link:active, a:visited:active {
  χρώμα: (εσωτερική τιμή);
}

Υποστήριξη Περιηγητών

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