Тег <base> в HTML — относительно малоизвестный элемент, совсем недавно ставший полноценной частью HTML5 . Это позволяет вам делать две вещи:
- Установите любой URL, который вы выбрали в качестве основы для всех относительных URL.
- Установите целевые ссылки по умолчанию.
Base-ics
Элемент <base> определен в разделе <head> и вы можете использовать его только один раз для каждого документа. Вы должны разместить его как можно раньше в своей головной части, чтобы вы могли использовать его с этого момента. Два возможных атрибута: href и target . Вы можете использовать один из этих атрибутов по отдельности или оба сразу.
Пример 1: Ярлык загрузки активов
Допустим, у вас есть сайт, который хранит все свои изображения и CSS в папке с именем «assets». Вы можете определить свой <base> следующим образом:
|
1
2
3
|
<head>
<base href=»http://www.myepicsite.com/assets/»>
</head>
|
Это позволит вам загрузить любые изображения или CSS, как это:
|
1
2
3
4
5
6
7
|
<head>
<base href=»http://www.myepicsite.com/assets/»>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<img src=»image01.png» />
</body>
|
Ссылка на style.css будет style.css в http://www.myepicsite.com/assets/style.css а image01.png будет загружена с http://www.myepicsite.com/assets/image01.png .
Пример 2: URL внутренних страниц
Что делать, если у вас есть домен верхнего уровня, который перенаправляет на что-то вроде http://thisrocks.com/app/ и все внутренние ссылки должны включать app/ в свои URL-адреса.
Вы можете установить свой базовый URL следующим образом:
|
1
|
<base href=»http://thisrocks.com/app/»>
|
Оттуда, когда вы хотите сделать ссылку с одной внутренней страницы на другую, вы можете просто использовать:
|
1
|
<a href=»anotherpage.htm»>LINK</a>
|
Эта ссылка будет разрешена на http://thisrocks.com/app/anotherpage.htm .
Пример 3: Цель ссылки по умолчанию
Вы также можете использовать <base> для установки цели по умолчанию для всех ссылок на вашей странице. Если вы должны были использовать:
|
1
|
<base target=»_blank»>
|
… любая ссылка, в которой явно не указана собственная цель, откроется в новом окне. Вы можете использовать target атрибут с сопровождающим атрибутом href или без него.
Эта функциональность потенциально может быть полезна для контента, загружаемого через iFrame, так как вы сможете автоматически привязать все ссылки в нем к родительскому фрейму.
Недостатки
Хотя <base> url может быть удобен, его недостатки основаны на том факте, что после его определения вы застряли с ним Вы можете использовать его только одним способом, и тогда он будет влиять на все URL. Везде, где вы не хотите использовать значения по умолчанию, установленные в вашем <base> вы должны специально их переопределять.
Если вы используете его для разрешения доступа к вашей папке assets как мы делали выше, и позже вы захотите сделать ссылку с одной страницы вашего сайта на другую, вы не сможете сделать это с помощью обычного HTML-кода <a href="page.html">Page</a> .
Это связано с тем, что с базовым URL-адресом http://www.myepicsite.com/assets/ ваши посетители будут отправлены на http://www.myepicsite.com/assets/page.html .
Поэтому вам придется переопределить настройки тега <base> , используя вместо этого абсолютный URL, то есть <a href="http://www.myepicsite.com/page.html">Page</a> .
In-Page Якоря
При использовании <base> вы также можете столкнуться с проблемами, связанными с якорями на странице.
Как правило, такая ссылка, как <a href="#top">Back to Top</a> , удерживает вас на той же странице, но позволяет перейти к расположению элемента с id="top" , например, она будет преобразована в http://thisrocks.com/app/article.html#top .
Однако, если вы используете <base> с атрибутом href вы вместо этого будете отправлены на базовый URL с добавлением #top в конец, например, http://thisrocks.com/app/#top .
Опять же, в этом случае вам придется переопределить значения по умолчанию, установленные в вашем <base> , указав страницу, к которой должна быть <a href="article.html#top">Back to Top</a> ваша ссылка, например <a href="article.html#top">Back to Top</a> .
Где <база> работает лучше всего
Тег <base> лучше всего использовать в сценарии, когда вы знаете, что сможете полностью контролировать использование всех URL-адресов, т. Е. Знаете, что сможете переопределить значения по умолчанию по мере необходимости. Если вы создаете тему для CMS, в которой есть много неизвестных переменных, вероятно, стоит оставить <base> вне микса.
Однако, если вы создаете статический HTML-сайт, <base> может быть очень полезным. Это даже в большей степени относится к тем случаям, когда вы используете язык шаблонов, такой как Jade или Handlebars, который позволяет размещать ярлыки, такие как <a href="{url}#top">Back to Top</a> , поэтому если вы нужно переопределить настройки по умолчанию это все еще быстро и легко.
Если у вас есть четкое представление о том, каким будет содержимое вашего проекта, а использование URL-адресов и ссылок полностью находится под вашим контролем, вы можете обнаружить, что <base> экономит вам много времени.
Узнайте больше о <base> в W3C Wiki и спецификации HTML5: