Quais são as recomendações para tag html?

Antes de decidir se deve ou não utilizar a marca <base>, tem de compreender como funciona, para que pode ser utilizada e quais são as implicações e, finalmente, compensar as vantagens/desvantagens.

A marca <base> facilita principalmente a criação de ligações relativas nas línguas templating, uma vez que não precisa de se preocupar com o contexto actual em cada ligação.

Você pode fazer por exemplo

<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" />

Em vez de

<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" />

Por favor, note que o <base href> o valor termina com uma barra, caso contrário será interpretado em relação ao último caminho.

Quanto à compatibilidade do navegador, isto só causa problemas no IE. A marca <base> está no HTML especificado como Não tendo uma marca final </base>, por isso é legítimo apenas usar <base> sem uma marca final. No entanto, o IE6 pensa o contrário e todo o conteúdo após a marca <base> é, nesse caso, colocada como criança do elemento <base> na árvore DOM HTML. Isto pode causar à primeira vista problemas inexplicáveis em Javascript / jQuery / CSS, ou seja, os elementos sendo completamente inalcançáveis em seletores específicos como html>body, até que você descubra no Inspetor DOM HTML que deve haver um base (e head) no meio.

Uma versão comum do IE6 está a usar um comentário condicional IE para incluir a marca final:

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

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

Fechar a marca <base> também corrige instantaneamente a insanidadedo IE6 no WinXP SP3 para solicitar <script> recursos com um URI relativo em src num ciclo infinito.

Outro potencial problema IE irá manifestar-se quando você usar um URI relativo na marca <base>, como <base href="//example.com/somefolder/"> ou <base href="/somefolder/">. Isto falhará em IE6 / 7 / 8. No entanto, isso não é exatamente culpa do navegador; usar URIs relativos na tag <base> é a saber, em seu próprio erro. A especificação HTML4 afirmou que deveria ser um URI absoluto, começando assim com o esquema http:// ou https://. Esta foi retirada na especificação HTML5 . Por isso, se usar apenas navegadores compatíveis com HTML5 e HTML5 de destino, então deverá estar tudo bem usando um URI relativo na marca <base>.

Quanto à utilização de âncoras de fragmentos com nome/hash como <a href="#anchor">, âncoras de cadeias de consulta como <a href="?foo=bar"> e âncoras de fragmentos de caminho como <a href=";foo=bar">, com a marca <base> que está basicamente a declarar Tudo relativo ligações relativas a ele, incluindo esse tipo de âncoras. Nenhuma das ligações relativas são relativas ao URI atual pedido (como aconteceria sem a marca <base>). Isto pode, em primeiro lugar, ser confuso para começar. Para construir essas âncoras da maneira certa, você basicamente precisa incluir o URI,

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

Onde {[31] } basicamente se traduz para $_SERVER['REQUEST_URI'] em PHP, ${pageContext.request.requestURI} em JSP, e #{request.requestURI} em JSF. Note-se que frameworks MVC como JSF têm tags reduzindo tudo isso boilerplate e remoção da necessidade de <base>. Veja também A. O. que URL usar para ligar / navegar para outras páginas JSF .

A coisa boa sobre a tag base é que ela permite que você faça reescrita de URL complexos com menos aborrecimento.

Como são processadas as ligações pelo navegador sem que <BASE> sejam utilizadas?

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 ambos resultam no mesmo ficheiro (index.html) ser enviado para o navegador, C é claro envia page.html, E D envia /subdir/page.html.

O navegador recebe a página, e torna o HTML. Se ele encontrar alguma URL, ele precisa saber para onde apontá-lo. Isso é sempre claro para Link 1), que é tomado como está. Todos os outros dependem do URL da página renderizada:

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

Agora o que muda com <BASE> ser usado?

<BASE> é suposto substituir o URL tal como aparece no navegador. Então ele torna todas as ligações como se o usuário tivesse chamado o URL especificado em <BASE>. O que explica alguma da confusão em vários dos outros respostas:

Mais uma vez, nada muda para "ligações absolutas totalmente qualificadas "("tipo 1")
• para as ligações absolutas locais, o servidor alvo pode mudar (se o especificado em <BASE> difere do que foi chamado inicialmente do utilizador)
Os URLs relativos tornam-se críticos aqui, por isso tens de ter cuidado especial com a forma como defines.:
• é melhor evitar configurá-lo para um directório . Ao fazê-lo, os links do "tipo 3" podem continuar a funcionar, mas quebra certamente as do " tipo 4 "(excepto no caso B)
• configure-o para o nome de ficheiro completamente qualificado produz, na maioria dos casos, os resultados desejados.

Diz que queres "pretificar" algum URL usando mod_rewrite:

• ficheiro real: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
• URL real: http://www.example.com/some/dir/file.php?lang=en
• URL de fácil utilização: http://www.example.com/en/file

• Não <BASE> especificado: quebra todas as ligações relativas (como seriam baseadas em http://www.example.com/en/file Agora)
• Absolutamente errado. dir seria considerado o ficheiro parte do URL indicado, por isso, ainda assim, todas as ligações relativas estão quebradas.
• Já estou melhor. Mas as ligações relativas de "tipo 4" são ainda está avariado (excepto no caso B).
• Exactamente. Devia estar tudo a funcionar com este.

Uma última nota

Tenha em mente que isto se aplica a todos URLs no seu documento:

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

O Drupal dependia inicialmente da marca <base>, e mais tarde tomou a decisão de não usar devido a problemas com o HTTP crawlers & caches.

Http://drupal.org/node/13148

Torna as páginas mais fáceis para a visualização offline; você pode colocar o URL totalmente qualificado na etiqueta de base e então os seus recursos remotos irão carregar correctamente.

O hash " # " atualmente trabalha para ligações de salto em conjunto com o elemento base, mas apenas nas últimas versões do Google Chrome e Firefox, não IE9.

Se o seu site usa AJAX você vai querer certificar-se de todas as suas páginas têm-no configurado corretamente ou você pode acabar com links que não podem ser resolvidos.

Apenas Não use o atributo target numa página restrita HTML 4. 01.

No caso das imagens SVG incorporadas na página, há outra questão importante que surge quando a marca base é usada:

Uma vez que com a marca {[[0]} (como já foi referido acima), perde efectivamente a capacidade de usar URLs de hash relativos como em

<a href="#foo">

Porque eles serão resolvidos com o URL de base em vez da localização do documento atual e, portanto, não são mais relativos. Por isso, terá de adicionar a localização do documento actual a estes tipos de links como in

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

Então um dos aspectos aparentemente positivos da tag {[[0]} (que é mover os prefixos de URL longos para longe da tag de âncora e obter âncoras mais bonitas e mais curtas) completamente backfires para URLs de hash locais.

Isto é especialmente irritante quando se interliga o SVG na sua página, seja o SVG estático ou o SVG gerado dinamicamente porque em O SVG pode ter muitas referências e todas irão quebrar assim que for usada uma marca {[[0]}, na maioria das vezes, mas não todas as implementações de agentes de usuário (Chrome pelo menos ainda funciona nestes cenários no momento da escrita).

Se estiver a usar um sistema de templação ou outra cadeia de ferramentas que processa / gera as suas páginas, eu tentaria sempre livrar-me da marca {[[0]}, porque, do meu ponto de vista, traz mais problemas à mesa do que resolve.

Também deve lembrar-se que, se executar o seu servidor web numa porta não-padrão, terá de incluir o número de porto na base href também:

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

Ter também um site onde a etiqueta base é usada, e o problema descrito ocorreu. (depois de atualizar o jquery ), foi capaz de corrigi-lo, tendo URLs de mesa como este:

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

Referências que usei:

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/

Se desenvolver uma página web a mostrar dentro do Ui-WebView no iOS, terá de usar a marca BASE. De outra forma, não funcionará. Seja como for, JavaScript, CSS, images - nenhum deles irá trabalhar com ligações relativas sob o UIWebView, a menos que a base de tag seja especificada.

Encontrei uma maneira de usar <base> e ligações baseadas na âncora. Você pode usar JavaScript para manter links como #contact Trabalhando como eles precisam. Usei-o em algumas páginas de paralaxe e funciona para mim.

<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>

Deve usar no final da Página

Exemplo href De Base

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

.e ligações para uma pasta de diferenças:

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

Com base href , podemos evitar repetir ing a pasta de base:

<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>

(o alvo Base pode ser útil.) a base href é inútil como:

• a página está igualmente molhada Uma vez que:
  • base por omissão [- pasta-mãe] & rlhar; perfect (a menos que sejam desnecessárias/raras excepções 𝒞1 & 𝒞 2 ).
  • web actual & rlhar; hrefs de base múltipla não suportado.

Relacionados

• comparação com o Apache∙reescrever a base