Jakie są zalecenia dla znacznika html?

Przed podjęciem decyzji, czy użyć znacznika <base>, musisz zrozumieć, jak to działa, do czego można go użyć i jakie są konsekwencje, a wreszcie przeważyć zalety/wady.

Znacznik <base> ułatwia głównie tworzenie odnośników względnych w językach szablonów, ponieważ nie musisz martwić się o bieżący kontekst w każdym łączu.

Możesz zrobić na przykład

<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />

Zamiast

<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />

Należy pamiętać, że wartość <base href> kończy się ukośnikiem, w przeciwnym razie zostanie zinterpretowany względem ostatniej ścieżki.

Jeśli chodzi o kompatybilność przeglądarki, powoduje to tylko problemy w IE. Znacznik <base> jest w HTML określony jako , a nie posiadający znacznik końcowy </base>, więc legalne jest używanie <base> bez znacznika końcowego. Jednak IE6 myśli inaczej i cała zawartość PO znacznik <base> jest w takim przypadku umieszczony jako child elementu <base> w drzewie HTML DOM. Może to spowodować na pierwszy rzut oka niewytłumaczalne problemy w Javascript / jQuery / CSS, tzn. elementy są całkowicie nieosiągalne w określonych selektorach, takich jak html>body, dopóki nie odkryjesz w Inspektorze HTML DOM, że pomiędzy nimi powinna znajdować się base (i head).

<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->

Jeśli nie zależy Ci na Walidatorze W3, lub gdy jesteś już na HTML5, możesz go po prostu zamknąć, każdy webbrowser go obsługuje w każdym razie:

<base href="http://example.com/en/" />

Zamknięcie znacznika <base> również natychmiast naprawia insanity IE6 na WinXP SP3, aby zażądać <script> zasobów ze względnym URI w src w nieskończonej pętli.

Inny potencjalny problem IE pojawi się, gdy użyjesz względnego URI w znaczniku <base>, na przykład <base href="//example.com/somefolder/"> lub <base href="/somefolder/">. To się nie powiedzie w IE6 / 7 / 8. Nie jest to jednak dokładnie wina przeglądarki; używanie względnych Uri w znaczniku <base> jest w zasadzie błędem. Specyfikacja HTML4 stwierdził, że powinien to być bezwzględny URI, rozpoczynając od schematu http:// lub https://. To zostało upuszczone w HTML5 specyfikacji . Jeśli więc używasz tylko przeglądarek zgodnych z HTML5 i kierujesz je tylko do przeglądarek zgodnych z HTML5, to powinieneś mieć wszystko w porządku, używając względnego URI w znaczniku <base>.

Jeśli chodzi o używanie anchorów nazwanych / hash, takich jak <a href="#anchor">, anchorów łańcuchowych, takich jak <a href="?foo=bar"> i anchorów fragmentów ścieżki, takich jak <a href=";foo=bar">, z tagiem <base> W zasadzie deklarujesz wszystkie względne linki względem niego, W tym tego rodzaju kotwice. Żadne z odnośników względnych nie jest już powiązane z bieżącym URI żądania (tak jak miałoby to miejsce bez znacznika <base>). Na początek może to być mylące. Aby skonstruować te kotwice we właściwy sposób, w zasadzie musisz dołączyć URI,

<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>

Gdzie ${uri} zasadniczo tłumaczy się na $_SERVER['REQUEST_URI'] W PHP, ${pageContext.request.requestURI} W JSP i #{request.requestURI} W JSF. Należy zauważyć, że frameworki MVC takie jak JSF mają znaczniki zmniejszające to wszystko kotła i usunięcie potrzeby <base>. Zobacz także a. o. jakiego adresu URL użyć, aby połączyć / przejść do innych stron JSF .

Cóż, chwileczkę. Nie sądzę, że baza zasługuje na taką złą reputację.

Fajną rzeczą w znaczniku bazowym jest to, że umożliwia on wykonywanie złożonych przepisań URL bez większych kłopotów.

Oto przykład. Decydujesz się na przeprowadzkę http://example.com/product/category/thisproduct do http://example.com/product/thisproduct . zmieniasz swoje .plik htaccess do przepisania pierwszego adresu URL do drugiego adresu URL.

Z podstawowym znacznikiem na miejscu, robisz swoje .htaccess przepisać i tyle. Nie ma sprawy. Ale bez znacznika podstawowego wszystkie twoje linki względne pękną.

Przepisywanie adresów URL jest często konieczne, ponieważ ich poprawianie może pomóc w architekturze witryny i widoczności w wyszukiwarkach. To prawda, że będziesz potrzebował obejść problemów " # "i", o których ludzie wspominali. Ale znacznik bazowy zasługuje na miejsce w zestawie narzędzi.

Aby zdecydować, czy powinien być używany, czy nie, powinieneś być świadomy tego, co robi i czy jest potrzebny. Jest to już częściowo opisane w tej odpowiedzi , do której również przyczyniłem się. Ale aby ułatwić zrozumienie i naśladowanie, drugie Wyjaśnienie tutaj. Najpierw musimy zrozumieć:

W jaki sposób przeglądarka przetwarza linki bez użycia <BASE>?

Dla niektórych przykładów, Załóżmy, że mamy te adresy URL:

A) http://www.example.com/index.html
B) http://www.example.com/
C) http://www.example.com/page.html
D) http://www.example.com/subdir/page.html

A+B powoduje wysłanie do przeglądarki tego samego pliku (index.html), C Oczywiście wysyła page.html, A D wysyła /subdir/page.html.

Załóżmy dalej, że obie strony zawierają zbiór linków:

1) w pełni kwalifikowane linki bezwzględne (http://www...)
2) lokalne linki bezwzględne (/some/dir/page.html)
3) odnośniki względne, w tym nazwy plików (dir/page.html) i
4) Linki względne tylko z" segmentami"(#anchor, ?foo=bar).

Przeglądarka odbiera stronę i renderuje HTML. Jeśli znajdzie jakiś adres URL, musi wiedzieć, gdzie go wskazać. To jest zawsze jasne dla Link 1), który jest traktowany tak, jak jest. Wszystkie inne zależą od adresu URL renderowanej strony:

URL     | Link | Result
--------+------+--------------------------
A,B,C,D |    2 | http://www.example.com/some/dir/page.html
A,B,C   |    3 | http://www.example.com/dir/page.html
D       |    3 | http://www.example.com/subdir/dir/page.html
A       |    4 | http://www.example.com/index.html#anchor
B       |    4 | http://www.example.com/#anchor
C       |    4 | http://www.example.com/page.html#anchor
D       |    4 | http://www.example.com/subdir/page.html#anchor

Teraz co zmienia Z <BASE> być wykorzystywanym?

<BASE> ma zastąpić adres URL tak, jak wygląda w przeglądarce. Renderuje wszystkie linki tak, jakby użytkownik wywołał adres URL podany w <BASE>. Co wyjaśnia pewne zamieszanie w kilku innych odpowiedzi:

W przeciwieństwie do innych systemów, w których nie ma dostępu do Internetu, nie ma dostępu do Internetu.]} W przeciwieństwie do innych serwerów, które nie są używane przez użytkownika, nie są używane przez użytkownika.]}
• względne adresy URL stają się tutaj krytyczne, więc musisz zachować szczególną ostrożność, jak ustawisz <BASE>:
  • lepiej unikać ustawiania go na katalog . W ten sposób linki "typu 3" mogą nadal działać, ale to z pewnością łamie te z " typu 4 "(z wyjątkiem"przypadku B")
  • Ustaw go na w pełni kwalifikowana nazwa pliku daje w większości przypadków pożądane rezultaty.

Przykład wyjaśnia to najlepiej

Powiedz, że chcesz "poprawić" jakiś adres URL używając mod_rewrite:

• prawdziwy plik: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
• prawdziwy URL: http://www.example.com/some/dir/file.php?lang=en
• przyjazny dla użytkownika URL: http://www.example.com/en/file

Załóżmy, że mod_rewrite jest używany do transparentnie przepisać przyjazny dla użytkownika adres URL do rzeczywistego (brak zewnętrznego przekierowania, więc "przyjazny dla użytkownika" pozostaje w pasku adresu przeglądarki, podczas gdy rzeczywisty jest ładowany). Co teraz?

• No <BASE> specified: breaks all relative links (as they would be based on http://www.example.com/en/file now)
• <BASE HREF='http://www.example.com/some/dir>: absolutnie źle. dir będzie uważany za plik część podanego adresu URL, więc nadal wszystkie odnośniki względne są uszkodzone.
• <BASE HREF='http://www.example.com/some/dir/>: już lepiej. Jednak odnośniki względne "typu 4" są nadal złamane (z wyjątkiem "przypadku B").
• <BASE HREF='http://www.example.com/some/dir/file.php>: dokładnie. Wszystko powinno działać z tym.

Ostatnia nuta

Pamiętaj, że dotyczy to wszystkich adresów URL w Twoim dokumencie:

• <A HREF=
• <IMG SRC=
• <SCRIPT SRC=
• …

Drupal początkowo opierał się na znaczniku <base>, a później podjął decyzję, aby nie używać z powodu problemów z indeksami i pamięciami podręcznymi HTTP.

Generalnie nie lubię zamieszczać linków. Ale ta jest naprawdę warta dzielenia się, ponieważ może przynieść korzyści osobom szukającym szczegółów prawdziwego doświadczenia z tagiem <base>:

Http://drupal.org/node/13148

Ułatwia przeglądanie stron w trybie offline; możesz umieścić w pełni kwalifikowany adres URL w tagu podstawowym, a następnie Twoje zdalne zasoby załadują się poprawnie.

Hash " # " obecnie działa dla linków przeskakujących w połączeniu z elementem podstawowym, ale tylko w najnowszych wersjach Google Chrome i Firefox, a nie IE9.

IE9 wydaje się powodować przeładowanie strony, bez skakania gdziekolwiek. Jeśli używasz łącza do przeskoków Na zewnątrz ramki iframe, kierując ramkę do ładowania łączy do przeskoków na oddzielnej stronie wewnątrz ramki, zamiast tego otrzymasz drugą kopię strony łącza do przeskoków załadowanej wewnątrz ramki.

Prawdopodobnie nie jest zbyt popularny, ponieważ nie jest dobrze znany. Nie bałbym się go używać, ponieważ wszystkie główne przeglądarki go obsługują.

Jeśli witryna używa AJAX będziesz chciał upewnić się, że wszystkie strony mają to ustawione poprawnie lub może skończyć się z linków, które nie mogą być rozwiązane.

Po prostu nie używaj atrybutu target Na stronie HTML 4.01 Strict.

W przypadku obrazów SVG inlined na stronie pojawia się kolejna ważna kwestia, która pojawia się przy użyciu znacznika base:

Ponieważ z tagiem base (jak już wspomniano powyżej) skutecznie tracisz możliwość używania względnych skrótów URL, takich jak w

<a href="#foo">

Ponieważ zostaną one rozwiązane w oparciu o bazowy adres URL, a nie lokalizację bieżącego dokumentu, a zatem nie są już względne. Musisz więc dodać ścieżkę bieżącego dokumentu do tego rodzaju łączy jak w

<a href="/path/to/this/page/name.html#foo">

Tak więc jeden z pozornie pozytywnych aspektów znacznika base (który polega na odsunięciu długich przedrostków URL od znacznika kotwicy i uzyskaniu ładniejszych, krótszych anchorów) całkowicie odwraca się od lokalnych adresów skrótu.

Jest to szczególnie denerwujące, gdy wstawiamy SVG na twojej stronie, czy to statyczny SVG, czy dynamicznie generowany SVG, ponieważ w SVG może być wiele takich odniesień i wszystkie zostaną złamane, gdy tylko zostanie użyty znacznik base, na większości, ale nie wszystkich użytkowników implementacje agenta (Chrome przynajmniej nadal działa w tych scenariuszach w momencie pisania).

Jeśli używasz systemu szablonów lub innego narzędzia-łańcucha, który przetwarza / generuje Twoje strony, zawsze starałbym się pozbyć tagu base, ponieważ jak widzę, przynosi to więcej problemów do tabeli niż rozwiązuje.

Należy również pamiętać, że jeśli uruchomisz swój serwer WWW na niestandardowym porcie, musisz również podać numer portu w bazie href:

<base href="//localhost:1234" />  // from base url
<base href="../" />  // for one step above

Nigdy nie widziałem sensu jej używać. Zapewnia bardzo niewielką przewagę, a nawet może utrudnić korzystanie.

Chyba, że masz setki lub tysiące linków, wszystkie do tego samego podkatalogu. Wtedy może to zaoszczędzić kilka bajtów przepustowości.

Jako podsumowanie, wydaje mi się, że był jakiś problem z tagiem w IE6. Możesz umieścić je w dowolnym miejscu ciała, przekierowując różne części witryny do różnych lokalizacji. Zostało to naprawione w IE7, który złamał wiele stron.

Mają również stronę, w której używany jest base - tag, a opisany problem wystąpił. (po aktualizacji jquery ), był w stanie to naprawić, mając adresy URL kart w ten sposób:

<li><a href="{$smarty.server.REQUEST_URI}#tab_1"></li>

To czyni je "lokalnymi"

Referencje, których użyłem:

Http://bugs.jqueryui.com/ticket/7822 http://htmlhelp.com/reference/html40/head/base.html http://tjvantoll.com/2013/02/17/using-jquery-ui-tabs-with-the-base-tag/

Praca z AngularJS tag podstawowy złamał $cookieStore po cichu i zajęło mi trochę czasu, aby dowiedzieć się, dlaczego moja aplikacja nie mogła już pisać ciasteczek. Ostrzegam...

Jedna rzecz, o której należy pamiętać:

Jeśli tworzysz stronę internetową, która ma być wyświetlana w UIWebView na iOS, musisz użyć podstawowego tagu. Inaczej to po prostu nie zadziała. Czy to JavaScript, CSS, obrazy-żaden z nich nie będzie działał z odnośnikami względnymi pod UIWebView, chyba że baza tagów jest określona.

Byłem już przez to złapany, dopóki się nie dowiedziałem.

Znalazłem sposób na użycie <base> i linków bazujących na anchorze. Możesz użyć JavaScript, aby linki takie jak #contact działały tak, jak muszą. Użyłem go w niektórych stronach paralaksy i działa dla mnie.

<base href="http://www.mywebsite.com/templates/"><!--[if lte IE 6]></base><![endif]-->

...content...

<script>
var link='',pathname = window.location.href;
$('a').each(function(){
    link = $(this).attr('href');
    if(link[0]=="#"){
        $(this).attr('href', pathname + link);
    }
});
</script>

Powinieneś użyć na końcu strony

Przykład href bazowy

Powiedzmy typową stronę z linkami:

<a href=home>home</a> <a href=faq>faq</a> <a href=etc>etc</a>

.i linki do folderu diff:

..<a href=../p2/home>Portal2home</a> <a href=../p2/faq>p2faq</a> <a href=../p2/etc>p2etc</a>..

Z bazą href , możemy uniknąć powtarzania w folderze bazowym:

<base href=../p2/>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>

<a href=../p1/home>home</a> <a href=../p1/faq>faq</a> <a href=../p1/etc>etc</a>
<!--.. <../p1/> basepath is repeated -->

<base href=../p2>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>

(cel podstawowy może się przydać.) Baza href jest bezużyteczna jako:

• strona jest równie mokra od:
  • default base [- folder nadrzędny] & rlhar; perfect (chyba że niepotrzebne / rzadkie wyjątki 𝒞1 & 𝒞 2 ).
  • current web & rlhar; multiple base hrefs nieobsługiwane .

Related

• porównanie z bazą Apache re rewrite