Hurtig Tips Sett relative URL-adresser med base -taggen

De tag i HTML er et relativt lite kjent element, etter å ha blitt en fullverdig del av HTML5 ganske nylig. Det gjør at du kan gjøre to ting:

1. Angi hvilken URL du velger som basis for alle relative nettadresser.
2. Angi standard lenke mål.

The Base-ics

De element er definert i seksjonen, og du kan bare bruke den en gang per dokument. Du bør plassere den så tidlig som mulig i hodet ditt, slik at du kan bruke det fra det punktet på. Dens to mulige attributter er href og mål. Du kan bruke begge disse egenskapene alene eller begge samtidig.

Eksempel 1: Innlasting av snarvei

La oss si at du har et nettsted som lagrer alle bildene sine og CSS i en mappe som heter "eiendeler". Du kan definere din merk som:

Dette vil da tillate deg å laste inn noen bilder eller CSS slik:

Koblingen til style.css ville løse på http://www.myepicsite.com/assets/style.css og images_14 / quick-tip-set-relativ-nettadresser-med-den-base tag.png ville laste fra http://www.myepicsite.com/assets/images_14/quick-tip-set-relative-urls-with-the-base-tag.png.

Eksempel 2: Innvendige nettadresser

Hva om du har et toppnivå domene som omdirigerer til noe sånt http://thisrocks.com/app/ og alle interne lenker må inkludere app / i deres nettadresser.

Du kan angi basisadressen din slik:

Derfra når du ønsket å lenke fra en intern side til en annen, kan du bare bruke:

LINK 

Denne koblingen vil løse til http://thisrocks.com/app/anotherpage.htm.

Eksempel 3: Standard Link Target

Du kan også bruke å angi standardmål for alle koblinger på siden din. Hvis du skulle bruke:

... En hvilken som helst lenke som ikke eksplisitt angav sitt eget mål, ville åpne i et nytt vindu. Du kan bruke mål attributt med eller uten tilhørende href Egenskap.

Denne funksjonaliteten kan potensielt være nyttig for innhold lastet inn via en iFrame, da du vil kunne automatisk ha alle koblinger deri målrettet mot overordnet ramme.

ulempene

Mens url kan være nyttig, dets ulemper er sentrert rundt det faktum at etter å ha definert det når du har sittende fast med det. Du kan bare bruke det på en enkelt måte, og det vil da påvirke alle nettadresser. Uansett hvor du ikke vil bruke standardinnstillingene som er angitt i din tag du må spesifikt tilsidesette dem.

Skal du bruke den til å løse til din eiendeler mappe som vi gjorde over, og du ønsket senere å lenke fra en side av nettstedet ditt til et annet, det kan du ikke gjøre med den vanlige HTML Side. 

Dette skyldes at med nettadressen er http://www.myepicsite.com/assets/ Dine besøkende vil bli sendt til http://www.myepicsite.com/assets/page.html.

Som sådan ville du måtte overstyre din tag innstillingene ved å bruke den absolutte nettadressen i stedet, dvs.. Side.

In-Side ankre

Når du bruker Du kan også få problemer med å knytte til ankre på siden.

Normalt en kobling som Tilbake til toppen ville holde deg på samme side, men hoppe over til plasseringen av et elementlager id = "top", f.eks det ville løse til http://thisrocks.com/app/article.html#top.

Men hvis du bruker en tag med en href attributt du vil i stedet bli sendt til basen URL med #topp festet til enden, f.eks. http://thisrocks.com/app/#top.

Igjen, i dette tilfellet må du overstyre standardinnstillingene som er angitt i din tag ved å angi siden du vil at lenken din skal være i forhold til, f.eks. Tilbake til toppen.

Hvor Fungerer best

De tag brukes best i et scenario der du vet at du vil kunne utøve full kontroll over bruk av alle nettadresser, dvs. at du vet at du vil kunne overstyre standardene etter behov. Hvis du lager et tema for et CMS der det er mange ukjente variabler, er det sannsynligvis en god ide å gå ut av blandingen.

Men hvis du bygger et statisk HTML-nettsted kan være svært nyttig. Dette er tilfelle enda mer, hvis du bruker et templerende språk som Jade eller Handlebars som lar deg legge snarveier som Tilbake til toppen, så hvis du trenger å overstyre standardinnstillingene, er det fortsatt raskt og enkelt.

Hvis du har en ide om hva prosjektets innhold vil være, og bruken av nettadresser og koblinger er fullt under din kontroll, kan du finne tag sparer deg mye tid.

Les mer om på W3C wiki og HTML5 spec:

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