HTML/Атрибут href (Элемент base)
Синтаксис
HTML
XHTML
<head> ... <base href="[значение]"> ... </head>
Описание
Атрибут / параметр href
(от англ. «hypertext reference» ‒ «гипертекстовая ссылка») задаёт документу базовый URL-адрес, относительно которой будут интерпретироваться относительные ссылки. Таким образом, базовый URL будет выступать в качестве базовой (не указываемой) части URL адреса относительных ссылок.
Примечание
Использование относительных URL в качестве базового адреса может быть не правильно воспринято некоторыми версиями браузеров.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел | |
---|---|---|
HTML | ||
2.0 | Base Address: BASE | Перевод |
3.2 | BASE | |
4.01 | 12.4 Path information: the BASE element href = uri [CT]… DTD: Transitional
Strict
Frameset | |
5.0 | 4.2.3 The base element The href content… | |
5.1 | 4.2.3. The base element The href content… | |
XHTML | ||
1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
1. 1 | Extensible HyperText Markup Language |
Значения
В качестве значения указывается URL-адрес.
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр href (Элемент base)</title>
<base href=»http://programmerbook.ru/html/»>
</head>
<body>
<h2>Пример использования атрибута «href»</h2>
<p><a href=»a»>Элемент «a»</a></p>
<p><a href=»./acronym»>Элемент «acronym»</a></p>
<p><a href=»basefont»>Элемент «basefont»</a></p>
<p><a href=»../css»>Раздел CSS</a></p>
</html>
Параметр href (Элемент base)
вреден. / Хабр
Тэг <base>
, с помощью которого браузеру задают базовый путь для разрешения относительных ссылок, вреден и не должен использоваться в хорошей верстке. Вместо него есть достаточно строгий и гибкий метод задания путей к ресурсам.
Вследствие распространившейся моды на ЧПУ веб-технологи стали чаще встречаться со следующей проблемой — файлы (например, CSS или изображения), на сервере расположенные буквально в соседней папке с шаблонами верстки, теперь не получается адресовать относительными путями. При автоматическом создании страниц на очень разветвленных сайтах нет практически никакой возможности автоматически изменять относительные пути к ресурсам в зависимости от адреса просматриваемой старницы, и обычные относительные пути перестают работать.
О чем это он?
Браузер, просматривающий адрес example.com/blog/record1
, попытается разрешить ссылку ../css/blog.css
в адрес example.com/blog/css/blog.css
. Возможно, это еще не так плохо, но в ситуации, когда адрес будет каким-нибудь наподобие example.com/blog/tags/test
, та же ссылка разрешится в example.
. Очевидно, хотя присутсвие одного и того же файла по нескольким URL-адресам можно реализовать, делать так явно не стоит. Даже если папка css
лежит там же, где и шаблоны верстки, проблема относительной адресации никуда не денется.
Как в таких случаях обычно поступают
Веб-программисты и технологи по всему миру вспомнили в этой нелегкой ситуации о тэге <base>
. Согласно спецификации:
ЭлементBASE
позволяет авторам явно указать базовый URI документа.
Если элементBASE
указан, он должен присутствовать в разделедокумента HTML, до элементов, ссылающихся на внешние ресурсы. Информация о пути, указанная в элементе
HEAD BASE
, влияет только на URI в документе, в котором присутствует этот элемент.
Решение кажется гениально простым: указав в элементе base href="http://example. com/templates/"
, мы заставим браузер разрешать все вышеуказанные относительные URL в ссылки на реально существующие, лежащие на том самом месте файлы. Избавившись от привычки путешествовать вверх по дереву каталогов в нашем относительном пути, мы избавимся от этих проблем окончательно.
Что не так?
Вот только вкратце список проблем, возникающих при употреблении <base>
в таких целях:
- Сайт перестает работать с остальных доменов — при попытке просмотра даже
www.example.com
браузер будет пытаться тянуть ресурсы сexample.com
(без www). Для CSS и картинок это пока не страшно, но со скриптами (особенно HTC для Internet Explorer), cookies, ActiveX, Flash (если из него подразумевается взаимодействие с сервером), а также в случае обращения по протоколу https у пользователя будут более или менее серьезные проблемы. Подумайте также о сложностях при переносе сайта на другой домен (или употреблении его движка для другого сайта). <Base>
также влияет на относительные адреса употребленные в ссылках, которые теперь тоже разрешаются согласно базовому пути. Даже если указатьbase href="
example.com
/"
, остается коллизия между доменами, указанная в первой проблеме.- Проблема психологического плана: базовый путь, задаваемый в проектах с большой разветвленностью, модульной структурой шаблонов или просто большим объемом кода, может сбить с толку «свежего» верстальщика, незнакомого с проектом, но имеющего задачей вставить пару картинок на страницу.
- Самая удивительная проблема: всеми любимый браузер IE, при наличии в просматриваемом документе тэга
<base>
и элементов разметки с указанным CSS-свойствомfloat
(например<div>Тут текст!</div>
), не позволит выделять мышью текст в таких элементах. Какая здесь может быть связь — непонятно, но факт. - Тот же IE при разрешении путей, используемых в CSS-фильтрах (например, AlphaImageLoader), игнорирует указание базового пути и пытается разрешать относительные ссылки, как будто никакого
<base>
не было.
Итак, имеем в итоге: в качестве базового пути лучше употреблять корень сервера, но это создаст некоторые проблемы в IE и серьезные проблемы для работы сайта с несколькими доменами. Решив проблему с относительными путями, мы создали себе еще несколько.
Мне кажется, что в связи с вышеуказанными сложностями от тэга <base>
лучше отказаться вовсе. А для решения основной заявленной проблемы воспользоваться другими методами работы с относительными ссылками.
«Полуабсолютная» адресация
Дело в том, что если мы просто будем адресовать ресурсы от корня сервера, начиная путь с символа /
(«слэш»), то сможем обойтись без <base>
, позволяя при этом сайту работать с любого домена и иметь еще некоторые преимущества. Такую адресацию, в противовес обычно применяемой отоносительной, я называю «полуабсолютной» (потому что протокол и домен не указываются, в отличие от настоящей абсолютной адресации).
То есть, файл CSS, указанный в проблемном примере, следует адресовать как /templates/css/blog.css
example.com/blog/record1
— ведь для браузера этот путь выглядит как каталог, из которого он просматривает индексный документ). Относительные ссылки, начинающиеся со слэша, браузер будет предварять использующимся протоколом и всеми прочими частями URL, заканчивая текущим доменом (и портом, если он указан). Таким образом, проблема адресации ресурсов решается без лишних проблем с доменами.При этом я призываю к дотошной последовательности: везде, включая конструкции
url()
и фильтры в CSS и гиперссылки между документами, должна использоваться такая нотация, коль скоро речь идет о работе в пределах одного домена. Это позволит некоторую свободу в обращении с файлами (например, подселить файл CSS в папку images
, или отселить в отдельную), сохраняя при этом строгий порядок и работоспособность кода. К несчастью, многие IDE, используемые в веб-разработке, не имеют соотвествующих настроек адресации ресурсов, слишком потакают относительной адресации (особенно с подъемами по дереву каталогов), и даже воспринимают существующие, но указанные «полуабсолютным» методом файлы, как несуществующие ресурсы. Не стоит зависеть от своих инструментов, лучше думать головой.Однако, и при «полуабсолютной» адресации без проблем не обходится (а вы что думали). В моей практике проблема возникла с Flash — согласно ТЗ, она не просто крутила ролик, а обращалась время от времени к серверупо каким-то
своим флэшным делам за одним файлом. Файл флэшка должна была подгружать из «текущего каталога», адресуя его как file.txt
. Поскольку использовался движок с ЧПУ, оный каталог был у каждой страницы свой, а стало быть, флэшка не работала.
В тот раз я решил проблему, попросив Flash-технолога адресовать этот файл, как /flash/file.txt
. Проблему на сервере это разрешило, однако испортило жизнь самому Flash-технологу (при работе в локальной файловой системе такая адресация разрешается в путь наподобие C:/flash/file.txt
). Разумеется, есть решение лучше.
Указываем Flash её место
При внедрении Flash-ролика, которому требуется взаимодействовать со своим сервером по http (например, читать файлы через web), можно указать базовый каталог специально для каждого внедряемого ролика без использования <base>
. Для этого в коде внедрения флэшки нужно указать параметр base со значением, равным адресу нужного каталога в «полуабсолютной» форме. То есть в моем случае код внедрения флэшки выглядел следующим образом:
<object …>
<param name="base" value="/flash/">
…
<embed base="/flash/" src="/flash/01. swf" …>
…
отдельное спасибо авторам Хабрахабра за «удобные» средства публикации кода
Фактически, я всё так же задал базовый каталог, однако я сделал это только для одного Flash-ролика, без указания протокола и доменного имени (они будут подставлены точно так же, как при разрешении «полуабсолютных» ссылок). Для следующего ролика можно указать другой каталог, или, если вас устраивает работа с корневым каталогом веб-пространства сервера, можно указать просто «/
». Flash-технолог теперь всегда может быть уверен в положении флэшки в пространстве веб-сервера и указывать пути к ресурсам удобным ему образом (необязательно как «полуабсолютные»).
P.S.
Если еще кому не очень понятно, призываю к использованию такого метода я исключительно в рамках моего авторитета и на основании моей собственной практики. Именно поэтому я опубликовал топик в личном блоге, а не в соответствующих коллективных.
Если вы не доверяете мне, или по какой-то причине у вас есть своё собственное мнение по этому поводу — предлагаю не разводить лишних дискуссий, а мнение выразить в вашем личном блоге. Здесь же записано лишь моё собственное IMHO, почему <base> вреден, и что делать в его отсутствие.
Тег HTML »
В тегах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
- Элемент
- Якоря HTML: вот как создавать ссылки для быстрой навигации
- Что делает
?HTML-тег - Элемент
используется для определения базового URL-адреса, на основе которого создаются все относительные URL-адреса, отображаемые на веб-странице. Кроме того, если элемент имеет целевой атрибут, целевой атрибут будет использоваться в качестве атрибута по умолчанию для всех гиперссылок, появляющихся в документе. - Дисплей
- нет
- Пустой элемент
- Этот элемент не должен содержать никакого содержимого и не нуждается в закрывающем теге.
Содержание
- 1 Пример кода
- 2 Относительные ссылки
- 3 Целевое значение по умолчанию
- 4 Размещение и ограничения
- 5 Броузер
.
.
.
голова> Относительные ссылки
При создании якорной ссылки атрибут
href
может указывать абсолютный URL-адрес, напримерhttp://example.com
, или относительный URL-адрес, например/
,/page-name
, илиимя страницы
.С относительными URL-адресами косая черта (
/
) указывает корневой URL-адрес текущей страницы, поэтомуhref="/page-name"
будет ссылаться на страницу по адресу currentdomain/page-name
. Не указывая косую черту на подстраницу текущего URL, так чтоhref="имя-страницы"
будет ссылаться на current_url/имя-страницы
.Используя элемент
, вы можете изменить базовый URL-адрес, который используют относительные ссылки на странице. Вместо текущего фактического URL-адреса текущей страницы все относительные ссылки будут основываться на URL-адресе, указанном в атрибутеhref
элемента
.Для получения дополнительной информации о том, как работают относительные ссылки, см. нашу документацию по URL-адресам якорных ссылок.
Значение по умолчанию
цель
Помимо указания базового URL-адреса для относительных ссылок, элемент
позволяет указать значениецель
по умолчанию для всех ссылок на странице. Итак, если вы установитеtarget="_blank"
в элементе
, все ссылки на странице (относительные и абсолютные) будут открываться в новом окне, если не указано иное.Размещение и ограничения
<база> 9Элемент 0015 должен быть помещен в
. Элемент
не должен иметь никакого содержимого и не требует закрывающего тега.Адам Вуд
Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.
Поддержка браузера для базы
All All All All All All Attributes of base
Attribute name Values Notes href Указывает базовый URL-адрес, который будет использоваться для всех относительных ссылок в текущем документе. цель Указывает целевое значение по умолчанию для всех ссылок привязки в текущем документе. Search HTML.com
Search for:Наиболее популярные
- Тег HTML
- Использование тега HTML для создания встроенных фреймов: вот как
HTML-тег - HTML-тег
HTML-тег0032
HTML Basics
HTML Attributes
HTML Graphics
HTML APIs
HTML DOM
HTML Audio/Video
HTML 5
HTML 5 MathML
HTML Course
HTML Questions
Improve Article
Сохранить статью
- Последнее обновление: 20 июл, 2022
Улучшить статью
Сохранить статью
Базовый тег HTML используется для указания базового URI или URL для относительных ссылок. Этот URL-адрес будет базовым URL-адресом для каждой ссылки на странице и будет иметь префикс перед каждой из них. Например, если URL-адрес, указанный в базовом теге, — «www.xyz.com», то все остальные URL-адреса на странице будут иметь префикс «www.xyz.com/».
Важные моменты :
- Базовый тег должен быть определен между тегами заголовка.
- На странице может быть не более 1 базового тега.
Синтаксис:
Пример: Обратите внимание, что мы указали только относительный адрес для изображения. Поскольку мы указали базовый URL-адрес в разделе заголовка, браузер будет искать изображение по адресу «https://media.geeksforgeeks.org/wp-content/uploads/1-9».5.jpg”. То есть в приведенной ниже программе мы указали базовый URL-адрес «https://media.geeksforgeeks.org/wp-content/uploads/» для всех ссылок и когда мы ссылаемся на изображение по URL-адресу «1-95. jpg». », то браузер фактически отображает изображение с «https://media.geeksforgeeks.org/wp-content/uploads/1-95.jpg».
HTML
|