HTML länk

HTML använder superlänkar för att koppla samman ett dokument med ett annat på nätet.

Länkar kan hittas nästan på alla webbsidor. Genom att klicka på en länk kan du hoppa från en sida till en annan.

Exempel

Skapa superlänk
Detta exempel visar hur man skapar länkar i ett HTML-dokument.
Använd bild som länk
Detta exempel visar hur man använder bilder som länkar.

(Du kan hitta fler exempel längst ner på sidan.)

HTML-hyperlänkar (länkar)

En hyperlänk kan vara ett ord, ett ordpar eller en uppsättning ord, men också en bild. Du kan klicka på detta innehåll för att hoppa till en ny dokument eller en viss del av det aktuella dokumentet.

När du flyttar muspekaren över en länk på en webbsida, ändras pilen till en liten hand.

Vi skapar länkar genom att använda <a>-taggen i HTML.

Det finns två sätt att använda <a>-taggen på:

  1. Genom att använda href-egenskapen - skapa länkar till andra dokument
  2. Genom att använda name-egenskapen - skapa inre bokmärken i dokumentet

Läs mer:Vad är hypertext?

HTML-länkssyntax

HTML-koden för en länk är enkel. Den ser ut ungefär så här:

<a href="url">Länkstext</a>

href-egenskapen specificerar målet för länken.

Texten mellan öppnings- och stängningstecknen används som en hyperlänk.

Exempel

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

Ovanstående kod visas som:Besök CodeW3C.com

Klicka på denna hyperlänk kommer att ta användaren till startsidan för CodeW3C.com.

Tips:"Länkstext" behöver inte nödvändigtvis vara text. Bilder eller andra HTML-element kan också vara länkar.

HTML-länk - target-egenskapen

Med hjälp av Target-egenskapen kan du definiera var den länkade dokumentet ska visas.

Denna rad kommer att öppna dokumentet i ett nytt fönster:

<a href="http://www.codew3c.com/" target="_blank">Besök CodeW3C.com!</a>

Prova själv

HTML-länk - name-egenskapen

name-egenskapen specificerar namnet på en ankar (anchor).

Du kan skapa bokmärken i HTML-sidor med name-egenskapen.

Bokmärken visas inte på något särskilt sätt, de är osynliga för läsaren.

När vi använder namngivna ankar kan vi skapa länkar som direkt leder till denna namngivna ankar (t.ex. till en viss sektion på sidan), så att användaren inte behöver scrolla runt sidan för att hitta den information de behöver.

Syntaks för namngivna ankar:

<a name="label">Ankar (text som visas på sidan)</a>

Tips:Ankarnas namn kan vara vad du vill.

Tips:Du kan använda id-egenskapen för att ersätta name-egenskapen, namngivna ankar är lika effektiva.

Exempel

Först och främst namnger vi ankar i HTML-dokumentet (skapar en bokmärke):

<a name="tips">Grundläggande instruktioner - Användbara tips</a>

Sedan skapar vi en länk till denna ankar i samma dokument:

<a href="#tips">Användbara tips</a>

Du kan också skapa en länk till denna ankar på andra sidor:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Användbara tips</a>

I ovanstående kod lägger vi till #-tecknet och ankningsnamnet till slutet av URL:en, så kan vi direkt länka till tips-ankern.

Specifik effekt:Användbara tips

Grundläggande uppmärksamhet - användbara tips:

Kommentar:Lägg alltid till en rakt streck i underkatalogen. Om du skriver länken så här: href="http://www.codew3c.com/html" kommer det att generera två HTTP-förfrågningar till servern. Detta beror på att servern lägger till en rakt streck till denna adress och skapar en ny förfrågan, som följer: href="http://www.codew3c.com/html/".

Tips:Namngjorda ankar används ofta för att skapa innehållsregister i stora dokument. Man kan ge varje kapitel en namngjord ankar och lägga till länkar till dessa ankar i dokumentets övre del. Om du ofta besöker Baidu Baike, kommer du att märka att nästan varje artikel använder denna navigationsmetod.

Tips:Om webbläsaren inte hittar den definierade namngjorda ankan, kommer den att定位到文档的顶端. Inga fel kommer att inträffa.

Mer exempel

Öppna länk i ett nytt webbläsarfönster
Detta exempel visar hur man öppnar en sida i ett nytt webbläsarfönster, så att besökaren inte behöver lämna din webbplats.
Länka till olika platser på samma sida
Detta exempel visar hur man använder länkar för att hoppa till en annan del av dokumentet
Hoppa ut ur ramen
Detta exempel visar hur man hoppar ut ur ramen, om din sida är inramad.
Skapa e-postlänk
Detta exempel visar hur man länkar till en e-post. (Detta exempel fungerar endast efter att e-postklientprogrammet har installerats.)
Skapa e-postlänk 2
Detta exempel visar en mer komplex e-postlänk.

HTML länk etikett

Etikett Beskrivning
<a> Definiera en ankar.