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 of the <a> tag, the browser will try to retrieve and display href The attribute specifies a list of documents represented by the URL or executes JavaScript expressions, methods, and functions.

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

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

Create text links

A simple <a> tag that refers to another document can be in the following form:

CodeW3C.com online tutorial

Webbläsaren visar frasen "CodeW3C.com Online教程" med speciella effekter (vanligtvis understruken blå text), så att användaren vet att det är en hyperlänk som leder till en annan dokument. Som här:

CodeW3C.com online tutorial

Användare kan också använda alternativ i webbläsaren för att själv ange textfärg, samt färg på texten innan och efter länken.

Tips:Man kan använda CSS pseudoklasserLägg till komplexa och varierade stilar till textlänkar.

Skapa bildlänkar

Mer komplexa ankor kan också innehålla bilder. Här är en LOGO som är en bildlänk, klicka på bilden för att återvända till W3school startsidan:

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

Ovanstående kod lägger till en länk tillbaka till startsidan för CodeW3C.com LOGO:

CodeW3C.com online tutorial

de flesta grafiska webbläsare lägger till speciella kanter runt bilder som är en del av en länk. Genom att sätta in bilden i <img>-taggen kan man ta bort kanterna för bilden. kantegenskapenAtt sätta 0 kan ta bort kantlinjen för en hyperlink. Man kan också använda CSS kantegenskaperkan användas för att globalt ändra elementets kantstyle.

Exempel

Exempel 1

href-attributet specificerar målet för länken:

<a href="https://www.codew3c.com">Besök CodeW3C.com</a>

Prova själv

Exempel 2

Hur använder man bilder som länkar:

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

Prova själv

Exempel 3

Hur länkar man till en e-postadress:

<a href="mailto:someone@example.com">Skicka e-post</a>

Prova själv

Exempel 4

Hur länkar man till ett telefonnummer:

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

Prova själv

Exempel 5

Hur länkar man till en annan del på samma sida:

<a href="#section2">Gå till kapitel 2</a>

Prova själv

Exempel 6

Hur länkar man till JavaScript:

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

Prova själv

Syntax

<a href="URL">

Egenskapsvärde

Värde Beskrivning
URL

Länkens URL.

Möjliga värden:

  • Absolut URL - pekar på en annan webbplats (t.ex. href="http://www.example.com/index.html")
  • Relativ URL - pekar på en fil inom webbplatsen (t.ex. href="index.html")
  • Länka till en element i sidan med ett specifikt id (t.ex. href="#section2")
  • Andra protokoll (t.ex. https://, ftp://, mailto:, file: osv.)
  • Skript (t.ex. href="javascript:alert('Hello');")

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd

HTML <a> tag