Snabbtips Ange relativa webbadresser med bas -taggen

De tagg i HTML är ett relativt litet känt element som har blivit en fullfjädrad del av HTML5 ganska nyligen. Det gör att du kan göra två saker:

1. Ange vilken webbadress du väljer som bas för alla relativa webbadresser.
2. Ange standardlänkmål.

The Base-ics

De element definieras i avsnittet och du kan bara använda det en gång per dokument. Du borde placera den så tidigt som möjligt i huvuddelen så att du kan använda den från den tiden. Dess två möjliga attribut är href och mål. Du kan använda endera av dessa attribut ensam eller båda samtidigt.

Exempel 1: Genvägsgenväxling

Låt oss säga att du har en webbplats som lagrar alla sina bilder och CSS i en mapp med namnet "tillgångar". Du kan definiera din tag så här:

Då kan du ladda in några bilder eller CSS så här:

Länken till style.css skulle lösa till http://www.myepicsite.com/assets/style.css och images_14 / snabb-tip-set-relativa-webbadresser-med-den-base-tag.png skulle ladda från http://www.myepicsite.com/assets/images_14/quick-tip-set-relative-urls-with-the-base-tag.png.

Exempel 2: Intern webbadresser

Vad händer om du har en toppdomän som omdirigerar till något liknande http://thisrocks.com/app/ och alla interna länkar måste inkludera app/ i sina webbadresser.

Du kan ange din basadress så här:

Därifrån när du vill länka från en intern sida till en annan kan du helt enkelt använda:

LÄNK 

Den här länken skulle lösa sig http://thisrocks.com/app/anotherpage.htm.

Exempel 3: Standardlänkmål

Du kan också använda för att ställa in standardmålet för alla länkar på din sida. Om du skulle använda:

... en länk som inte uttryckligen ställde sitt eget mål skulle öppnas i ett nytt fönster. Du kan använda mål attribut med eller utan åtföljande href attribut.

Denna funktionalitet kan eventuellt vara användbar för innehåll som laddas in via en iFrame, eftersom du automatiskt kan få alla länkar däri riktade till moderramen.

nackdelar

Medan Url kan vara praktisk, dess nackdelar är centrerade kring det faktum att efter att du har definierat det när du har fastnat med det. Du kan bara använda det på ett enda sätt och det kommer då att påverka alla webbadresser. Vart du inte vill använda de standardinställningar som anges i din taggar du måste specifikt åsidosätta dem.

Ska du använda det för att lösa ditt tillgångar mapp som vi gjorde ovan, och du ville senare länka från en sida till din webbplats till en annan, du kunde inte göra det med den vanliga HTML-filen av Sida. 

Detta beror på att basadressen är http://www.myepicsite.com/assets/ dina besökare skulle skickas till http://www.myepicsite.com/assets/page.html.

Som sådan skulle du behöva åsidosätta din tagginställningar med hjälp av den absoluta webbadressen istället, dvs.. Sida.

In-Page Anchors

När man använder du kan också komma i problem med att länka till ankare på sidan.

Normalt en länk som Tillbaka till toppen skulle hålla dig på samma sida men hoppa över till platsen för ett elementlager id = "top", t.ex. det skulle lösa till http://thisrocks.com/app/article.html#top.

Men om du använder en tagga med en href ange att du istället skulle skickas till basadressen med #topp bifogad till slutet, t.ex.. http://thisrocks.com/app/#top.

Återigen, i det här fallet måste du åsidosätta de standardvärden som anges i din tagg genom att ange den sida du vill ha din länk att vara i förhållande till, t.ex.. Tillbaka till toppen.

Var Fungerar bäst

De tagg används bäst i ett scenario där du vet att du kommer att kunna utöva fullständig kontroll över användningen av alla webbadresser, dvs du vet att du kan överväga standardinställningarna efter behov. Om du skapar ett tema för ett CMS där det finns många okända variabler är det nog en bra idé att lämna ur blandningen.

Men om du bygger en statisk HTML-sida kan vara till stor hjälp. Detta är fallet ännu mer om du använder ett templerande språk som Jade eller Handlebars som låter dig lägga genvägar som Tillbaka till toppen, så om du behöver åsidosätta standardinställningarna är det fortfarande snabbt och enkelt.

Om du har en bra uppfattning om vad ditt projekts innehåll kommer att vara och användningen av webbadresser och länkar är helt under din kontroll kan du hitta taggar sparar mycket tid.

Läs mer om vid W3C wiki och HTML5 spec:

• http://www.w3.org/wiki/HTML/Elements/base
• http://www.w3.org/TR/html5/document-metadata.html#the-base-element