Base href что значит

Потребность в этом возникает при организации постоянно отображаемых меню. Такое меню может быть реализовано либо во фрейме, либо в окне. При этом информационные страницы Web-узла, которые загружаются при активизации гипертекстовых ссылок, будут загружаться в другое окно или фрейм.

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

Использование атрибута target осуждается спецификацией HTML, валидный код получается только при использовании переходного «> .

Синтаксис тега в общем виде выглядит следующим образом:

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

Источник

Элемент base

Элемент не выводит никакого контента и выполняет исключительно служебную функцию — позволяет указать базовый URL, относительно которого будут устанавливаться другие адреса, например, для изображений и ссылок. Также задаёт значение атрибута target , которое по умолчанию применяется ко всем ссылкам.

В документе разрешается иметь только один .

Атрибут href

Предположим, все изображения для наших документов хранятся в папке assets/images . Чтобы постоянно не указывать этот путь перед именем файла, его можно вынести в значение атрибута href тега , как показано в примере 1.

Пример 1. Использование href

Хотя в данном примере путь к файлу задан как figure.jpg в действительности его надо понимать как /example/images/figure.jpg . Обратите внимание на последний слэш (/), если его не указать, то путь к файлу будет /example/imagesfigure.jpg , что приведёт к ошибке и рисунок выводиться не будет.

В данном случае атрибут href будет действовать на все адреса, используемые в документе, включая ссылки, поэтому на них путь, заданный в также будет распространяться. Если в пример 1 добавить ссылку ссылка , то браузер будет искать документ по адресу /example/images/link.html .

Из-за того, что влияет на все используемые ниже него адреса, его рекомендуется ставить в раньше элементов со ссылками. Если перед стоит, к примеру,
, то базовый адрес на него действовать не будет. Также базовый адрес не влияет на атрибут manifest в корневом элементе .

В качестве значения можно использовать и адрес сайта, как показано в примере 2.

Пример 2. Адрес сайта

Полный адрес изображения будет http://htmlbook.ru/example/images/figure.jpg . При сохранении страницы на локальный компьютер при её открытии все файлы будут загружаться непосредственно с сайта htmlbook.ru.

Хотя в примерах выше в использовались адреса папок, допустимо указывать и адрес документа:

Такой путь не надо подставлять прямолинейно, как это делалось в случае с папками. Адрес документа в href говорит, что относительно него следует задавать пути к файлам. В качестве примера рассмотрим следующую структуру файлов на сайте (рис. 1).

Рис. 1. Файлы и папки на сайте

Если задать базовый адрес как doc/index.html , тогда в файле 1.html пути к остальным файлам поменяются, как показано в примере 3.

Пример 3. Файл 1.html

Поскольку перед doc нет дополнительных слэшей, то браузер считает, что папка doc находится в том же месте, что и файл 1.html , т.е. полный путь к базовому файлу относительно корня будет doc/doc/index.html . Не имеет значения, что в действительности такой папки и файла не существует, главное указать относительно неё путь. Поэтому в примере 3 и появляются дополнительные конструкции вида ../ . Поскольку адрес в примере фиктивный, замена doc внутри href на любое другое значение (скажем, doc123 ) не изменит путь к ссылкам.

Хотя пример 3 работоспособный, использование относительных адресов вносит путаницу, поэтому рекомендуем включать перед адресом слэш, который указывает на корень сайта (пример 4).

Пример 4. Базовый адрес относительно папки doc

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

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

Атрибут target

В качестве примера рассмотрим добавление на страницу фрейма с именем frame , оно определяется атрибутом name тега . Чтобы ссылки за пределами фрейма открывались внутри него, в элементе укажем target=»frame» , как показано в примере 5.

Пример 5. Имя контекста

Использование в таком качестве равнозначно тому, что для каждой ссылки добавляется target=»frame» .

Кроме использования имен допустимы следующие ключевые слова.

• _blank — открывает ссылку в новом окне или вкладке;
• _self — открывает ссылку в текущем окне или вкладке, равнозначно значению «» (пустая строка);
• _parent — открывает ссылку в родительском контексте. Например, если такая ссылка нажата внутри фрейма, то она открывается не во фрейме, а на странице содержащей фрейм;
• _top — открывает ссылку в контексте верхнего уровня. Результат будет заметен при сложной фреймовой структуре, при наличии на странице одного фрейма, открытие ссылки внутри него подобно действию _parent .

Если одновременно требуются атрибуты href и target , они объединяются в пределах одного тега:

Надо отметить, что значения _parent и _top применяются довольно редко и перешли в HTML5 по наследству из HTML4, где активно применялись фреймы.

Источник

Совет: меняем поведение относительных URL с помощью тега base

HTML тег — относительно малоизвестный тег, который не так давно стал частью HTML5. Он позволяет делать следующее:

1. указать любой URL в качестве базы для относительных URL
2. указать цель по-умолчанию для ссылок

Основы

Элемент указывается в секции , и указать можно только один такой элемент на страницу. Указывать его в документе нужно как можно раньше, так как его действие распространяется с места его указания. У него есть два возможных атрибута: href и target . Вы можете использовать как один из них, так и оба сразу.

Пример 1: ярлык для зарузки ресурсов

Скажем, ваш сайт хранит изображения и CSS в директории под названием “assets”. Вы можете задать тег следующим образом:

Это позволит вам загружать изображения и CSS следующим образом:

Пример 2: внутренние ссылки со страницы

Что, если у вас есть домен верхнего уровня, с которого производится переадресация на http://thisrocks.com/app/, а все внутренние ссылки должны содержать сегмент app/?

Вы можете указать базовый URL следующим образом:

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

Пример 3: цель ссылки по-умолчанию

С помощью также можно указать цель по-умолчанию для всех ссылок на странице. Если вы укажете:

то каждая ссылка, у которой явно не задан атрибут target будет открываться в новом окне. Атрибут target можно использовать как вместе с атрибутом href , так и без него.

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

Недостатки

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

Если вы использовали базовый URL, чтобы упростить подключение ресурсов, а после решили использовать его для ссылок на внутренние страницы, у вас возникнут проблемы (например, с такой ссылкой: Страница ).

Это из-за того, что базовый URL теперь http://www.myepicsite.com/assets/, и ваши пользователи будут направлены на адрес http://www.myepicsite.com/assets/page.html.

В таком случае вам нужно будет переопределить базовый URL для этой ссылки, указав полный URL на страницу, то есть Страница

Якоря

При использовании вы можете столкнуться с проблемой ссылок на внутристраничные якоря.

Обычно ссылка вида Наверх оставит вас на текущей странице, но перенесет к элементу с , то есть она будет ссылаться на http://thisrocks.com/app/article.html#top.

Но если вы используете тег с заданным атрибутом href, то вы будете перенаправлены на базовый URL с добавленным к адресу сегментом #top, то есть http://thisrocks.com/app/#top.

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

Где уместен тег

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

Но если вы разрабатываете статичный HTML сайт, то тег может быть очень полезен. И это еще более справедливо, если вы используете шаблонзатор вроде Jade или Handlebars, который позволит вам использовать вставки вроде Наверх, так что если вам потребуется переопределить умолчания, то это будет несложно.

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

Узнать больше о теге можно в вики W3C и в спецификации HTML5:

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Источник

Как использовать HTML-тег

Когда имеет значение каждый байт, можно использовать HTML-тег base href , чтобы указать атрибуты target по умолчанию для всех относительных URL-адресов на странице:

Для небольших ресурсов с несложной структурой это не даст большого эффекта. Но для сайтов с многоуровневой структурой каталогов тег существенно уменьшит объем страниц, а также обеспечить четкость и краткость URL-адресов .

Преимущества тега

Преимущества использования тега :

• Уменьшает объем страницы;
• Экономит трафик;
• Более короткие URL-адреса ;
• Чистая разметка;
• Помогает при просмотре страниц в автономном режиме;
• Упрощает миграцию ( нужно изменить всего одну ссылку, а не многие );
• Упрощает перенаправление относительных URL-адресов.

Даже с учетом всех этих преимуществ base href base url используется не на многих страницах. Это связано с тем, что данный тег имеет несколько недостатков.

Потенциальные недостатки тега

• Проблемы при прозрачной перезаписи URL-адресов;
• Могут возникать проблемы при просмотре в старых браузерах.

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

Таким образом, мы имеем в наличии одну реальную проблему — если ваш сайт использует прозрачную перепись, то лучше не использовать тег .

Пример. Указание URL-адреса по умолчанию

Рассмотрим пример использования тега для указания URL по умолчанию, который будет применяться ко всем относительным URL-адресам на странице, включая атрибуты src и href . Это означает, что относится к изображениям, гиперссылкам, iframe , формам, скриптам.

Например, все изображения содержатся где-то в каталоге:

Его можно указать с помощью относительного пути:

Это короче, но все равно добавляет несколько байтов к объему, особенно если на странице используется несколько изображений. Например, использование подобного пути для каждого изображения в галерее уменьшает общий объем. Можно сделать еще лучше, указав URL-адрес по умолчанию с помощью тега . Для этого добавьте следующий код base href site url в раздел head :

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

можно просто добавить приведенный ниже код:

В зависимости от количества файлов, которые вы используете, может существенно уменьшить объем страницы и сохранить разметку чистой.

Пример: Указание атрибута target по умолчанию

Тег HTML base href также может применяться для указания атрибута target , используемого по умолчанию в ссылках, формах, iframes и т.д. Например:

Используя приведенный выше код, можно исключить атрибут target из тегов ссылок. Вместо того чтобы писать для каждой ссылки, размещенной на странице, что-то вроде этого:

можно сделать следующим образом:

Что еще больше уменьшает общий объем веб-страницы. Конечно, это не огромная экономия, но при оптимизации производительности значение имеет каждый бит.

Исключение URL-адресов из значения по умолчанию

Что делать, если вы хотите включить ссылки на ресурсы, расположенные не по тому адресу, который указан в ? Тег base href http применяется только к URL-адресам , которые относятся к базовому URL- . Например, на странице мы ссылаемся на следующие URL-адреса :

Без тега эти URL-адреса будут обрабатываться как есть. А теперь добавим через URL-адрес по умолчанию:

При этом предыдущие примеры URL-адресов меняются следующим образом:

Обратите внимание, что значение не применяется к первому и второму URL-адресам , а только к третьему. Поэтому, чтобы исключить любой URL , можно использовать абсолютный адрес или начинающийся с косой черты — /. Ни к одному из этих URL-адресов не будет относиться тег .

Поддержка браузерами

Тег поддерживается основными браузерами:

• Chrome ;
• Firefox ;
• Opera ;
• Safari ;
• Internet Explorer .

Заключение

Несколько полезных заметок по base href :

• Необходимо использовать абсолютные URL-адреса для идентификаторов фрагментов ( анкоры / хэш-ссылки ), например #whatever ;
• Нужно использовать абсолютные URL для адресов строки запроса, например ?whatever=something ;
• Всегда указывайте конечную косую черту в базовом URL-адресе ( чтобы это была ссылка на каталог, а не на файл );
• Тег должен быть включен в раздел ;
• На каждой веб-странице может быть только один тег ;
• Тег должен включать в себя атрибут href , атрибут target или оба сразу;
• Добавляйте перед всеми другими тегами в разделе , чтобы он применялся для URL-адресов скриптов, стилей и т. д.

Я надеюсь, что данная статья помогла вам разобраться с HTML base href .

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

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, лайки, отклики, подписки, дизлайки огромное вам спасибо!

Источник