Suggerimento rapido imposta URL relativi con il tag base

Il il tag in HTML è un elemento relativamente poco conosciuto, essendo diventato una parte di HTML5 completamente recente abbastanza recentemente. Ti consente di fare due cose:

1. Imposta qualsiasi URL che scegli come base per tutti gli URL relativi.
2. Imposta target link predefiniti.

The Base-ics

Il elemento è definito nel sezione e puoi usarla solo una volta per documento. Dovresti posizionarlo il prima possibile nella sezione della testa in modo da poterlo usare da quel momento in poi. I suoi due possibili attributi sono href e bersaglio. Puoi utilizzare uno di questi attributi da solo o entrambi contemporaneamente.

Esempio 1: collegamento di caricamento delle risorse

Supponiamo che tu abbia un sito che memorizza tutte le sue immagini e i CSS in una cartella denominata "risorse". Potresti definire il tuo tag in questo modo:

Questo ti permetterebbe quindi di caricare qualsiasi immagine o CSS come questo:

Il link a style.css risolverebbe a http://www.myepicsite.com/assets/style.css e images_14 / quick-tip-set-relativi-URL-con-la-base-tag.png caricare da http://www.myepicsite.com/assets/images_14/quick-tip-set-relative-urls-with-the-base-tag.png.

Esempio 2: URL delle pagine interne

Che cosa succede se hai un dominio di primo livello che reindirizza a qualcosa di simile http://thisrocks.com/app/ e tutti i collegamenti interni devono includere app / nei loro URL.

Puoi impostare il tuo URL di base in questo modo:

Da lì ogni volta che volevi collegare da una pagina interna ad un'altra, puoi semplicemente usare:

LINK 

Questo collegamento verrebbe risolto in http://thisrocks.com/app/anotherpage.htm.

Esempio 3: Target Link predefinito

Puoi anche usare per impostare la destinazione predefinita per tutti i collegamenti sulla tua pagina. Se dovessi usare:

... qualsiasi link che non avesse impostato esplicitamente il proprio target si apriva in una nuova finestra. Puoi usare il bersaglio attributo con o senza un accompagnamento href attributo.

Questa funzionalità potrebbe essere utile per i contenuti caricati tramite un iFrame, dato che si sarebbe in grado di avere automaticamente tutti i collegamenti in esso indirizzati al frame principale.

svantaggi

Mentre il url può essere utile, i suoi lati negativi sono centrati sul fatto che dopo averlo definito una volta che sei bloccato con esso. Puoi usarlo solo in un modo e poi interesserà tutti gli URL. Ovunque tu non voglia usare i valori di default impostati nel tuo tag devi specificatamente scavalcarli.

Dovresti usarlo per risolvere il tuo risorse cartella come abbiamo fatto sopra, e in seguito volevi collegare da una pagina del tuo sito a un'altra, non avresti potuto farlo con l'HTML comune di Pagina. 

Questo perché con l'URL di base è http://www.myepicsite.com/assets/ i tuoi visitatori sarebbero stati inviati a http://www.myepicsite.com/assets/page.html.

In quanto tale dovresti scavalcare il tuo etichettare le impostazioni utilizzando invece l'URL assoluto, ad es. Pagina.

In-page Anchors

Quando si usa puoi anche incorrere in problemi di collegamento agli ancoraggi in-page.

Normalmente, un collegamento come Torna in cima ti terrebbe sulla stessa pagina, ma salta alla posizione di un cuscinetto di un elemento id = "top", per esempio. risolverebbe a http://thisrocks.com/app/article.html#top.

Tuttavia se stai usando un tag con un href attributo che avresti invece inviato all'URL di base con #superiore aggiunto alla fine, ad es. http://thisrocks.com/app/#top.

Ancora una volta, in questo caso dovrai sovrascrivere i valori di default impostati nel tuo tag specificando la pagina in cui desideri che il tuo link sia relativo, ad es. Torna in cima.

Dove Funziona meglio

Il il tag è utilizzato al meglio in uno scenario in cui sai che sarai in grado di esercitare il controllo completo sull'uso di tutti gli URL, cioè sai che sarai in grado di sovrascrivere i valori predefiniti come richiesto. Se stai creando un tema per un CMS in cui ci sono molte variabili sconosciute è probabilmente una buona idea andarsene fuori dal mix.

Tuttavia, se stai creando un sito HTML statico può essere molto utile. Questo è il caso ancora di più se stai usando un linguaggio di template come Jade o Handlebars che ti permetterà di inserire scorciatoie come Torna in cima, quindi se hai bisogno di sovrascrivere le impostazioni predefinite è ancora semplice e veloce.

Se hai un'idea precisa del contenuto del tuo progetto e il suo utilizzo di URL e link è sotto il tuo controllo, potresti trovare il l'etichetta ti fa risparmiare molto tempo.

Leggi di più al wiki W3C e alle specifiche HTML5:

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