HTML <a> href Attribute

HTML <a> tag

Definition and Usage

href The attribute specifies the URL of the page to which the link points.

href The value of the attribute can be any valid document's relative or absolute URL, including fragment identifiers and JavaScript code segments. If the user selects the content within the <a> tag, the browser will attempt to retrieve and display href The attribute specifies a list of documents represented by the URL or the list of JavaScript expressions, methods, and functions to be executed.

If href If the attribute does not exist, the <a> tag will not be a hyperlink.

Wskazówka:You can link to the top of the current page using href="#top" or href="#"!

Creating Text Links

A simple <a> tag referencing another document can be in the following form:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Online Tutorial</a>

Przeglądarka wyświetla frazę "CodeW3C.com Online Tutorial" (zwykle niebieski tekst z podkreśleniem), aby użytkownicy wiedzieli, że jest to hiperłącze do innego dokumentu. Jak tutaj:

CodeW3C.com online tutorial

Użytkownicy mogą również korzystać z opcji przeglądarki, aby sami określić kolor tekstu, kolor tekstu linku przed i po linku.

Wskazówka:Można użyć CSS pseudoklasyDodaj złożone i różnorodne style do tekstu hiperłączy.

Tworzenie linków obrazowych

Większość zaawansowanych zakładki może zawierać obrazy. Poniższy LOGO to obraz linku, który po kliknięciu przeniesie użytkownika do strony głównej W3school:

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

Powyższy kod doda hiperłącze do LOGO CodeW3C.com, które przeniesie użytkownika do strony głównej:

CodeW3C.com online tutorial

Większość przeglądarek graficznych umieszcza specjalną ramkę wokół obrazu jako części łącza. Dzięki umieszczeniu obrazu w znaczniku <img> wokół obrazu, Atrybutu ramkiUstawienie na 0 usuwa ramkę z hiperłączy. Można również użyć Atrybuty ramki CSSMożna globalnie zmienić styl ramki elementu.

Przykład

Przykład 1

Atrybut href określa cel linku:

<a href="https://www.codew3c.com">Odwiedź CodeW3C.com</a>

Spróbuj sam

Przykład 2

Jak używać obrazów jako linków:

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

Spróbuj sam

Przykład 3

Jak linkować do adresu e-mail:

<a href="mailto:someone@example.com">Wyślij e-mail</a>

Spróbuj sam

Przykład 4

Jak linkować do numeru telefonu:

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

Spróbuj sam

Przykład 5

Jak linkować do innej części tej samej strony:

<a href="#section2">Przejdź do rozdziału drugiego</a>

Spróbuj sam

Przykład 6

Jak linkować do JavaScript:

<a href="javascript:alert('Hello World!');">Wykonaj JavaScript</a>

Spróbuj sam

Gramatyka

<a href="URL">

Wartość atrybutu

Wartość Opis
URL

URL linku.

Możliwe wartości:

  • Absolutny URL - wskazuje na inną stronę (np. href="http://www.example.com/index.html")
  • Relatywny URL - wskazuje na plik wewnątrz strony (np. href="index.html")
  • Łącze do elementu strony z określonym id (np. href="#section2")
  • Inne protokoły (np. https://, ftp://, mailto:, file: itp.)
  • Skrypt (np. href="javascript:alert('Hello');")

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie

HTML <a> tag