Каковы рекомендации для тега html?


Я никогда не видел <base> HTML tag на самом деле используется в любом месте раньше. Есть ли подводные камни в его использовании, что означает, что я должен избегать его?

тот факт, что я никогда не замечал его в использовании на современном производственном сайте (или на любом сайте), заставляет меня с подозрением относиться к нему, хотя кажется, что у него могут быть полезные приложения для упрощения ссылок на моем сайте.


Edit

после использования базового тега в течение нескольких недель, я действительно нашел некоторые майор gotchas с использованием базового тега, которые делают его гораздо менее желательным, чем он сначала появился. По сути, изменения в href='#topic' и href='' под местом тегов очень несовместимо с их поведением по умолчанию, и изменить это поведение по умолчанию может легко сделать сторонние библиотеки вне вашего контроля очень ненадежный неожиданным образом, так как они будут логически зависеть от поведения по умолчанию. Часто изменения являются тонкие и приводят к не сразу очевидным проблемам при работе с большой кодовой базой. С тех пор я создал ответ с подробным описанием проблем, которые я испытал ниже. Поэтому проверьте результаты ссылки для себя, прежде чем совершать широкое развертывание <base>, Это мой совет!

16 428

16 ответов:

прежде чем решить, следует ли использовать <base> тег или нет, вам нужно понять, как он работает, для чего его можно использовать и каковы последствия и, наконец, перевешивают преимущества/недостатки.


The <base> тег в основном облегчает создание относительных ссылок в языках шаблонов, поскольку вам не нужно беспокоиться о текущем контексте в каждый ссылка.

вы можете сделать, например

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

обратите внимание:<base href> значение заканчивается косой чертой, иначе оно будет интерпретировано относительно последнего пути.


что касается совместимости браузера, это вызывает только проблемы в IE. Элемент <base> тег в HTML указан как не имея конечный тег </base>, так что это законно, чтобы просто использовать <base> без закрывающего тега. Однако IE6 думает иначе и весь контент после the <base> тег в таком случае помещается как ребенок на <base> элемент в дереве HTML DOM. Это может вызвать на первый взгляд необъяснимые проблемы в Javascript / jQuery / CSS, т. е. элементы полностью недостижимы в конкретных селекторах, таких как html>body, пока вы не обнаружите в инспекторе HTML DOM, что должно быть basehead) между ними.

общее исправление IE6 использует условный комментарий IE для включения конечного тега:

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

если вы не заботитесь о валидатор W3, или когда вы уже на HTML5, то вы можете просто самостоятельно закрыть его, каждый веб-браузер поддерживает его в любом случае:

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

закрыть <base> тег также мгновенно фиксирует маразм IE6 на WinXP SP3 для запроса <script> ресурсы с относительным URI в src в бесконечном цикле.

еще одна потенциальная проблема IE проявится, когда вы используете относительный URI в <base> тег, например <base href="//example.com/somefolder/"> или <base href="/somefolder/">. Это не удастся в ИЕ6/7/8. Однако это не совсем ошибка браузера; используя относительные URI в <base> тег именно на свой собственный неправильно. Элемент спецификация HTML4 заявила, что он должен быть абсолютным URI, таким образом, начиная с http:// или https:// схема. Это было сброшено в спецификация HTML5. Поэтому, если вы используете только HTML5 и целевые браузеры, совместимые с HTML5, то вы должны быть в порядке, используя относительный URI в <base> тег.


как используя якоря именованных / хэш-фрагментов, такие как <a href="#anchor">, якоря строки запроса, такие как <a href="?foo=bar"> и якоря фрагмента пути, как <a href=";foo=bar"> С <base> тег вы в основном объявляете все относительные ссылки относительно нее, в том числе такие якоря. Ни одна из относительных ссылок больше не относится к текущему URI запроса (как это было бы без <base> tag). Это может в первую очередь сбить с толку для начала. Чтобы построить эти якоря правильно, вы в основном нужно включить URI,

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

здесь ${uri} в основном переводится как $_SERVER['REQUEST_URI'] в PHP ${pageContext.request.requestURI} в JSP, и #{request.requestURI} в JSF. Следует отметить, что фреймворки MVC, такие как JSF, имеют теги, уменьшающие весь этот шаблон и устраняющие необходимость <base>. См. также.о'. какой URL использовать для ссылки / перехода на другие страницы JSF.

разбивка эффектов базового тега:

базовый тег, похоже, имеет некоторые неинтуитивные эффекты, и я рекомендую быть в курсе результатов и проверять их для себя, прежде чем полагаться на <base>! С тех пор, как я их обнаружил после пытаясь использовать базовый тег для обработки локальных сайтов с разными URL-адресами и только обнаружив проблемные эффекты после того, как, к моему ужасу, я чувствую себя вынужденным создать это резюме этих потенциальных ловушек для другие.

я буду использовать базовый тег: <base href="http://www.example.com/other-subdirectory/"> как мой пример в случаях ниже, и будет делать вид, что страница, на которой код находится http://localsite.com/original-subdirectory

специальность:

никакие ссылки или именованные якоря или пустые hrefs не будут указывать на исходный подкаталог, если это не указано явно: Базовый тег делает все ссылка по-разному, включая ссылки привязки той же страницы к url-адресу базового тега вместо этого, например:

  • <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
    становится
    <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

  • <a href='?update=1' title='Some title'>A link to this page</a>
    становится
    <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

С некоторой работой вы можете исправить эти проблемы на ссылках, которые вы контролируете, явно указав, что эти ссылки ссылаются на страницу, на которой они находятся, но когда вы добавляете сторонние библиотеки в микс, которые полагаются на стандартное поведение, это может легко вызвать большой беспорядок.

минор:

исправление IE6, которое требует условных комментариев: требует условных комментариев для ie6, чтобы избежать завинчивания иерархии dom, т. е. <base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]--> как BalusC упоминает в своем ответе выше.

Итак, в целом, основная проблема делает использование сложным, если у вас нет полного контроля редактирования над каждой ссылкой, и, как я изначально опасался, это делает его более сложным, чем оно того стоит. Теперь я должен пойти и переписать все мои использования его! : p

связанные ссылки тестирования на наличие проблем при использовании "фрагментов" /хэшей:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results


Edit by Izzy: для всех вас, столкнувшихся с той же путаницей, что и я относительно комментариев:

я только что проверил это сам, со следующим результаты:

  • Слэш или нет, не имеет никакого значения для примеров, приведенных здесь (#anchor и ?query будет просто добавлено к указанному <BASE>).
  • однако это имеет значение для относительных ссылок: опуская косую черту,other.html и dir/other.html начиная со DOCUMENT_ROOT на примере [в каком браузере?],/other-subdirectory обрабатывается (правильно) как файл и, таким образом, опущен [за что браузер?].

так что для относительных ссылок,BASE отлично работает с перемещенной страницы – в то время как якоря и ?queries необходимо, чтобы имя файла было указано явно (с BASE С конечной косой чертой или последним элементом, не соответствующим имени файла, в котором он используется).

думайте об этом как <BASE> замена полный URL к самому файлуне каталог, в котором он находится), и вы получите все правильно. Предполагая, что файл, используемый в этом примере, был other-subdirectory/test.html (после того, как он переехал на новое место),правильная спецификация должна была быть:

<base href="http://www.example.com/other-subdirectory/test.html">

– и вуаля, все работает: #anchor,?query,other.html,very/other.html,/completely/other.html.

Ну, погоди. Я не думаю, что базовый тег заслуживает плохой репутации.

хорошая вещь о базовом теге заключается в том, что он позволяет выполнять сложные перезаписи URL с меньшими хлопотами.

вот пример. Вы решили двигаться http://example.com/product/category/thisproduct до http://example.com/product/thisproduct. вы меняете свой .htaccess файл, чтобы переписать первый URL на второй URL.

с базы тег на месте, вы делаете свое .htaccess переписать и все. Не проблема. Но без базового тега все ваши относительные ссылки будут сломаны.

URL перезаписи часто необходимы, потому что их настройка может помочь архитектуре вашего сайта и видимости поисковой системы. Правда, вам понадобятся обходные пути для проблем " # "и", о которых упоминали люди. Но базовый тег заслуживает места в наборе инструментов.

чтобы решить, следует ли его использовать или нет, вы должны знать, что он делает и нужен ли он. Это уже частично изложено в ответ, чему я тоже способствовал. Но чтобы было легче понять и следовать, второе объяснение здесь. Для начала нужно понять:

как ссылки обрабатываются браузером без <BASE> используется?

для некоторых примеров предположим, что у нас есть следующие url:

A) http://www.example.com/index.html
Б)http://www.example.com/
В)http://www.example.com/page.html
Г)http://www.example.com/subdir/page.html

A+B оба результата в одном и том же файле (index.html) будет отправлен в браузер, C конечно отправляет page.html, и D передает /subdir/page.html.

предположим далее, что обе страницы содержат набор ссылок:

1) полное абсолютные ссылки (http://www...)
2) локальные абсолютные ссылки (/some/dir/page.html)
3) относительные ссылки, включая имена файлов (dir/page.html), и
4) относительные связи с только "сегменты" (#anchor,?foo=bar).

браузер получает страницу и отображает HTML. Если он находит какой-то URL, он должен знать, куда его направить. Это всегда ясно для Ссылки 1), которая принимается как есть. Все остальные зависят от URL-адрес страницы:

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

теперь, какие изменения с<BASE> используется?

<BASE> предполагается заменить URL как это выглядит в браузере. Так что это делает все ссылки, как если бы пользователь вызвал URL, указанный в <BASE>. Что объясняет некоторую путаницу в нескольких других ответах:

  • опять же, ничего не меняется для "полностью квалифицированных абсолютных ссылок"("тип 1")
  • для локальных абсолютных ссылок, целевой сервер может измениться (если указан в <BASE> отличается от того, который вызывается изначально от пользователя)
  • относительные URL-адреса становятся критическими здесь, так что вы должны будьте особенно осторожны, как вы установите <BASE>:
    • лучше не устанавливайте его в каталог. При этом ссылки "типа 3" могут продолжать работать, но это, безусловно, нарушает ссылки "типа 4" (за исключением "случая B")
    • установить полное имя файла дает, в большинстве случаев, желаемые результаты.

пример объясняет это лучше всего

скажем, вы хотите "приукрасить" какой-то URL с помощью mod_rewrite:

  • файл: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
  • реальный URL:http://www.example.com/some/dir/file.php?lang=en
  • удобный URL:http://www.example.com/en/file

предположим mod_rewrite используется прозрачное перепишите удобный URL-адрес на реальный (без внешнего повторного направления, поэтому "удобный" остается в адресной строке браузера, в то время как реальный загружается). Что же теперь делать?

  • нет <BASE> указано: разрывает все относительные ссылки (как они будут основаны на http://www.example.com/en/file сейчас)
  • <BASE HREF='http://www.example.com/some/dir>: абсолютно неправильно. dir будет считаться file часть указанного URL, так что все относительные ссылки сломаны.
  • <BASE HREF='http://www.example.com/some/dir/>: уже лучше. Но относительные связи " типа 4 "все еще нарушены (за исключением"случая B").
  • <BASE HREF='http://www.example.com/some/dir/file.php>: точно. Все должно работать с этим.

последнее замечание

имейте это в виду применяется к все URL в вашем документе:

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

Drupal изначально полагался на <base> tag, а позже принял решение не использовать из-за проблем с HTTP-искателями и кэшами.

Я вообще не люблю размещать ссылки. Но это действительно стоит поделиться, как это может принести пользу тем, кто ищет детали реального опыта с <base> теги:

http://drupal.org/node/13148

Это упрощает просмотр страниц в автономном режиме; вы можете поместить полный URL-адрес в базовый тег, а затем ваши удаленные ресурсы будут загружаться правильно.

хэш " # " в настоящее время работает для переходных ссылок в сочетании с базовым элементом, но только в последних версиях Google Chrome и Firefox, а не IE9.

IE9, похоже, вызывает перезагрузку страницы, не прыгая никуда. Если вы используете ссылки перехода на внешней стороне iframe, направляя кадр для загрузки ссылок перехода на отдельной странице внутри кадра, вместо этого вы получите вторую копию страницы ссылки перехода, загруженной внутри кадра.

Это, вероятно, не очень популярно, потому что это не очень хорошо известно. Я бы не боялся использовать его, так как все основные браузеры поддерживают его.

Если ваш сайт использует AJAX, вы хотите убедиться, что все ваши страницы настроены правильно, или вы можете получить ссылки, которые не могут быть разрешены.

просто не использовать target атрибут в HTML 4.01 строгой странице.

в случае SVG изображений, встроенных в страницу есть еще один важный вопрос, который возникает, когда base используется тег:

С base tag (как уже отмечалось выше) вы эффективно теряете возможность использовать относительные хэш-адреса, такие как in

<a href="#foo">

потому что они будут разрешены по базовому URL, а не по местоположению текущего документа и, следовательно, больше не являются относительными. Так что вам придется добавить путь текущего документ на эти виды ссылок, как в

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

так что один из, казалось бы, положительных аспектов base тег (который должен переместить длинные префиксы URL от тега привязки и получить более приятные, более короткие якоря) полностью возвращается для локальных хэш-адресов.

это особенно раздражает при вставке SVG на Вашей странице, будь то статический SVG или динамически генерируемый SVG, потому что в SVG таких ссылок может быть очень много и все они будут перерыв, как только base тег используется в большинстве, но не во всех реализациях пользовательского агента (Chrome, по крайней мере, все еще работает в этих сценариях на момент написания).

если вы используете систему шаблонов или другую цепочку инструментов, которая обрабатывает / генерирует ваши страницы, я всегда буду пытаться избавиться от base тег, потому что как я вижу, это приносит больше проблем, чем решает.

кроме того, вы должны помнить, что если вы запускаете свой веб-сервер на нестандартном порту, вам также нужно включить номер порта в базовую href:

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

Я никогда не видел смысла в ее использовании. Обеспечивает очень мало преимуществ, и может даже сделать вещи труднее использовать.

Если у вас нет сотен или тысяч ссылок, все в один и тот же подкаталог. Это может сэкономить несколько байтов пропускной способности.

как запоздалая мысль, я, кажется, помню, что есть некоторые проблемы с тегом в IE6. Вы можете разместить их в любом месте тела, перенаправляя различные части сайта в разные места. Этот была исправлена в IE7, который сломал много сайтов.

есть также сайт, где используется базовый тег, и описанная проблема произошла. ( после обновления jquery ), смог исправить это, имея вкладки URL-адреса, как это:

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

это делает их "местных"

ссылки, которые я использовал:

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/

работа с AngularJS базовый тег сломал $cookieStore молча, и мне потребовалось некоторое время, чтобы понять, почему мое приложение больше не может писать куки. Будьте осторожны...

одна вещь, чтобы иметь в виду:

Если вы разрабатываете веб-страницу для отображения в UIWebView на iOS, то вы должны использовать базовый тег. Иначе это просто не сработает. Будь то JavaScript, CSS, изображения-ни один из них не будет работать с относительными ссылками под UIWebView, если не указана база тегов.

Я был пойман этим раньше, пока я не узнал.

Я нашел способ использовать <base> и анкерных связей. Вы можете использовать JavaScript, чтобы сохранить ссылки как #contact работает, как они должны. Я использовал его на некоторых страницах параллакса, и это работает для меня.

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

вы должны использовать в конце страницы

базовый пример href

скажем, типичная страница со ссылками:

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

.и ссылки на папку diff:

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

С база href, мы можем избежать повторитьing базовая папка:

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

так что это победа.. пока страницы тоже-часто содержат URL-адреса для различных баз и текущей веб-поддержки только один базовый href на страницу, так что победа быстро теряется как базы, которые aint база∙hrefed повторяет, например:

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


вывод

(целевой базы может быть полезным.)база href бесполезна как:

  • страница в равной степени мочить С тех пор:
    • база по умолчанию [- родительская папка] & rlhar; perfect (если нет ненужных / редких исключений &Cscr; 1 & &Cscr; 2).
    • текущий веб &rlhar;несколько базовых hrefs без поддержки.

по теме