Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

HTML Ссылки


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


HTML Ссылки Описание

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

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

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


HTML Ссылки - Гиперссылки

HTML ссылки являются гиперссылками.

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


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

В HTML, ссылки определяются с <a> тегом:

<a href=" url "> link text </a>

пример

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Попробуй сам "

href атрибут указывает адрес получателя (http://www.w3ii.com/html/default.html)

Текст ссылки является видимой частью (Visit our HTML tutorial) .

При нажатии на текст ссылки, отправит Вам по указанному адресу.

Текст ссылки не должен быть текст. Это может быть HTML изображения или любого другого элемента HTML.

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


Локальные ссылки

В приведенном выше примере используется абсолютный URL (A full web address) - (A full web address) .

Локальная ссылка (link to the same web site) - (without http://www.... ) (link to the same web site) задается с относительным URL (without http://www.... ) .

пример

<a href="html_images.asp">HTML Images</a>
Попробуй сам "

HTML Ссылки - Цвета

При перемещении мыши по ссылке, две вещи, как правило, бывает:

  • Стрелка мыши превратится в маленькую руку
  • Цвет элемента ссылка изменится

По умолчанию, ссылка будет выглядеть следующим образом (in all browsers) :

  • Непосещенная ссылка подчеркнутая и синий
  • Посещаемая ссылка подчеркнутая и фиолетовая
  • Активная ссылка подчеркнутая и красная

Вы можете изменить цвета по умолчанию, с помощью стилей:

пример

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Попробуй сам "

HTML Ссылки - The target Атрибут

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

Этот пример будет открыть связанный документ в новом окне браузера или в новой вкладке:

пример

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
Попробуй сам "
Целевое значение Описание
_blank Открывает связанный документ в новом окне или вкладке
_self Открывает связанный документ в тот же кадр , как она была нажата (this is default) по (this is default)
_parent Открывает связанный документ в родительском фрейме
_top Открывает связанный документ в полном теле окна
framename Открывает связанный документ в указанной рамке

Если веб - страница заблокирована в кадре, вы можете использовать target="_top" , чтобы выйти из рамы:

пример

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Попробуй сам "

HTML Ссылки - изображение как ссылку

Обычно использовать изображения в качестве ссылок:

пример

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Попробуй сам "

граница: 0 добавляется для предотвращения IE9 (and earlier) отображать границы вокруг изображения.


HTML Ссылки - Создание закладки

HTML закладки используются, чтобы позволить читателю перейти к определенным частям веб-страницы.

Закладки практичны, если ваш сайт имеет длинные страницы.

Чтобы сделать закладку, вы должны сначала создать закладку, а затем добавьте ссылку на него.

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

пример

Во- первых, создать закладку с id атрибута:

<h2 id="tips">Useful Tips Section</h2>

Затем добавьте ссылку на закладку ("Useful Tips Section") , в рамках одной и той же странице:

<a href="#tips">Visit the Useful Tips Section</a>

Или, добавьте ссылку на закладку ("Useful Tips Section") , с другой страницы:

пример

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Попробуй сам "

Краткое содержание главы

  • Используйте HTML - <a> элемент определить связь
  • Используйте HTML href атрибут , чтобы определить адрес ссылки
  • Используйте HTML target атрибут , чтобы определить , где открыть связанный документ
  • Используйте HTML - <img> элемент (inside <a> ) , чтобы использовать изображение в качестве ссылки
  • Используйте HTML id атрибута ( id=" value ") , чтобы определить закладки на странице
  • Используйте HTML href атрибута ( href="# value ") для связи с закладкой

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »


HTML Link теги

Тег Описание
<a> Определяет гиперссылку