Snelle tip stel relatieve URL's in met de base -tag

De tag in HTML is een relatief onbekend element, dat vrij recent een volwaardig onderdeel van HTML5 is geworden. Hiermee kunt u twee dingen doen:

1. Stel elke URL in die u kiest als basis voor alle relatieve URL's.
2. Stel standaard linkdoelen in.

De Base-ics

De element is gedefinieerd in de sectie en u kunt het maar één keer per document gebruiken. Je moet het zo vroeg mogelijk in je hoofdgedeelte plaatsen, zodat je het vanaf dat moment kunt gebruiken. De twee mogelijke attributen zijn href en doelwit. U kunt een van deze kenmerken alleen of beide tegelijk gebruiken.

Voorbeeld 1: Sneltoets activa laden

Stel dat u een site heeft met alle afbeeldingen en CSS in een map met de naam "assets". U zou uw kunnen definiëren tag zoals zo:

Dit zou je dan toestaan ​​om afbeeldingen of CSS als volgt in te laden:

De link naar style.css zou besluiten om http://www.myepicsite.com/assets/style.css en images_14 / quick-set-top-relatieve URL-met-de-base-tag.png zou laden van http://www.myepicsite.com/assets/images_14/quick-tip-set-relative-urls-with-the-base-tag.png.

Voorbeeld 2: Interne pagina-URL's

Wat als u een hoofddomein heeft dat naar zoiets verwijst http://thisrocks.com/app/ en alle interne links moeten bevatten app / in hun URL's.

U kunt uw basis-URL als volgt instellen:

Vanaf daar telkens wanneer u van de ene interne pagina naar de andere wilde linken, kon u eenvoudigweg gebruik maken van:

LINK 

Deze link zou besluiten om http://thisrocks.com/app/anotherpage.htm.

Voorbeeld 3: Default Link Target

Je kan ook gebruiken om het standaarddoel voor alle links op uw pagina in te stellen. Als je zou gebruiken:

... elke koppeling die niet expliciet zijn eigen doel had ingesteld, zou in een nieuw venster openen. U kunt de doelwit attribuut met of zonder een begeleidende href attribuut.

Deze functionaliteit kan mogelijk handig zijn voor inhoud die via iFrame is geladen, omdat u dan automatisch alle links op het bovenliggende frame kunt richten..

nadelen

Terwijl de url kan handig zijn, de nadelen ervan houden verband met het feit dat je het na het definiëren ervan eenmaal hebt volgehouden. U kunt het alleen op één manier gebruiken en het heeft dan invloed op alle URL's. Waar je ook de standaardinstellingen die je hebt ingesteld niet wilt gebruiken tag moet je deze specifiek overschrijven.

Moet je het gebruiken om op te lossen naar jouw middelen map zoals we hierboven deden en u later van de ene pagina van uw site naar een andere wilde linken, dat kon u niet doen met de algemene HTML van Pagina. 

Dit komt omdat de basis-URL dat is http://www.myepicsite.com/assets/ uw bezoekers zouden worden verzonden naar http://www.myepicsite.com/assets/page.html.

Als zodanig zou je je moeten overschrijven labelinstellingen door in plaats daarvan de absolute URL te gebruiken, d.w.z.. Pagina.

In-Page-ankers

Tijdens gebruik u kunt ook problemen ondervinden bij het koppelen van in-page ankers.

Normaal gesproken is een link zoals Terug naar boven zou je op dezelfde pagina houden, maar doorgaan naar de locatie van een element-lager id = "top", bijv. het zou besluiten om http://thisrocks.com/app/article.html#top.

Maar als u een gebruikt tag met een href attribuut zou je in plaats daarvan worden verzonden naar de basis-URL met #top toegevoegd aan het einde, bijv. http://thisrocks.com/app/#top.

Nogmaals, in dit geval zou je de standaardinstellingen die je hebt ingesteld moeten overschrijven tag door de pagina op te geven waarop u wilt dat uw link relatief is, bijvoorbeeld. Terug naar boven.

Waar Werkt het beste

De tag kan het beste worden gebruikt in een scenario waarin u weet dat u volledige controle over het gebruik van alle URL's kunt uitoefenen, d.w.z. u weet dat u de standaardinstellingen naar behoefte kunt overschrijven. Als u een thema maakt voor een CMS met veel onbekende variabelen, is het waarschijnlijk een goed idee om te vertrekken uit de mix.

Als u echter een statische HTML-site maakt kan erg nuttig zijn. Dit is des te meer het geval als je een sjablonerende taal zoals Jade of Handlebars gebruikt, waarmee je snelkoppelingen kunt plaatsen zoals Terug naar boven, dus als je de standaardinstellingen moet overschrijven, is het nog steeds snel en gemakkelijk.

Als u een goed idee hebt van de inhoud van uw project en het gebruik van URL's en links volledig onder uw controle staat, vindt u mogelijk de tag bespaart u veel tijd.

Lees meer over bij de W3C-wiki en HTML5-specificatie:

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