Καθορισμός διεύθυνσης URL βάσης εγγράφου με στοιχείο HTML

Οι ιστότοποι είναι χτισμένοι με μια σειρά συνδέσεων, που δείχνουν σελίδες και πηγές όπως εικόνες και φύλλα στυλ. Υπάρχουν δύο τρόποι να καθορίστε τη διεύθυνση URL που συνδέει αυτές τις πηγές: είτε χρησιμοποιήστε μια απόλυτη διαδρομή είτε μια σχετική διαδρομή.

Η απόλυτη διαδρομή αναφέρεται σε συγκεκριμένο προορισμό, συνήθως ξεκίνησε με το όνομα τομέα (μαζί με HTTP) όπως www.domain.com/destination/source.jpg. Η σχετική διαδρομή είναι το αντίθετο: ο προορισμός σύνδεσης εξαρτάται από τη θέση της ρίζας ή στις περισσότερες περιπτώσεις από το όνομα τομέα του ιστότοπού σας.

Μια τυπική σχετική διαδρομή θα φαίνεται όπως παρακάτω:

Αν ο τομέας του ιστότοπού σας είναι, για παράδειγμα, hongkiat.com η διαδρομή εικόνας θα επιλυθεί hongkiat.comimages_2 / καθορισμός-έγγραφο-βάση-url-με-html-base-element.png. Θα πρέπει να το καταλάβετε αν έχετε αναπτύξει ιστοσελίδα για λίγο.

Αλλά οι περισσότεροι από εσάς πιθανότατα δεν έχετε ακούσει για το στοιχείο. Αυτή η ετικέτα HTML ήταν γύρω από το HTML4, αλλά ελάχιστα παρατηρείται η εφαρμογή της στο φυσικό περιβάλλον. Το W3C περιγράφει αυτό το στοιχείο ως εξής:

“Το στοιχείο βάσης επιτρέπει στους συγγραφείς να καθορίζουν τη διεύθυνση URL βάσης εγγράφων για τους σκοπούς της επίλυσης σχετικών διευθύνσεων URL, και το όνομα του το προεπιλεγμένο πλαίσιο περιήγησης για τους σκοπούς των ακόλουθων υπερσυνδέσμων.”

Αυτό το στοιχείο βασικά καθορίζει τη διεύθυνση URL βάσης για σχετική διαδρομή στις ιστοσελίδες. Αντί να εξαρτάται από τη θέση της ρίζας ή τον τομέα του ιστότοπού σας, μπορείτε να το επισημάνετε κάπου αλλού, ίσως όπως η διεύθυνση URL όπου βρίσκονται οι πόροι σας στο CDN (Content Delivery Network). Ας δούμε πώς λειτουργεί πραγματικά.

Χρησιμοποιώντας το στοιχείο βάσης

ο ορίζεται κατά μήκος της πλευράς του και ετικέτες μέσα στο . Λαμβάνοντας υπόψη το ακόλουθο παράδειγμα, ορίσαμε τη βασική διεύθυνση URL στη Google.

Αυτή η προδιαγραφή θα επηρεάσει όλες τις διαδρομές μέσα στο έγγραφο, συμπεριλαμβανομένης μιας που καθορίζεται μέσα στο έγγραφο href χαρακτηριστικό και το src των εικόνων. Συνεπώς, υποθέτοντας ότι έχουμε ένα φύλλο στυλ, εικόνες και συνδέσμους στο έγγραφο που έχουν σχετική σχετική διαδρομή, για παράδειγμα:

  Σύνδεση αγκύρωσης  

Παρόλο που η ιστοσελίδα μας είναι κάτω από demo.hongkiat.com η σχετική διαδρομή θα αναφέρεται hongkiat.maxcdn.com, ακολουθώντας τη διαδρομή βάσης που καθορίζεται στο ετικέτα. Δοκιμάστε να τοποθετήσετε το δείκτη του ποντικιού πάνω από το σύνδεσμο και το πρόγραμμα περιήγησης θα σας δείξει πού κατευθύνεται ακριβώς η διαδρομή.

Όλες οι σχετικές διαδρομές θα είναι τελικά:

  Σύνδεση αγκύρωσης  

Ορισμός του στόχου προεπιλεγμένης σύνδεσης

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

Περιορισμοί

ο ετικέτα, ωστόσο, έχει κάποιες επιφυλάξεις σε ορισμένες περιπτώσεις:

Πρώτον, το η υποστήριξη του προγράμματος περιήγησης είναι μεγάλη. λειτουργεί στο IE6. Αλλά, το IE6 πιστεύει ότι χρειάζεται μια ετικέτα κλεισίματος . Αυτό θα μπορούσε να προκαλέσει ένα ζήτημα ιεραρχίας στο έγγραφο, εάν η ετικέτα κλεισίματος δεν έχει καθοριστεί. Ένας απλός γρήγορος τρόπος αντιμετώπισης αυτού του ζητήματος είναι η προσθήκη κλείνοντας μέσα σε ένα σχόλιο, .

Εάν χρησιμοποιείτε # # σε συνδυασμό με το για να συνδέσετε σε τμήματα του εγγράφου, ενδέχεται να αντιμετωπίσετε ένα ζήτημα στον Internet Explorer 9. Αντί να μεταβείτε στο αναφερόμενο τμήμα, ο Internet Explorer 9 θα φορτώσει ξανά τη σελίδα.

Επιπλέον, ένα κενό href θα οδηγήσει στη βασική διεύθυνση URL αντί να συνδεθεί με τον τρέχοντα κατάλογο όπου βρίσκεται η σελίδα (αυτή είναι η προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης), κάτι που μπορεί να προκαλέσει απροσδόκητα προβλήματα αναφοράς.

Τύλιξε

ο είναι μια εύχρηστη δυνατότητα HTML που μπορεί να απλοποιήσει τη σύνδεση παραπομπών σε ένα έγγραφο ιστού. Χρησιμοποιήστε την ετικέτα με προσοχή για να ελαχιστοποιήσετε τις παγίδες. Ακολουθήστε αυτές τις αναφορές παρακάτω για περισσότερες πληροφορίες σχετικά με το ετικέτα:

• Απόλυτες και σχετικές διευθύνσεις URL - MSDN
• Στοιχείο βάσης HTML - W3C