Το χαρακτηριστικό HTML a href εξηγείται με παραδείγματα

Το χαρακτηριστικό αναφέρεται σε έναν προορισμό που παρέχεται από έναν σύνδεσμο. Η aετικέτα (άγκυρα) είναι νεκρή χωρίς το χαρακτηριστικό.

Πώς να χρησιμοποιήσετε την ετικέτα

Μερικές φορές στη ροή εργασίας σας, δεν θέλετε έναν ζωντανό σύνδεσμο ή δεν θα γνωρίζετε ακόμα τον προορισμό του συνδέσμου. Σε αυτήν την περίπτωση, είναι χρήσιμο να ορίσετε το hrefχαρακτηριστικό για "#"να δημιουργήσετε έναν νεκρό σύνδεσμο.

Το hrefχαρακτηριστικό μπορεί να χρησιμοποιηθεί για σύνδεση με τοπικά αρχεία ή αρχεία στο Διαδίκτυο.

Για παράδειγμα:

  Href Attribute Example   

Href Attribute Example

The freeCodeCamp Contribution Page shows you how and where you can contribute to freeCodeCamp's community and growth.

Το χαρακτηριστικό υποστηρίζεται από όλα τα προγράμματα περιήγησης.

Περισσότερα χαρακτηριστικά HTML:

hreflang : Καθορίζει τη γλώσσα του συνδεδεμένου πόρου.

target : Καθορίζει το πλαίσιο στο οποίο θα ανοίξει ο συνδεδεμένος πόρος.

title : Ορίζει τον τίτλο ενός συνδέσμου, ο οποίος εμφανίζεται στον χρήστη ως συμβουλή εργαλείου.

Παραδείγματα

This is a dead link This is a live link to freeCodeCamp more with a href attribute

Άγκυρες στη σελίδα

Είναι επίσης δυνατό να ορίσετε μια άγκυρα σε συγκεκριμένη θέση της σελίδας. Για να το κάνετε αυτό, πρέπει πρώτα να τοποθετήσετε μια καρτέλα στη θέση της σελίδας με ετικέτα και απαραίτητο χαρακτηριστικό "όνομα" με οποιαδήποτε περιγραφή λέξης-κλειδιού σε αυτήν, όπως αυτό:

Δεν απαιτείται περιγραφή μεταξύ ετικετών. Μετά από αυτό μπορείτε να τοποθετήσετε έναν σύνδεσμο που οδηγεί σε αυτήν την άγκυρα σε οποιαδήποτε θέση στην ίδια σελίδα. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε την ετικέτα με το απαραίτητο χαρακτηριστικό "href" με το σύμβολο # (ευκρινές) και την περιγραφή λέξης κλειδιού της άγκυρας, όπως αυτό:

Go to Top

Σύνδεσμοι εικόνας

Η μπορεί επίσης να εφαρμοστεί σε εικόνες και άλλα στοιχεία HTML.

Παράδειγμα

Μερικά περισσότερα παραδείγματα του href

This gives a base url for all further urls on the page This is a live link to an external stylesheet

Τι άλλο μπορείτε να κάνετε;

Περισσότερη προσαρμογή! Ας δούμε μια συγκεκριμένη περίπτωση χρήσης:

Ένας σύνδεσμος mailto είναι ένα είδος υπερσύνδεσης ( ) με ειδικές παραμέτρους που σας επιτρέπουν να καθορίσετε επιπλέον παραλήπτες, μια γραμμή θέματος ή / και ένα κύριο κείμενο.

Η βασική σύνταξη με έναν παραλήπτη είναι:

Some text

Προσθήκη θέματος σε αυτό το μήνυμα:

Εάν θέλετε να προσθέσετε ένα συγκεκριμένο θέμα σε αυτό το μήνυμα, προσέξτε να προσθέσετε %20ή +οπουδήποτε υπάρχει κενό στη γραμμή θέματος. Ένας εύκολος τρόπος για να βεβαιωθείτε ότι έχει τη σωστή μορφή είναι να χρησιμοποιήσετε έναν αποκωδικοποιητή / κωδικοποιητή URL.

Προσθήκη κειμένου σώματος:

Ομοίως, μπορείτε να προσθέσετε ένα συγκεκριμένο μήνυμα στο κύριο μέρος του email: Και πάλι, τα κενά πρέπει να αντικατασταθούν από %20ή +. Μετά την παράμετρο θέματος, πρέπει να προηγείται οποιαδήποτε επιπλέον παράμετρος&

Παράδειγμα: Ας πούμε ότι θέλετε οι χρήστες να στείλουν ένα email στους φίλους τους σχετικά με την πρόοδό τους στο Free Code Camp:

Διεύθυνση: άδεια

Θέμα: Υπέροχα νέα

Body: Γίνομαι προγραμματιστής

Ο σύνδεσμος html τώρα:

Send mail!

Εδώ, αφήσαμε το mailto κενό (mailto :?). Αυτό θα ανοίξει το πρόγραμμα-πελάτη ηλεκτρονικού ταχυδρομείου του χρήστη και ο χρήστης θα προσθέσει οι ίδιοι τη διεύθυνση παραλήπτη.

Προσθήκη περισσότερων παραληπτών:

Με τον ίδιο τρόπο, μπορείτε να προσθέσετε παραμέτρους CC και bcc. Διαχωρίστε κάθε διεύθυνση με κόμμα!

Πριν από τις πρόσθετες παραμέτρους πρέπει να προηγούνται &.

Send mail!

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

MDN - Σύνδεσμοι ηλεκτρονικού ταχυδρομείου