Визначення URL-адреси бази документів за допомогою елемента HTML

Веб-сайти побудовані з низкою посилань, які вказують на сторінки та джерела, такі як зображення та таблиці стилів. Є два шляхи вкажіть URL, який посилається на ці джерела: або використовуйте абсолютний шлях або відносний шлях.

Абсолютний шлях відноситься до певного призначення, зазвичай він починається з імені домену (разом з HTTP) www.domain.com/destination/source.jpg. Відносний шлях є протилежним: призначення посилання залежить від кореневого розташування або в більшості випадків доменного імені вашого веб-сайту.

Типовий відносний шлях виглядатиме так:

Якщо, наприклад, домен вашого веб-сайту, hongkiat.com шлях зображення буде вирішуватися hongkiat.comimages_2 / вказати-документ-base-url-with-html-base-element.png. Ви повинні розуміти це, якщо ви розробляєте веб-сайт на деякий час.

Але більшість з вас, напевно, не чули про це елемент. Цей HTML-тег існує ще з часів HTML4, але його реалізація в дикій природі дуже мало. W3C описує цей елемент як:

“Базовий елемент дозволяє авторам вказувати URL бази даних документа для цілей розв'язання відносних URL-адрес і назви контекст перегляду за промовчанням для цілей наступних гіперпосилань.”

Це елемент визначає базову URL-адресу для відносного шляху на веб-сторінках. Замість того, щоб залежати від кореневого розташування або домену вашого веб-сайту, ви можете вказати його в іншому місці, можливо, як URL-адресу, де ваші ресурси знаходяться в CDN (Network Delivery Network). Давайте подивимося, як це дійсно працює.

Використання базового елемента

The визначається уздовж сторони і в тегах . Враховуючи наступний приклад, ми встановлюємо основну URL-адресу в Google.

Ця специфікація впливатиме на всі шляхи всередині документа, включаючи шлях, вказаний у межах документа href атрибут і src зображень. Отже, припускаючи, що таблиця стилів, зображення та посилання в наборі документів мають відносний шлях, наприклад, такий:

  Якірне посилання

Незважаючи на те, що наша веб-сторінка знаходиться під demo.hongkiat.com відносний шлях позначатиметься hongkiat.maxcdn.com, після базового шляху, вказаного в . Спробуйте наведіть курсор на посилання, а веб-переглядач покаже вам, куди саме йде шлях.

Усі відносні шляхи зрештою будуть:

  Якірне посилання

Налаштування цільового посилання за умовчанням

Окрім визначення базового URL, тег може також встановити цільову лінію посилань за допомогою мету атрибут. Скажімо, потрібно відкрити всі посилання в документі у новій вкладці браузера, встановити мету с _blank, так.

Обмеження

The тег, однак, у деяких обставинах містить кілька застережень:

По-перше, підтримка браузера велика; вона працює в IE6. Але, IE6 вважає, що він вимагає закриття тегу . Це може спричинити виникнення ієрархії в документі, якщо закриваючий тег не вказано. Простим способом вирішення цієї проблеми є додавання закриття в коментарі, .

Якщо ви використовуєте # у поєднанні з Щоб під’єднатися до розділів документа, можливо, виникне проблема в Internet Explorer 9. Замість того щоб переходити до розділу, на який посилається, Internet Explorer 9 перезавантажить сторінку.

Крім того, порожній href призведе до створення базової URL-адреси замість посилання на поточний каталог, де знаходиться сторінка (це поведінка веб-переглядача за умовчанням), що може призвести до несподіваних проблем із посиланням.

Завершення

The це зручна функція HTML, яка може спростити посилання на посилання у веб-документі. Використовуйте тег уважно, щоб мінімізувати пастки. Дотримуйтесь наведених нижче посилань для отримання додаткової інформації про тег:

Абсолютні та відносні URL-адреси - MSDN
Базовий елемент HTML - W3C