Specifica dell'URL della base del documento con l'elemento HTML

I siti web sono costruiti con una serie di link, che puntano a pagine e fonti come immagini e fogli di stile. Ci sono due modi per specificare l'URL che collega a queste fonti: utilizza un percorso assoluto o un percorso relativo.

Il percorso assoluto fa riferimento a una destinazione specifica, in genere inizia con il nome del dominio (insieme a HTTP) www.domain.com/destination/source.jpg. Il percorso relativo è l'opposto: la destinazione del collegamento dipende dalla posizione di root o, nella maggior parte dei casi, dal nome di dominio del tuo sito web.

Un tipico percorso relativo sarebbe simile a questo di seguito:

Se il tuo dominio web è, per esempio, hongkiat.com il percorso dell'immagine si risolverebbe in hongkiat.comimages_2 / specificando-documento-base-url-con-html-base-element.png. Dovresti capire questo se hai sviluppato un sito web per un po '.

Ma molti di voi probabilmente non ne hanno sentito parlare elemento. Questo tag HTML esiste già dall'HTML4, ma si vede pochissimo della sua implementazione in natura. W3C descrive questo elemento come:

“L'elemento base consente agli autori di specificare l'URL della base del documento ai fini della risoluzione degli URL relativi e il nome di il contesto di navigazione predefinito ai fini dei seguenti collegamenti ipertestuali.”

Questo element fondamentalmente decide l'URL di base per il percorso relativo nelle pagine web. Invece di dipendere dalla posizione di root o dal dominio del tuo sito web, puoi indicarlo altrove, magari come l'URL in cui risiedono le tue risorse in CDN (Content Delivery Network). Vediamo come funziona davvero.

Utilizzando l'elemento base

Il è definito lungo il lato e tag all'interno del . Dato il seguente esempio, impostiamo l'URL di base su Google.

Questa specifica influenzerà tutti i percorsi all'interno del documento, incluso uno che è specificato all'interno del documento href attributo e il src delle immagini. Pertanto, supponendo di avere un foglio di stile, immagini e collegamenti nel set di documenti con un percorso relativo come questo, ad esempio:

  Link di ancoraggio

Anche se la nostra pagina web è sotto demo.hongkiat.com il percorso relativo farà riferimento a hongkiat.maxcdn.com, seguendo il percorso di base specificato nel etichetta. Prova a passare il mouse sul link e il browser ti mostrerà dove si sta dirigendo esattamente il percorso.

Tutti i percorsi relativi alla fine saranno:

  Link di ancoraggio

Impostazione del target Link predefinito

Oltre a definire l'URL di base, il il tag può anche impostare il target link predefinito attraverso il bersaglio attributo. Supponi di voler aprire tutto il link nel documento nella nuova scheda del browser, impostare il bersaglio con _blank, così.

limitazioni

Il tag, tuttavia, contiene un paio di avvertimenti in alcune circostanze:

Prima il il supporto del browser è fantastico; funziona in IE6. Ma, IE6 pensa che richieda un tag di chiusura . Ciò potrebbe causare un problema di gerarchia nel documento, se il tag di chiusura non viene specificato. Un modo semplice e rapido per risolvere questo problema è aggiungendo chiudendo all'interno di un commento, .

Se stai usando # in collaborazione con il per collegare alle sezioni all'interno del documento, è possibile che si verifichi un problema in Internet Explorer 9. Anziché saltare alla sezione indicata, Internet Explorer 9 ricaricherà la pagina.

Inoltre, un vuoto href genererà l'URL di base anziché il collegamento alla directory corrente in cui risiede la pagina (questo è il comportamento predefinito del browser), che potrebbe causare problemi di referenziamento imprevisti.

Incartare

Il è una comoda funzionalità HTML che può semplificare il riferimento ai collegamenti in un documento web. Utilizzare il tag con attenzione per ridurre al minimo le insidie. Segui questi riferimenti di seguito per ulteriori informazioni su etichetta:

URL assoluti e relativi - MSDN
HTML Base Element - W3C