HTML <a> href 属性

Ετικέτα HTML <a>

定义和用法

href 属性规定链接指向的页面的 URL。

href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。

如果 href 属性不存在，则 <a> 标签将不是超链接。

Συμβουλή:您可以使用 href="#top" 或 href="#" 链接到当前页面的顶部！

制作文本链接

一个引用其他文档的简单 <a> 标签可以是下列形式：

<a href="http://www.codew3c.com/index.html">CodeW3C.com 在线教程</a>

Ο περιηγητής εμφανίζει τη φράση "CodeW3C.com Online Tutorials" με ειδικά εφέ (συνήθως με υπογράμμιση και μπλε χρώμα), ώστε ο χρήστης να ξέρει ότι είναι ένας σύνδεσμος που μπορεί να συνδέσει σε άλλα έγγραφα. όπως αυτό:

CodeW3C.com σελίδα εκμάθησης在线教程

Ο χρήστης μπορεί επίσης να χρησιμοποιήσει τις επιλογές του περιηγητή για να καθορίσει τον χρώμα του κειμένου, να ρυθμίσει τον χρώμα του κειμένου πριν και μετά τον σύνδεσμο.

Συμβουλή:Μπορείτε να χρησιμοποιήσετε CSS Pseudo-classesΠροσθήκη σύνθετων και ποικίλων στυλ σε κείμενο σύνδεσμων.

Δημιουργία σύνδεσμων εικόνας

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

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

Το παρακάτω κώδικας θα προσθέσει έναν σύνδεσμο πίσω στην αρχική σελίδα του CodeW3C.com:

CodeW3C.com σελίδα εκμάθησης在线教程

Οι περισσότεροι περιηγητές εικόνων θα τοποθετήσουν ειδικά πλαίσια γύρω από την εικόνα που είναι μέρος ενός άγκιστρου. Με τον τοποθέτημα της εικόνας στην ετικέτα <img> με τις ιδιότητες Προπάνλημα borderΟρίζοντας σε 0 μπορεί να αφαιρέσει το πλαίσιο του σύνδεσμου. Μπορείτε επίσης να χρησιμοποιήσετε Προパμήτες της περιφράξεως CSSΓια να αλλάξετε το στυλ της κατώτερης πλαισίωσης του στοιχείου παγκόσμια.

Επίδειξη

Παράδειγμα 1

Η ιδιότητα href καθορίζει το στόχο του σύνδεσμου:

<a href="https://www.codew3c.com">Επιστροφή στο CodeW3C.com</a>

Προσπαθήστε το μόνοι σας

Παράδειγμα 2

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

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

Προσπαθήστε το μόνοι σας

Παράδειγμα 3

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

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

Προσπαθήστε το μόνοι σας

Παράδειγμα 4

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

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

Προσπαθήστε το μόνοι σας

Παράδειγμα 5

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

<a href="#section2">Μεταβείτε στο Κεφάλαιο 2</a>

Προσπαθήστε το μόνοι σας

Παράδειγμα 6

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

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

Προσπαθήστε το μόνοι σας

Γλώσσα

<a href="URL">

Τιμή attribute

Τιμή Περιγραφή
URL

Η URL του συνδέσμου.

Πιθανές τιμές:

  • Απο αβάντα URL - Οδηγεί σε άλλον ιστοχώρο (π.χ. href="http://www.example.com/index.html")
  • Απο rel URL - Οδηγεί σε αρχεία εντός του ιστοχώρου (π.χ. href="index.html")
  • Σύνδεση σε στοιχεία της σελίδας με καθορισμένο id (π.χ. href="#section2")
  • Άλλες συμφωνίες (π.χ. https://、ftp://、mailto:、file: κ.λπ.)
  • Σκέψεις (π.χ. href="javascript:alert('Hello');")

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Ετικέτα HTML <a>