HTML
Förankringar och hyperlänkar

Introduktion

Syntax

• <a href="URL or anchor">Link Text</a>

parametrar

Länk till en annan webbplats

Detta är den grundläggande användningen av elementet <a> ( ett nchor-element) :

<a href="http://example.com/">Link to example.com</a>

Det skapar en hyperlänk, till URL http://example.com/ som anges av attributet href (hypertextreferens), med ankartexten "Länk till exempel.com". Det ser ut som följande:

Länk till exempel.com

För att ange att den här länken leder till en extern webbplats kan du använda den external länktypen:

<a href="http://example.com/" rel="external">example site</a>

Du kan länka till en webbplats som använder ett annat protokoll än HTTP. För att t.ex. länka till en FTP-webbplats kan du göra,

<a href="ftp://example.com/">This could be a link to a FTP site</a>

I det här fallet är skillnaden att den här ankaretiketten begär att användarens webbläsare ansluter till example.com hjälp av File Transfer Protocol (FTP) snarare än Hypertext Transfer Protocol (HTTP).

Det här kan vara en länk till en FTP-webbplats

Öppna länken i ny flik / fönster

<a href="example.com" target="_blank">Text Here</a>

target anger var länken ska öppnas. Genom att ställa in den på _blank berättar du webbläsaren att öppna den i en ny flik eller ett nytt fönster (per användarinställning).

SÄKERHETSVOLNERABILITET VARNING!

Med hjälp av target="_blank" ger öppningsplatsen delvis åtkomst till window.opener objektet via JavaScript, vilket gör att den sidan sedan kan komma åt och ändra window.opener.location på din sida och potentiellt omdirigera användare till skadlig programvara eller phishing-webbplatser.

När du använder detta för sidor som du inte kontrollerar, lägg till rel="noopener" i din länk för att förhindra att window.opener objektet skickas med begäran.

För närvarande stöder Firefox inte noopener , så du måste använda rel="noopener noreferrer" för maximal effekt.

Länk till ett ankare

Ankare kan användas för att hoppa till specifika taggar på en HTML-sida. <a> -taggen kan peka på alla element som har ett id attribut. Besök dokumentationen om klasser och ID för att lära dig mer om ID . Förankringar används oftast för att hoppa till en del av en sida och används i samband med rubriktaggar.

Anta att du har skapat en sida ( page1.html ) om många ämnen:

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

När du har flera avsnitt kanske du vill skapa en innehållsförteckning högst upp på sidan med snabblänkar (eller bokmärken) till specifika avsnitt.

Om du gav ett id attribut till dina ämnen kan du sedan länka till dem

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

Nu kan du använda ankaret i innehållsförteckningen:

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

Dessa förankringar är också kopplade till webbsidan de är på ( page1.html ). Så du kan länka över webbplatsen från en sida till den andra genom att hänvisa till sidan och ankarnamnet.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

Länk som kör JavaScript

Använd bara javascript: -protokollet för att köra texten som JavaScript istället för att öppna den som en normal länk:

<a href="javascript:myFunction();">Run Code</a>

Du kan också uppnå samma sak med attributet onclick :

<a href="#" onclick="myFunction(); return false;">Run Code</a>

return false; är nödvändigt för att förhindra att din sida bläddrar till toppen när du klickar på länken till # . Se till att inkludera all kod du vill köra innan den, eftersom återvändande kommer att stoppa körningen av ytterligare kod.

Också anmärkningsvärt kan du inkludera ett utropstecken ! efter hashtaggen för att förhindra att sidan rullar till toppen. Det här fungerar eftersom alla ogiltiga sniglar gör att länken inte rullar någonstans på sidan, eftersom den inte kunde hitta det element som den refererar till (ett element med id="!" ). Du kan också bara använda valfri ogiltig snigel (t.ex. #scrollsNowhere ) för att uppnå samma effekt. I detta fall ska du return false; behövs inte:

<a href="#!" onclick="myFunction();">Run Code</a>

Ska du använda något av det här?

Svaret är nästan säkert nej . Att köra JavaScript på linje med det här elementet är ganska dålig praxis. Överväg att använda rena JavaScript-lösningar som letar efter elementet på sidan och binder en funktion till det istället. Lyssna på ett evenemang

Överväg också om detta element verkligen är en knapp istället för en länk . I så fall bör du använda <button> .

Länk till en sida på samma webbplats

Du kan använda en relativ sökväg för att länka till sidor på samma webbplats.

<a href="/example">Text Here</a>

Ovanstående exempel skulle gå till filen example i rotkatalogen ( / ) på servern.

Om den här länken var på http://example.com skulle följande två länkar föra användaren till samma plats

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Båda ovanstående skulle gå till page filen i rotkatalogen på example.com .

Länk som kör e-postklient

Grundläggande användning

Om värdet på href attributet börjar med mailto: det kommer att försöka öppna en e-postklient på klick:

<a href="mailto:[email protected]">Send email</a>

Detta sätter e-postadressen [email protected] som mottagare för det nyskapade e-postmeddelandet.

Cc och Bcc

Du kan också lägga till adresser för cc- eller bcc-mottagare med följande syntax:

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

Ämne- och kroppstext

Du kan också fylla i ämnet och kroppen för den nya e-postadressen:

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

Dessa värden måste vara URL-kodade .

Om du klickar på en länk med mailto: försöker du öppna den standard e-postklient som anges av ditt operativsystem eller så kommer den att be dig välja vilken klient du vill använda. Alla alternativ som anges efter mottagarens adress stöds inte av alla e-postklienter.

Länk som ringer ett nummer

Om värdet på href attributet börjar med tel: kommer din enhet att ringa numret när du klickar på det. Detta fungerar på mobila enheter eller på datorer / surfplattor som kör programvara - som Skype eller FaceTime - som kan ringa telefonsamtal.

<a href="tel:11234567890">Call us</a>

De flesta enheter och program uppmanar användaren på något sätt att bekräfta numret de ska ringa.