Элемент base
Элемент <base> не выводит никакого контента и выполняет исключительно служебную функцию — позволяет указать базовый URL, относительно которого будут устанавливаться другие адреса, например, для изображений и ссылок. Также <base> задаёт значение атрибута target, которое по умолчанию применяется ко всем ссылкам.
В документе разрешается иметь только один <base>.
Атрибут href
Предположим, все изображения для наших документов хранятся в папке assets/images. Чтобы постоянно не указывать этот путь перед именем файла, его можно вынести в значение атрибута href тега <base>, как показано в примере 1.
Пример 1. Использование href
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Адрес изображения</title>
<base href="/example/images/">
</head>
<body>
<p><img src="figure.jpg" alt=""></p>
</body>
</html>Хотя в данном примере путь к файлу задан как figure.jpg в действительности его надо понимать как /example/images/figure.jpg. Обратите внимание на последний слэш (/), если его не указать, то путь к файлу будет /example/imagesfigure.jpg, что приведёт к ошибке и рисунок выводиться не будет.
В данном случае атрибут href будет действовать на все адреса, используемые в документе, включая ссылки, поэтому на них путь, заданный в <base> также будет распространяться. Если в пример 1 добавить ссылку <a href="link.html">ссылка</a>, то браузер будет искать документ по адресу /example/images/link.html.
Из-за того, что <base> влияет на все используемые ниже него адреса, его рекомендуется ставить в <head> раньше элементов со ссылками. Если перед <base> стоит, к примеру, <link>, то базовый адрес на него действовать не будет. Также базовый адрес не влияет на атрибут manifest в корневом элементе <html>.
В качестве значения можно использовать и адрес сайта, как показано в примере 2.
Пример 2. Адрес сайта
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Адреса</title>
<base href="http://htmlbook.ru/">
</head>
<body>
<p><img src="example/images/figure.jpg" alt=""></p>
<p><a href="example/1.html">Ссылка</a></p>
</body>
</html>Полный адрес изображения будет http://htmlbook.ru/example/images/figure.jpg. При сохранении страницы на локальный компьютер при её открытии все файлы будут загружаться непосредственно с сайта htmlbook.ru.
Хотя в примерах выше в <base> использовались адреса папок, допустимо указывать и адрес документа:
<base href="example/index.php">Такой путь не надо подставлять прямолинейно, как это делалось в случае с папками. Адрес документа в href говорит, что относительно него следует задавать пути к файлам. В качестве примера рассмотрим следующую структуру файлов на сайте (рис. 1).
Рис. 1. Файлы и папки на сайте
Если задать базовый адрес как doc/index.html, тогда в файле 1.html пути к остальным файлам поменяются, как показано в примере 3.
Пример 3. Файл 1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Адрес относительно файла</title>
<base href="doc/index.html">
</head>
<body>
<p><img src="../../assets/images/figure.jpg" alt=""></p>
<p><a href="../2.html">Соседний документ</a></p>
<p><a href="../../index.html">Вернуться на главную страницу</a></p>
</body>
</html>Поскольку перед doc нет дополнительных слэшей, то браузер считает, что папка doc находится в том же месте, что и файл 1.html, т.е. полный путь к базовому файлу относительно корня будет doc/doc/index.html. Не имеет значения, что в действительности такой папки и файла не существует, главное указать относительно неё путь. Поэтому в примере 3 и появляются дополнительные конструкции вида ../. Поскольку адрес в примере фиктивный, замена doc внутри href на любое другое значение (скажем, doc123) не изменит путь к ссылкам.
Хотя пример 3 работоспособный, использование относительных адресов вносит путаницу, поэтому рекомендуем включать перед адресом слэш, который указывает на корень сайта (пример 4).
Пример 4. Базовый адрес относительно папки doc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Адрес относительно doc</title>
<base href="/doc/index.html">
</head>
<body>
<p><img src="../assets/images/figure.jpg" alt=""></p>
<p><a href="2.html">Соседний документ</a></p>
<p><a href="../index.html">Вернуться на главную страницу</a></p>
</body>
</html>Конструкция /doc указывает на папку doc находящуюся в корне нашего сайта. Учтите, что адреса со слэшем впереди работают только под управлением сервера, но никак не локально.
Допустимо использовать только один базовый адрес на странице. Если ошибочно добавлено несколько <base> с разными href, то применяется только первый, остальные игнорируются.
Атрибут target
Значение атрибута target определяет имя контекста, которое применяется для ссылок (<a>) и форм (<form>). В качестве имени контекста обычно указывается имя фрейма или ключевое слово: _blank, _self, _parent или _top.
В качестве примера рассмотрим добавление на страницу фрейма с именем frame, оно определяется атрибутом name тега <iframe>. Чтобы ссылки за пределами фрейма открывались внутри него, в элементе <base> укажем target="frame", как показано в примере 5.
Пример 5. Имя контекста
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки во фрейме</title>
<base target="frame">
</head>
<body>
<p><a href="2.html">2</a> <a href="3.html">3</a></p>
<p><iframe name="frame" src="1.html"></iframe></p>
</body>
</html>Использование <base> в таком качестве равнозначно тому, что для каждой ссылки добавляется target="frame".
Кроме использования имен допустимы следующие ключевые слова.
- _blank — открывает ссылку в новом окне или вкладке;
- _self — открывает ссылку в текущем окне или вкладке, равнозначно значению "" (пустая строка);
- _parent — открывает ссылку в родительском контексте. Например, если такая ссылка нажата внутри фрейма, то она открывается не во фрейме, а на странице содержащей фрейм;
- _top — открывает ссылку в контексте верхнего уровня. Результат будет заметен при сложной фреймовой структуре, при наличии на странице одного фрейма, открытие ссылки внутри него подобно действию _parent.
Если одновременно требуются атрибуты href и target, они объединяются в пределах одного тега:
<base href="http://htmlbook.ru/content" target="_blank">Надо отметить, что значения _parent и _top применяются довольно редко и перешли в HTML5 по наследству из HTML4, где активно применялись фреймы.