HTML тег - Что такое href в HTML - httpdoc.ru

HTML тег - что такое href в HTML

HTML тег также известен как тег привязки. Он определяет, hyperlink что связывает одну страницу с другой. href Атрибут HTML используется , чтобы дать ссылку (Path) страницы или документа , который будет связан.

<a> Тег парный тег с </a> тегом в качестве закрывающего тега. Все, что написано между этими двумя тегами, будет отображаться на веб-странице в виде гиперссылки.

Атрибут href в HTML используется в теге для указания ссылки (URL местоположения) другой веб-страницы. Полная форма href - это гипертекстовая ссылка. Проще говоря, вам просто нужно вставить URL-адрес веб-страницы в href, на которую вы хотите разместить ссылку.

Синтаксис использования href HTML
< HREF = "URL" > текст ссылки < / а >
                             Пример:  < HREF = "/" > Посетите наш сайт htmldoc < / а >

В приведенном ниже примере текст «Посетите наш учебник по HTML» будет работать как гиперссылка и приведет пользователя на страницу нашего руководства по HTML. Мы указали адрес (путь) этой страницы в качестве ссылки в href атрибуте.

Пример тега
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Anchor Tag </title> 
</head> 

<body> 

<a href="/"> Welcome to htmldoc </a> 

</body> 
</html>

Выход


Атрибут цели HTML

target Атрибут HTML используется для указания места в браузере, где должен быть открыт связанный документ. Например, хочет ли пользователь открыть ссылку в новой вкладке, новом окне или в том же теге. Целевой атрибут имеет разные значения для всех этих разных местоположений.

target Атрибут может иметь одно из следующих значений:

Ценить Описание
target = "_ blank" Открывает связанный документ в новом окне или на новой вкладке.
target = "_ self" Открывает связанный документ в том же окне / вкладке. Это значение по умолчанию.
target = "_ parent" Открывает связанный документ в родительском фрейме.
target = "_ top" Открывает связанный документ во всем окне.
target = "_ framename" Открывает связанный документ в именованном фрейме.

Примечание. HTML-фреймы объявлены устаревшими в HTML 5, и их не рекомендуется использовать.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Anchor Tag Example </title> 
</head> 

<body>

<p><a href="/" target="_blank">Welcome to htmldoc</a></p>
<p><a href="/" target="_top">Welcome to htmldoc</a></p>
<p><a href="/" target="_parent">Welcome to htmldoc</a></p>
<p><a href="/" target="_top">Welcome to htmldoc</a></p>

</body>

</html>

Выход


HTML-ссылка на изображение - используйте HTML href с тегом img

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Image Link </title> 
</head> 

<body>

<p>The image is a link. You can click on it.</p>

<a href="/">
  <img src="PUBG.png" alt="HTML Image" style="width:300px;height:200px;">
</a>

</body>

</html>

Выход

HTML Image Link Example HTML изображение

Как видите, в приведенном выше примере <img> тег используется внутри <a> тега. Эта вложенная структура создает все изображение в виде гиперссылки.


Базовый путь HTML - добавить с помощью href

Когда вы связываете HTML-документы, относящиеся к одному и тому же веб-сайту, не требуется указывать полный URL-адрес в href для каждой ссылки, если вы используете ссылку «Базовый путь». Этот базовый путь определяется в <base> теге в заголовке вашего HTML-документа.

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

Посмотрите на пример ниже, чтобы понять это полностью.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Base Path Link Example</title> 
    <base href="https://www.htmldoc.com" target="_blank">
</head> 

<body>

<p> Click following link </p>
<a href="/HTML/uchebnoe-posobie-po-html.html"> Learn HTML </a>

</body>

Выход


Цвет ссылки HTML

Вы можете установить цвета вашей ссылки, active links и visited links используя ссылку, alink и VLINK атрибуты <body> тега. Однако эти цвета также можно задать с помощью классов CSS. Мы узнаем об этом позже Учебник CSS .

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Change Link Color </title> 
</head> 

<body alink="green" vlink="red">

<p> Click following link </p>
<a href="https://geekrepublics.com/"> Welcome to GeekRepublics </a>

</body>

Выход


Примечание . Атрибут alink не поддерживается в HTML5. Вместо этого используйте CSS.

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

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<a>
да
да
да
да
да