Ссылки HTML

HTML использует гиперссылки для подключения к другому документу в Интернете.

Ссылки можно найти почти на всех веб-страницах. Нажатие на ссылку позволяет перейти от одной страницы к другой.

Пример

Создание гиперссылок
Этот пример демонстрирует, как создавать ссылки в HTML-документе.
Использование изображения в качестве ссылки
Этот пример демонстрирует, как использовать изображение в качестве ссылки.

(Более подробные примеры можно найти в нижней части этой страницы)

HTML-ссылки (ссылки)

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

Когда курсор мыши перемещается на ссылку на странице, стрелка становится маленькой рукой.

Мы создаем ссылки в HTML, используя тег <a>.

Есть два способа использования тега <a>:

  1. С помощью атрибута href - создание ссылки на другой документ
  2. С помощью атрибута name - создание закладок в документе

Дополнительное чтение:Что такое гипертекст?

Синтаксис HTML-ссылки

HTML-код ссылки очень прост. Он выглядит так:

<a href="url">Текст ссылки</a>

Атрибут href определяет цель ссылки.

Текст между开始的 и заканчивающим тегами отображается как гиперссылка.

Пример

<a href="http://www.codew3c.com/">Посетите CodeW3C.com</a>

Следующая строка будет отображаться как:Посетите CodeW3C.com

Нажатие на эту гиперссылку перенесет пользователя на главную страницу CodeW3C.com.

Совет:"Текст ссылки" не обязательно должен быть текстом. Ссылкой могут быть изображения или другие элементы HTML.

HTML-ссылка - атрибут target

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

Следующая строка откроет документ в новом окне:

<a href="http://www.codew3c.com/" target="_blank">Посетите CodeW3C.com!</a>

Попробуйте сами

HTML-ссылка - атрибут name

Атрибут name определяет имя маркера (anchor).

Вы можете создать закладку в HTML-странице с помощью атрибута name.

Закладки не отображаются в особом виде и не видны читателю.

Используя именованные маркеры (named anchors), мы можем создать ссылки, которые напрямую переносят пользователя к этому именованному маркеру (например, к某个 разделу на странице), чтобы пользователь не приходилось постоянно прокручивать страницу в поисках нужной информации.

Синтаксис именованных маркеров:

<a name="label">Маркер (текст, отображаемый на странице)</a>

Совет:Имя маркера может быть любым, который вам нравится.

Совет:Вы можете использовать атрибут id вместо атрибута name, и маркер будет работать так же эффективно.

Пример

Сначала мы называем маркер в HTML-документе (создаем закладку):

<a name="tips">Основные注意事项 - Полезные советы</a>

Затем мы создаем ссылку на этот маркер в том же документе:

<a href="#tips">Полезные советы</a>

Вы также можете создать ссылку на этот маркер на других страницах:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Полезные советы</a>

В приведенном выше коде мы добавляем символ # и имя якоря в конец URL, чтобы可以直接 ссылаться на именованный якорь tips.

Конкретный эффект:Полезные советы

Основные注意事项 - полезные советы:

Комментарий:Всегда добавляйте обратную косую черту к подкаталогам. Если вы напишете ссылку таким образом: href="http://www.codew3c.com/html", сервер отправит два HTTP запроса. Это происходит потому, что сервер добавляет обратную косую черту к этому адресу и создает новый запрос, как это: href="http://www.codew3c.com/html/".

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

Совет:Если браузер не может найти определенный именованный якорь, он переместится в顶端 документа. Ошибки не будут возникать.

Более примеров

Открывать ссылки в новом окне браузера
Этот пример демонстрирует, как открыть страницу в новом окне браузера, чтобы посетители не покидали ваш сайт.
Ссылка на другое место на той же странице
Этот пример демонстрирует, как использовать ссылки для перехода к другой части документа
Выход из рамки
Этот пример демонстрирует, как跳出 рамку, если ваша страница застряла в рамке.
Создание почтовой ссылки
Этот пример демонстрирует, как создать ссылку на почту. (Этот пример работает только после установки почтового клиента.)
Создание почтовой ссылки 2
Этот пример демонстрирует более сложные почтовые ссылки.

Тег ссылки HTML

Тег Описание
<a> Определение якоря.