Sfat rapid Setați adrese URL relativ Cu eticheta de bază

tag-ul HTML este un element relativ puțin cunoscut, devenind o parte deplină a HTML5 destul de recent. Vă permite să faceți două lucruri:

1. Setați orice adresă URL pe care o alegeți ca bază pentru toate adresele URL relative.
2. Stabiliți ținte de legătură implicite.

Baza-ics

element este definit în secțiune și o puteți folosi o singură dată pe document. Ar trebui să o plasați cât mai curând posibil în secțiunea capului, pentru a putea să o utilizați din acel moment. Cele două atribute posibile sunt href și ţintă. Puteți utiliza oricare dintre aceste atribute singur sau ambele simultan.

Exemplul 1: Comandă rapidă de încărcare a activelor

Să presupunem că aveți un site care stochează toate imaginile și CSS într-un folder denumit "active". S-ar putea să vă definiți eticheta este așa:

Acest lucru vă va permite apoi să încărcați în orice imagini sau CSS cum ar fi:

Legătura către style.css ar rezolva http://www.myepicsite.com/assets/style.css și images_14 / set rapid-tip-relativă-cu-url-the-base-tag.png ar încărca de la http://www.myepicsite.com/assets/images_14/quick-tip-set-relative-urls-with-the-base-tag.png.

Exemplul 2: adrese URL ale paginilor interne

Dacă aveți un domeniu de nivel superior care redirecționează la ceva asemănător http://thisrocks.com/app/ și toate legăturile interne trebuie să includă app / în adresele lor URL.

S-ar putea să setați adresa URL de bază astfel:

De acolo ori de câte ori doriți să vă conectați dintr-o pagină internă la alta, puteți pur și simplu să utilizați:

LEGĂTURĂ 

Această legătură ar rezolva problema http://thisrocks.com/app/anotherpage.htm.

Exemplul 3: Implicit

Puteți utiliza, de asemenea pentru a seta ținta implicită pentru toate linkurile de pe pagina dvs. Dacă ați fi folosit:

... orice legătură care nu și-a stabilit în mod explicit țintă proprie se deschide într-o fereastră nouă. Puteți utiliza funcția ţintă atribut cu sau fără însoțitor href atribut.

Această funcționalitate ar putea fi utilă pentru conținutul încărcat prin intermediul unui iFrame, deoarece veți putea avea automat toate linkurile direcționate către cadrul parental.

Inconvenientele

In timp ce url poate fi la îndemână, dezavantajele sale centrale în jurul valorii de faptul că, după definirea ei o dată sunteți blocat cu ea. Puteți să-l utilizați într-un singur mod și acesta va afecta toate adresele URL. Oriunde nu doriți să utilizați valorile prestabilite stabilite în dvs. eticheta pe care trebuie să o suprascrieți în mod specific.

Ar trebui să îl utilizați pentru a vă rezolva problema bunuri așa cum am făcut mai sus și ați dorit mai târziu să vă conectați dintr-o pagină a site-ului dvs. la alta, nu ați putea face acest lucru cu codul HTML comun al Pagină. 

Acest lucru se datorează faptului că adresa URL de bază este http://www.myepicsite.com/assets/ vizitatorii dvs. ar fi trimisi la http://www.myepicsite.com/assets/page.html.

Ca atare, ar trebui să vă suprascrieți setările de etichete utilizând în schimb adresa URL absolută, adică. Pagină.

Ancore în pagină

Atunci când se utilizează de asemenea, puteți întâlni probleme legate de ancorele în pagină.

În mod normal, o legătură, cum ar fi Inapoi sus vă va ține pe aceeași pagină, dar veți trece la locația unui element care poartă id = "top", de exemplu. ar rezolva http://thisrocks.com/app/article.html#top.

Totuși, dacă folosiți a eticheta cu un href atributul pe care l-ați trimite în schimb la adresa URL de bază #top anexată la sfârșit, de exemplu,. http://thisrocks.com/app/#top.

Din nou, în acest caz va trebui să înlocuiți setările prestabilite stabilite în dvs. eticheta specificând pagina pe care doriți ca linkul dvs. să fie relativ la, de ex. Inapoi sus.

Unde Funcționează mai bine

tag-ul este cel mai bine folosit într-un scenariu în care știți că veți putea exercita un control complet asupra utilizării tuturor adreselor URL, adică știți că veți putea să înlocuiți setările implicite după cum este necesar. Dacă creați o temă pentru un CMS în care există multe variabile necunoscute, este probabil o idee bună să plecați din amestec.

Cu toate acestea, dacă construiți un site HTML static poate fi foarte util. Acesta este cazul chiar dacă utilizați un limbaj de template, cum ar fi Jade sau Handlebars, care vă vor permite să plasați comenzi rapide cum ar fi Inapoi sus, astfel încât dacă aveți nevoie să suprascrieți setările implicite este încă rapid și ușor.

Dacă aveți o idee bună despre conținutul proiectului dvs., iar utilizarea adreselor URL și a legăturilor acestuia este pe deplin sub controlul dvs., puteți găsi eticheta vă economisește mult timp.

Citiți mai multe despre la wiki-ul W3C și spec. HTML5:

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