link text что это
Тег link в HTML
Тег link в HTML применяется для ссылки на другие ресурсы, используемые в документе.
Типы ссылок
Существует много типов ресурсов, на которые может ссылаться документ. Это делается с помощью ключевых слов, указанных в атрибуте отношения ( rel ). Они должны использоваться в разделе как метаданные:
Alternate
В приведенном ниже примере представлены два альтернативных языка для данного документа HTML на английском — французский и испанский языки. Атрибут hreflang используется, чтобы сообщить пользовательскому агенту доступный код страны по стандарту ISO 639-1 :
Еще один пример использования HTML link rel предлагает три различных текстовых документа на английском, французском и испанском языках:
Author
Используется для получения информации об авторе. Как правило, гиперссылка ведет на страницу автора. В данном атрибуте тега может быть указан только один автор:
В завершении можно добавить метатег author :
Позволяет предоставить помощь посетителям страницы. Пользовательский агент, поддерживающий справку, может иметь два вида — основная вкладка для отображения документа и другая для вывода справки:
Это значение HTML link rel указывает на иконку страницы. Может быть множество иконок, представляющих страницу. Используется та, которая является наиболее подходящей:
License
Это условия лицензии авторских прав на документ. Можно использовать лицензию на весь сайт или лицензию, имеющую отношение к конкретному документу:
Prefetch
Это значение HTML link rel дает подсказку пользовательскому агенту о том, что он должен кэшировать ресурс для ускорения загрузки и обработки. Это делается, когда разработчик точно знает, что ресурсы, используемые на странице, будут запрашиваться:
Search
Определяет документ, который используется для поиска существующего документа. Как правило, это страница со специальной формой для поиска ключевых слов в документе. Для реализации рекомендуется использовать спецификацию OpenSearch :
Stylesheet
HTML link CSS используется для импорта таблицы стилей, используемой для отображения документа. Это делается с помощью каскадных таблиц стилей ( CSS ):
Пожалуйста, оставьте свои комментарии по текущей теме статьи. За комментарии, лайки, дизлайки, отклики, подписки огромное вам спасибо!
Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:
Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.
Вы можете, также, указать медиа тип или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:
Другие замечания по использованию:
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
auto : указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.
high : указывает браузеру, что ресурс находится в высоком приоритете.
low : указывает браузеру, что ресурс находится в низком приоритете.
Примечания:
Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.
Нестандартные атрибуты
Устаревшие атрибуты
Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.
Стилизация с CSS
Примеры
Включение таблицы стилей
Включение таблицы стилей на страницы имеет следующий синтаксис:
Предоставление альтернативных таблиц стилей
Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.
Предоставление иконок для различных контекстов использования
Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel и sizes как подсказки.
Условная загрузка ресурсов с медиавыражениями
Вы можете предоставить тип медиа или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:
События загрузки таблицы стилей
Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
Text Link от Piro (piro_or)
Allows URI texts written in webpages to be loaded by double clicks.
Метаданные расширения
Используется
Allows URI texts written in webpages to be loaded by double clicks.
Without this extension, when you discover an URI text not linked, like «http://piro.sakura.ne.jp/», you have to do following steps to load the page:
1. Select the URI text completely. (It may be a hard work if the page is rendered with a propotional font. This operation always chafes me.)
2. Copy it. (press «Ctrl-C» or use «Copy» from the «Edit» menu)
3. Paste it to the location bar.
4. Press «Enter». Then, Firefox loads it.
1. Select the URI text completely. (It chafes me again!)
2. Drag the selection string to the tab bar and drop it. Then, Firefox loads it.
With this extension, you can load the URI only following one step:
1. Double-click on the URI text. Then, Firefox loads it. I’m happy.
(@2006.3.12) I know that the «Linkification» extension provides similar result. My advantages are:
See testcases in my site:
http://piro.sakura.ne.jp/xul/_textlink.html.en#testcases
Text LInk can recognize all of them completely.
Сообщить о нарушении правил этим дополнением
Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.
Не используйте эту форму, чтобы сообщать об ошибках или запрашивать новые функции в дополнении; это сообщение будет отправлено в Mozilla, а не разработчику дополнения.
Этому дополнению нужно:
С CSS, ссылки могут быть стилизованы по-разному.
Укладка ссылки
Пример
Кроме того, ссылки могут быть стилизованы по-разному в зависимости от того, в каком состоянии они находятся.
Четыре ссылки состояний:
Пример
/* unvisited link */
a:link <
color: red;
>
/* visited link */
a:visited <
color: green;
>
/* mouse over link */
a:hover <
color: hotpink;
>
/* selected link */
a:active <
color: blue;
>
При задании стиля для нескольких состояний ссылок существуют некоторые правила заказа:
Оформление текста
Свойство text-decoration в основном используется для удаления подстрочных ссылок:
Пример
a:visited <
text-decoration: none;
>
a:hover <
text-decoration: underline;
>
a:active <
text-decoration: underline;
>
Цвет фона
Свойство background-color может использоваться для указания цвета фона для ссылок:
Пример
a:link <
background-color: yellow;
>
a:visited <
background-color: cyan;
>
a:hover <
background-color: lightgreen;
>
a:active <
background-color: hotpink;
>
Дополнительные кнопки-ссылки
В этом примере демонстрируется более продвинутый пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде полей/кнопок:
Пример
a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active <
background-color: red;
>
Другие примеры
Добавление различных стилей к гиперссылкам
В этом примере демонстрируется добавление других стилей к гиперссылкам.
Изменение курсора
Свойство Cursor указывает тип отображаемого курсора. В этом примере демонстрируются различные типы курсоров (могут быть полезны для ссылок).
Практический HTML: улучшаем семантику ссылок
Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.
Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).
Ссылка как она есть
Теория относительности ( rel ativity)
Может быть, вы уже читали про атрибут rel у ссылки. Я готов поспорить, что в секции head ваших страниц будет располагаться что-нибудь типа этого:
Еще одно распространенное употребление rel :
В данном случае связь между текущим документом и связанным — RSS-лентой — указана как alternate : альтернативное преставление текущего документа.
Вы можете добавить дополнительную информацию к этой ссылке, используя атрибут rel :
Элементарные микроформаты
Эта конструкция описывает, что текущая страница ссылается на документ, помеченный как «лицензия».
Микроформат rel-tag идет немного дальше. Он используется для указания на то, что последняя часть URL’а у ссылки является «меткой» для текущего документа:
В данном случае для этого документа добавлена метка «Microformats».
XFN (XHTML Friends Network) является способом описания отношений между людьми:
Таким образом я указываю, что Drew мой друг, я с ним встречался, и он мой коллега (ведь мы оба фанатеем от интернета (Web monkies)).
«Мы — хотим перемен» ( rev olution)
Разумность большинства
За легкостью использования rel и rev скрывается богатый потенциал. Они позволяет относительно легко добавить в ваши ссылки больше семантического смысла, что создает связи, которые затем могут быть обработы поисковыми роботами, агрегаторами или браузерами. Пусть вашим следующим шагом станет тесное знакомство с этими атрибутами и расширение возможностей ссылок.