Атрибут rel | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.
Синтаксис
| HTML | |
| XHTML |
|
Значения
- stylesheet
- Определяет, что подключаемый файл хранит таблицу стилей (CSS).
- alternate
- Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
Значение по умолчанию
Нет.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег LINK, атрибут rel</title>
<link rel="stylesheet" href="hb.css">
</head>
<body>
<p>...</p>
</body>
</html>Статьи по теме
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.
Синтаксис
| HTML | |
| XHTML | |
Атрибуты
- charset
- Кодировка связываемого документа.
- href
- Путь к связываемому файлу.
- media
- Определяет устройство, для которого следует применять стилевое оформление.
- rel
- Определяет отношения между текущим документом и файлом, на который делается ссылка.
- sizes
- Указывает размер иконок для визуального отображения.
- type
- MIME-тип данных подключаемого файла.
Также для этого тега доступны универсальные атрибуты.
Закрывающий тег
Не требуется.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег LINK</title> <link rel="stylesheet" href="ie.css"> <link rel="alternate" type="application/rss+xml" title="Статьи с сайта htmlbook.ru" href="http://htmlbook.ru/rss.xml"> <link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico"> </head> <body> <p>...</p> </body> </html>
В данном примере подключается внешний файл со стилями с помощью атрибута rel=»stylesheet» тега <link>, указывается RSS-документ текущего сайта (link rel=»alternate» type=»application/rss+xml») и устанавливается иконка сайта в адресной строке браузера (link rel=»shortcut icon»).
Тег
У данного тега очень много атрибутов и они могут принимать разнообразные значения, однако в реальной жизни они все практически не используются. Самое популярное — это подключение CSS и добавление фавикона.
Как подключить CSS в HTML5: <link rel=»stylesheet» href=»style.css»>. В более ранних версиях нужно было добавлять атрибут type в значении text/css
Как подключить фавикон: <link href=»favicon.ico» rel=»shortcut icon» type=»image/x-icon»>.
Тег link не требует закрывающего тега.
Атрибуты
| Атрибут | Описание |
|---|---|
| href | Путь к подключаемому файлу. |
| media | Тип устройства, для которого следует подключить файл. Что имеется ввиду — вы можете подключить CSS файл только для больших экранов (значение screen) или только для маленьких экранов: для мобильников или планшетов (значение handheld). Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже. |
| rel | Тип подключаемого файла. Возможные значения: stylesheet | alternate. Значение stylesheet указывает на то, что подключается CSS файл, значение alternate используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей. |
| charset | Кодировка подключаемого файла. В настоящее время стандартом является utf-8. |
| type | Тип данных подключаемого файла. Для CSS следует использовать text/css,
для фавикона: |
Значения атрибута media
В HTML5 в качестве значений могут быть указаны медиа-запросы.
| Значение | Описание |
|---|---|
| all | Все устройства. |
| screen | Экран монитора. |
| handheld | Телефоны, смартфоны, устройства с маленьким экраном. |
| braille | Устройства, основанные на системе Брайля, предназначены для слепых людей. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры. |
| Принтеры. | |
| projection | Проекторы. |
| tty | Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пиксели в качестве единиц измерения. |
| tty | Телевизоры, которые умеют открывать web страницы (бывает и такое). |
Значение по умолчанию: all.
Пример
Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
Это основное содержимое страницы.
</body>
</html>
Смотрите также
- тег style,
который добавляет CSS прямо на странице - атрибут style, который задает стили конкретному тегу
Тег | HTML справочник
Поддержка браузерами
Описание
HTML тег <link> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента <head>. Чаще всего тег
<link href="style.css" rel="stylesheet" type="text/css">
Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css"
type указывать не требуется:<link href="style.css" rel="stylesheet">
Предварительная загрузка страниц
Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется «предварительное получение страницы». Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.
<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">
Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег <link> для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.
Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).
Атрибуты
- href:
- Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса).
- hreflang:
- Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут
hreflangиспользуется только совместно с атрибутомhref. - media:
- Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут
mediaможет принимать сразу несколько значений, разделяемых между собой пробелами. - rel:
- Указывает связь между текущим документом и документом, на который ведет ссылка.
- alternate — ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
- author — определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
- canonical — позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег
<link>с атрибутомrel="canonical".Атрибут
href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:<link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
- first — указывает ссылку, ведущую на первый документ из последовательности документов.
- help — ссылка на документ со справкой.
- icon — определяет путь к иконке, которая будет использована для текущего документа.
- last — указывает ссылку, ведущую на последний документ в последовательности документов.
- licence — ссылка на сведения об авторских правах для документа.
- next — указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
- prefetch — указывает, что следует заранее кэшировать файл, на который ведет ссылка.
- prev — указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
- search — ссылка на поиск для документа.
- stylesheet — определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
- sizes:
- Указывает размер иконок для визуального отображения. Атрибут
sizesиспользуется только совместно сrel="icon", может принимать следующий значения: - type:
- Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом
href.
Тег <link> так же поддерживает Глобальные атрибуты
Стиль по умолчанию
link {
display: none;
}
Пример
<head> <link rel="stylesheet" href="style.css"> </head>
Результат данного примера в окне браузера:
Атрибут rel | HTML | WebReference
Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.
Значения
- alternate
- Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
- author
- Указывает ссылку на автора текущего документа или статьи.
- help
- Указывает ссылку на контекстно-зависимую справку.
- icon
- Адрес картинки, которая символизирует текущий документ или сайт.
- license
- Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
- next
- Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
- prev
- Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
- search
- Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
- stylesheet
- Определяет, что подключаемый файл хранит таблицу стилей (CSS).
Значение по умолчанию
Пример
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>LINK, атрибут rel</title> <link rel=»stylesheet» href=»hb.css»> </head> <body> <p>…</p> </body> </html>
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.05.2018
Редакторы: Влад Мержевич
HTML: тег link | HTML/xHTML
link HTML применяется для ссылки на другие ресурсы, используемые в документе.
Существует много типов ресурсов, на которые может ссылаться документ. Это делается с помощью ключевых слов, указанных в атрибуте отношения (rel). Они должны использоваться в разделе <head> как метаданные:
- alternate;
- author;
- help;
- icon;
- license;
- next;
- prefetch;
- prev;
- search;
- stylesheet.
Тег <link> в HTML размещается в <head> и <body>, хотя чаще он встречается в <head> в качестве метаданных. Тег <link> может ссылаться на традиционную гиперссылку, используемую для навигации или присоединения к документу внешних ресурсов, таких как CSS и Javascript.
Используется для альтернативного представления HTML документа.
В приведенном ниже примере представлены два альтернативных языка для данного документа HTML на английском — французский и испанский языки. Атрибут hreflang используется, чтобы сообщить пользовательскому агенту доступный код страны по стандарту ISO 639-1:
<head> <link rel="alternate" hreflang="fr" type="text/html" href="http://www.site.com/lang/fr/html/this-doc.html"/> <link rel="alternate" hreflang="es" type="text/html" href="http://www.site.com/lang/es/html/this-doc.html"/> </head>
Еще один пример использования HTML link rel предлагает три различных текстовых документа на английском, французском и испанском языках:
<head> <link rel="alternate" hreflang="en" type="application/msword" href="http://www.site.com/lang/en/msword/this-doc.doc"/> <link rel="alternate" hreflang="fr" type="application/msword" href="http://www.site.com/lang/fr/msword/this-doc.doc"/> <link rel="alternate" hreflang="es" type="application/msword" href="http://www.site.com/lang/es/msword/this-doc.doc"/> </head>
Используется для получения информации об авторе. Как правило, гиперссылка ведет на страницу автора. В данном атрибуте тега может быть указан только один автор:
<head> <link rel="author" href="http://www.site.com/the-author-bio"/> </head>
Если имеется много авторов, связанных с HTML-страницей, нужно применить несколько тегов link HTML:
<head> <link rel="author" href="http://www.site1.com/the-author-bio"/> <link rel="author" href="http://www.site2.com/the-author-bio"/> <link rel="author" href="http://www.site3.com/the-author-bio"/> </head>
В завершении можно добавить метатег author:
<head> <meta name="author" content="Статья написана Joe Smith, Harry Paul, Samantha Lang"> </head>
Позволяет предоставить помощь посетителям страницы. Пользовательский агент, поддерживающий справку, может иметь два вида — основная вкладка для отображения документа и другая для вывода справки:
<head> <link rel="help" href="http://www.site.com/category/article-title/help.html"/> </head>
Это значение HTML link rel указывает на иконку страницы. Может быть множество иконок, представляющих страницу. Используется та, которая является наиболее подходящей:
<head> <link rel="icon" type="image/png" href="http://www.site.com/icons/favicon.png"/> <link rel="icon" type="image/jpeg" href="http://www.site.com/icons/apple.jpg"/> <link rel="icon" type="image/gif" href="http://www.site.com/icons/msoft.gif"/> <link rel="icon" type="image/png" href="http://www.site.com/icons/android.png"/> </head>
Это условия лицензии авторских прав на документ. Можно использовать лицензию на весь сайт или лицензию, имеющую отношение к конкретному документу:
<head> <link rel="license" type="text/html" href="http://www.site.com/legal/sitewide.html"/> <link rel="license" type="text/html" href="http://www.site.com/legal/item-100.html"/> </head>
Указывает на следующую страницу в HTML-документе. Для поисковых систем весьма полезно знать, какая страница является следующей:
<head> <link rel="next" href="http://www.site.com/article-title/2"/> </head>
Это значение HTML link rel дает подсказку пользовательскому агенту о том, что он должен кэшировать ресурс для ускорения загрузки и обработки. Это делается, когда разработчик точно знает, что ресурсы, используемые на странице, будут запрашиваться:
<head> <link rel="prefetch" href="http://www.site.com/fonts/myfonts"/> <link rel="prefetch" href="http://www.site.com/images/mylogo.jpg"/> <link rel="prefetch" href="http://www.site.com/article-title/1"/> <link rel="prefetch" href="http://www.site.com/article-title/3"/> </head>
Определяет предыдущую страницу в HTML-документе. Полезно для навигации по страницам:
<head> <link rel="prev" href="http://www.site.com/article-title/1"/> </head>
Определяет документ, который используется для поиска существующего документа. Как правило, это страница со специальной формой для поиска ключевых слов в документе. Для реализации рекомендуется использовать спецификацию OpenSearch:
<head> <link rel="search" href="http://www.site.com/search/search.html"/> </head>
HTML link CSS используется для импорта таблицы стилей, используемой для отображения документа. Это делается с помощью каскадных таблиц стилей (CSS):
<head> <link rel="stylesheet" type="text/css" href="http://www.site.com/css/styles.css"/> </head>
Данная публикация представляет собой перевод статьи «HTML: The Link Tag» , подготовленной дружной командой проекта Интернет-технологии.ру
улучшаем семантику ссылок / Хабр
Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).
Ссылка как она есть
Весь потенциал ссылок заключается в атрибуте href, сокращение от hypertext reference. Он создает одностороннюю связь текущей страницы с другим ресурсом, обычно другой такой же страницей в интернете:
<a href="http://allinthehead.com/">
Атрибут href находится в открывающем теге a, между открывающим и закрывающим тегами находится текст для описания ссылки:
<a href="http://allinthehead.com/">Drew McLellan</a>
«Ну и что», — скажите вы. — «Это я все и так знаю», — и будете абсолютно правы! Но у ссылки есть еще кое-что, кроме атрибута href.
Теория относительности (relativity)
Может быть, вы уже читали про атрибут rel у ссылки. Я готов поспорить, что в секции head ваших страниц будет располагаться что-нибудь типа этого:
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
Атрибут rel описывает связь между текущим документом и тем, на который он указывает. В этом случае, значением атрибута rel является stylesheet. Это означает, что связанный документ является таблицей стилей для текущего: между ними именно такая связь.
Еще одно распространенное употребление rel:
<link rel="alternate" type="application/rss+xml" title="Моя RSS-лента" href="index.xml" />
В данном случае связь между текущим документом и связанным — RSS-лентой — указана как alternate: альтернативное преставление текущего документа.
Оба этих примера используют тег link, но вы можете использовать атрибут rel и у обычных ссылок. Например, мы ссылаетесь на вашу RSS-ленту из секции :
Подпишитесь на <a href="index.xml">мою RSS-ленту</a>.
Вы можете добавить дополнительную информацию к этой ссылке, используя атрибут rel:
Подпишитесь на <a href="index.xml" rel="alternate" type="application/rss+xml">мою RSS-ленту</a>.
Не существует определенного списка значений для атрибута rel, поэтому вы можете использовать все, что посчитаете семантически разумным. Например, если у вас сложное коммерческое веб-приложение, в котором присутствует ссылка на подсказку, то вы можете определить связь между текущей страницей и этой подсказкой, используя значение help:
<a href="help.html" rel="help">нужна подсказка?</a>
Элементарные микроформаты
Хотя вы абсолютно свободны в использовании значений атрибута rel, существует уже некоторые общепринятые значения при использовании микроформатов. Некоторые из простейших микроформатов предлагают варианты грамотного использования rel. Например, если вы ссылаетесь на лицензию, под которой опубликован данный документ, используйте микроформат rel-license:
Распространяется под лицензией <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Creative Commons</a>
Эта конструкция описывает, что текущая страница ссылается на документ, помеченный как «лицензия».
Микроформат rel-tag идет немного дальше. Он используется для указания на то, что последняя часть URL’а у ссылки является «меткой» для текущего документа:
Прочитайте про <a href="http://en.wikipedia.org/wiki/Microformats" rel="tag">семантическую верстку</a>
В данном случае для этого документа добавлена метка «Microformats».
XFN (XHTML Friends Network) является способом описания отношений между людьми:
<a href="http://allinthehead.com/" rel="friend">Drew McLellan</a>
Этот микроформат в значительной степени расширяет возможное применение атрибута rel. Так же, как и атрибут class, rel может принимать несколько значений, разделенных пробелом:
<a href="http://allinthehead.com/" rel="friend met colleague">Drew McLellan</a>
Таким образом я указываю, что Drew мой друг, я с ним встречался, и он мой коллега (ведь мы оба фанатеем от интернета (Web monkies)).
«Мы — хотим перемен» (revolution)
Если rel описывает связь между текущей страницей и той, на которую она ссылается, (прим.: текущая страница -> другая страница) то rev используется для обратной зависимости: он определяет вид связи страницы, на которую ссылаются, с текущей (прим.: текущая страница <- другая страница). Ниже приведен пример, который может быть использован в help.html:
<a href="shoppingcart.html" rev="help">вернуться в магазин</a>
Атрибут rev указывает, что текущая страница является страницей помощи, подсказкой для той, на которую она ссылается.
Микроформат vote-links позволяет вам использовать атрибут rev для уточнения ваших ссылок. Например, определяя значение vote-for, вы можете указать, что ваш документ поддерживает тот, на который ссылается:
Я согласен с <a href="http://richarddawkins.net/home" rev="vote-for">Richard Dawkins</a>.
Есть и соответствующее значение vote-against. Оно означает, что хоть вы и ссылаетесь на этот документ, но вы явно указываете, что с ним не согласны.
Я согласен с <a href="http://richarddawkins.net/home" rev="vote-for">Richard Dawkins</a>
по поводу <a href="http://www.icr.org/" rev="vote-against">креационистов</a>.
Естественно, ничего не мешает использовать в одной ссылке и rel, и rev:
<a href="http://richarddawkins.net/home" rev="vote-for" rel="muse">Richard Dawkins</a>
Разумность большинства
За легкостью использования rel и rev скрывается богатый потенциал. Они позволяет относительно легко добавить в ваши ссылки больше семантического смысла, что создает связи, которые затем могут быть обработы поисковыми роботами, агрегаторами или браузерами. Пусть вашим следующим шагом станет тесное знакомство с этими атрибутами и расширение возможностей ссылок.
Сссылки по теме
Большое спасибо тем, кто прочитал всю статью полностью. Мне хотелось бы услышать ваше мнение или замечания по поводу использования rel/rev, в частности, или микроформатов вообще.
Web Optimizator: проверка скорости загрузки сайтов
Ссылка HTML rel Атрибут
❮ HTML <ссылка> тег
Пример
Внешняя таблица стилей:
Попробуй сам »Определение и использование
Обязательный атрибут rel указывает отношение между текущим документом и связанным документом / ресурсом.
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| отн. | Да | Да | Да | Да | Да |
Синтаксис
Значения атрибута
| Значение | Описание |
|---|---|
| альтернатива | Предоставляет ссылку на альтернативную версию документа (i.е. распечатать страницу, переведенную или зеркальную). Пример: |
| автор | Предоставляет ссылку на автора документа |
| dns-prefetch | Указывает, что браузер должен превентивно выполнять разрешение DNS для источника целевого ресурса. |
| , помощь | Предоставляет ссылку на справочный документ.Пример: |
| значок | Импортирует значок для представления документа. Пример: |
| Предоставляет ссылку на информацию об авторских правах для документа | |
| следующий | Предоставляет ссылку на следующий документ в серии |
| пингбек | Предоставляет адрес сервера пингбэка, который обрабатывает пингбэки к текущему документу | .
| предварительное соединение | Указывает, что браузер должен предварительно подключиться к источнику целевого ресурса. |
| предварительная выборка | Указывает, что браузер должен предварительно извлекать и кэшировать целевой ресурс, так как это, вероятно, потребуется для последующей навигации |
| преднагрузка | Указывает, что агент браузера должен предварительно извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с пунктом назначения, заданным атрибутом «как» (и приоритетом, связанным с этим пунктом назначения). |
| prerender | Указывает, что браузер должен предварительно отрендерить (загрузить) указанный веб-страница в фоновом режиме. Таким образом, если пользователь переходит на эту страницу, это ускоряет до загрузки страницы (потому что страница уже загружена). Предупреждение! Это трата пропускной способности пользователя! Используйте только prerender, если он абсолютно уверен что веб-страница требуется в какой-то момент в пути пользователя |
| пред | Указывает, что документ является частью серии, и что предыдущий документ в серии является ссылочным документом | .
| поиск | Предоставляет ссылку на ресурс, который можно использовать для поиска по текущему документу и связанным с ним страницам. |
| таблиц стилей | Импортирует таблицу стилей |
Tag HTML тег ,
HTML-тег ссылки
Пример
Ссылка на внешнюю таблицу стилей:
Попробуй сам »
Определение и использование
Тег определяет
Отношения между текущим документом и внешним
ресурс.
Тег чаще всего используется для ссылки на внешние таблицы стилей.
Элемент является пустым элементом, он содержит только атрибуты.
Поддержка браузера
При использовании для таблиц стилей тег поддерживается во всех основных браузерах. Никакой реальной поддержки ни для чего другого.
| Элемент | |||||
|---|---|---|---|---|---|
| <ссылка> | да | да | да | да | да |
атрибутов
| Атрибут | Значение | Описание |
|---|---|---|
| перекрестное происхождение | анонимные учетные данные для использования | Указывает, как элемент обрабатывает перекрестные запросы |
| HREF | URL | Указывает расположение связанного документа |
| Hreflang | language_code | Указывает язык текста в связанном документе |
| СМИ | media_query | Указывает, на каком устройстве будет отображаться связанный документ. |
| справочная политика | , без ссылки, , без ссылки, при понижении рейтинга, , происхождение, . происхождение-когда-кросс-происхождение unsafe-url | Указывает, какой реферер использовать при извлечении ресурса |
| отн. | альтернатива автор dns-prefetch help значок лицензия следующий Pingback предварительно подключить предварительная загрузка предварительная загрузка предварительная загрузка пред поиск таблица стилей | Требуется.Определяет связь между текущим документом и связанным документом |
| размеры | Высота x Ширина любой | Определяет размер связанного ресурса. Только для rel = "icon" |
| заголовок | Определяет предпочтительную или альтернативную таблицу стилей | |
| тип | media_type | Указывает тип носителя связанного документа |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты события
Тег также поддерживает атрибуты событий в HTML.
Связанные страницы
Учебник по HTML: стили HTML
HTML DOM ссылка: объект ссылки
Настройки CSS по умолчанию
В большинстве браузеров отображается элемент со следующими значениями по умолчанию:
ссылка {
дисплей: нет;
}
,
ссылок в документах HTML
Ссылки в документах HTMLHTML предлагает множество традиционных идиом публикации для форматированного текста и структурированные документы, но что отличает его от большинства других языков разметки его функции для гипертекста и интерактивных документов. Этот раздел представляет ссылка (или гиперссылка, или веб-ссылка), базовая гипертекстовая конструкция. ссылка - это соединение одного веб-ресурса с другим. Хотя простой концепция, связь была одной из основных движущих сил успеха Web.
А ссылка имеет два конца - якоря - и направление. Ссылка начинается с «источника» и указывает на якорь назначения, которым может быть любой веб-ресурс (например, изображение, видео) клип, звуковой фрагмент, программа, документ HTML, элемент в HTML документ и т. д.).
12.1.1 Посещение связанного ресурса
Поведение по умолчанию, связанное со ссылкой, это получение другой веб-ресурс. Такое поведение обычно и неявно Получается путем выбора ссылки (e.г., нажав, через ввод с клавиатуры, и т.д.).
Следующий фрагмент HTML содержит две ссылки, одна якорь назначения - это HTML-документ с именем "chapter2.html" и Другой, якорь назначения которого представляет собой изображение GIF в файле "forest.gif":
... немного текста ...Вы найдете гораздо больше во второй главе . См. Также эту карту заколдованного леса.
Активируя эти ссылки (щелкая мышью, через клавиатуру ввод, голосовые команды и т. д.), пользователи могут посещать эти ресурсы. Обратите внимание, что HREF атрибут в каждом исходном якоре указывает адрес якоря назначения с URI.
Якорь назначения ссылки может быть элементом в документе HTML. Якорь назначения должен иметь имя привязки и любой URI, адресованный этому Якорь должен включать имя в качестве идентификатора фрагмента.
Якоря назначения в документах HTML могут быть указаны либо A элемент (называя его name (атрибут ), или любым другим элементом (именование с атрибутом ID ).
Таким образом, например, автор может создать оглавление, записи которого ссылка на элементы заголовка х3 , х4 и т. д., в том же документе. Используя элемент A для создать якоря назначения, мы бы написали:
Содержание
Введение
Некоторые сведения
В личной заметке
... остальная часть оглавления ... ... тело документа ...Введение ... раздел 1 ...
Некоторые сведения ... раздел 2 ...
В личной заметке ... раздел 2.1 ...
Мы можем добиться того же эффекта, сделав сами элементы заголовка якоря:
Содержание
Введение
Некоторые сведения
Более личная заметка
... остальное оглавление ... ... тело документа ...Введение ... раздел 1 ...
Некоторый фон ... раздел 2 ...
На более личной заметке ... раздел 2.1 ...
12.1.2 Другая ссылка отношения
Наиболее распространенное использование ссылки на - это получение другой сети. ресурс, как показано в предыдущих примерах.Тем не менее, авторы могут вставить ссылки в своих документах, которые выражают другие отношения между ресурсами чем просто «активировать эту ссылку, чтобы посетить этот связанный ресурс». Ссылки, которые У выражений других типов отношений есть один или несколько типов ссылок, указанных в их исходной привязке.
Роли ссылки, определяемой A или LINK , определяются через отн. и Rev атрибутов.
Например, ссылки, определенные элементом LINK , могут описывать положение документа в серии документов.В следующем отрывке ссылки в документе под названием «Глава 5» указать предыдущий и следующий главы:
... другая информация о головке ...Глава 5 </ TITLE> <LINK rel = "prev" href = "chapter4.html"> <LINK rel = "next" href = "chapter6.html"> </ HEAD> </pre><p> Тип ссылки для первой ссылки - «предыдущая», а для второй - «следующая» (два из нескольких распознанных типов ссылок). Ссылки, указанные <samp> LINK </samp> - это <strong>, а не </strong>, отображаемые вместе с документом. содержимое, хотя пользовательские агенты могут отображать их другими способами (например,г., как инструменты навигации).</p><p> Даже если они не используются для навигации, эти ссылки могут быть интерпретированы в интересные способы. Например, пользовательский агент, который печатает серию HTML документы в качестве единого документа могут использовать эту информацию ссылки в качестве основы формирование связного линейного документа. Дополнительная информация приведена ниже по использованию ссылки в пользу поисковых систем.</p><h4> 12.1.3 Определение якорей и звеньев</h4><p> Хотя некоторые элементы и атрибуты HTML создают ссылки на другие ресурсы (например,г., элемент IMG </samp> <samp>, элемент <samp> Элемент FORM </samp> и т. Д.), В этой главе рассматриваются ссылки и якоря созданный из элементов <samp> LINK </samp> и <samp> A </samp>. Элемент <samp> LINK </samp> может появляться только в глава документа. Элемент <samp> A </samp> может появляться только в теле.</p><p> Когда <samp> Атрибут </samp> элемента <samp> href </samp> установлен, элемент определяет источник якорь для ссылки, которая может быть активирована пользователем для получения веб-ресурса.Исходная привязка - это местоположение экземпляра <samp> A </samp> и привязки назначения. это веб-ресурс.</p><p> Извлеченный ресурс может быть обработан пользовательским агентом несколькими способами: открытие нового документа HTML в том же окне агента пользователя, открытие нового HTML документ в другом окне, запуск новой программы для обработки ресурса, и т. д. с <samp> Элемент </samp> имеет контент (текст, изображения и т. Д.), Пользовательские агенты могут отображать это содержание таким образом, чтобы указывать на наличие ссылки (e.г., по подчеркивая содержание).</p><p> Если заданы атрибуты <samp> name </samp> или <samp> id </samp> элемента <samp> A </samp>, элемент определяет якорь, который может быть пунктом назначения других ссылок.</p><p> Авторы могут установить атрибуты <samp> name </samp> и <samp> href </samp> одновременно в тот же <samp> Экземпляр </samp></p><p> <samp> Элемент LINK </samp> определяет отношение между текущим документом и другой ресурс. Хотя <samp> LINK </samp> не имеет контента, отношения, которые он определяет, могут рендериться некоторыми пользовательскими агентами.</p><h4> 12.1.4 Названия ссылок</h4><p> <samp> атрибут title </samp> может быть установлен как для <samp> A </samp>, так и для <samp> LINK </samp> для добавить информацию о характере ссылки. Эта информация может быть передана пользовательский агент, отображаемый в виде всплывающей подсказки, вызывает изменение изображения курсора и т. д.</p><p> Таким образом, мы можем дополнить предыдущий пример предоставив название для каждой ссылки:</p><pre> <BODY> <em> ... немного текста ... </em> <P> Вы найдете намного больше в <A href = "главе2.HTML» title = "Перейти ко второй главе"> вторая глава </A>. <A href = "./ chapter2.html" title = "Получить вторую главу."> Вторая глава </A>. Смотрите также это <A href = "../ images / forest.gif" title = "GIF-изображение заколдованного леса"> карта заколдованный лес. </A> </ BODY> </pre><h4> 12.1.5 Интернационализация и ссылки</h4><p> Поскольку ссылки могут указывать на документы, закодированные с использованием различных кодировок символов, <samp> A </samp> и <samp> LINK </samp> элементы поддерживают атрибут <samp> charset </samp>.Этот атрибут позволяет авторам консультировать пользовательских агентов по поводу кодировки данных на другом конце ссылки.</p><p> Атрибут <samp> hreflang </samp> предоставляет агентам пользователя информация о языке ресурса в конце ссылки, так же как <samp> Атрибут lang </samp> предоставляет информацию о языке содержимое элемента или значения атрибута.</p><p> Вооруженные этими дополнительными знаниями, пользовательские агенты должны быть в состоянии избежать представление "мусора" пользователю.Вместо этого они могут либо найти ресурсы необходимо для правильного представления документа или, если они не могут найти ресурсы, они должны по крайней мере предупредить пользователя, что документ будет быть нечитаемым и объяснить причину.</p><h3><span class="ez-toc-section" id="_1_2_21_1_2_21_1212_-_A_LINK_Rev_LINK_5_5_-_-_LINK_-_HTML_1213_HTML_IMG_FORM_LINK_A_LINK_A_href_-_-_A_-_HTML_HTML_e_name_id_A_name_href_LINK_LINK_1214_title_A_LINK"> 12,2 <samp> A </samp> элемент </span></h3><p> <em> Начальный тег: <strong> требуется </strong>, Конечный тег: <strong> требуется </strong> </em></p><p> <em> Определения атрибутов </em></p><dl><dt> <samp> name </samp> = <em> cdata </em> [CS]</dt><dd> Этот атрибут называет текущий якорь, чтобы он мог быть пунктом назначения другой ссылки.Значением этого атрибута должно быть уникальное имя привязки. область действия этого имени - текущий документ. Обратите внимание, что этот атрибут разделяет то же пространство имен, что и у атрибута <samp> с идентификатором </samp></dd><dt> <samp> href </samp> = <em> uri </em> [CT]</dt><dd> Этот атрибут указывает местоположение веб-ресурса, таким образом определяя связь между текущим элементом (исходным якорем) и целевым якорем определяется этим атрибутом.</dd><dt> <samp> hreflang </samp> = <em> langcode </em> [CI]</dt><dd> Этот атрибут указывает базовый язык ресурса, обозначенный <samp> href </samp> и может использоваться, только если указано <samp> href </samp>.</dd><dt> <samp> тип </samp> = <em> тип контента </em> [CI]</dt><dd> Этот атрибут дает консультативную подсказку относительно типа контента контента доступны по адресу целевой ссылки. Это позволяет агентам пользователя использовать резервный механизм, а не извлекать контент, если им сообщают, что они получит контент в типе контента, который они не поддерживают.</dd><dd> Авторы, использующие этот атрибут, несут ответственность за управление риском это может стать несовместимым с контентом, доступным в целевой ссылке адрес.</dd><dd> Текущий список зарегистрированных типов контента см. В [MIMETYPES].</dd><dt> <samp> отн. </samp> = <em> типов каналов </em> [CI]</dt><dd> Этот атрибут описывает отношение из текущего документа к якорь, заданный атрибутом <samp> href </samp>. Значение этого атрибута Разделенный пробелами список типов ссылок.</dd><dt> <samp> rev </samp> = <em> типов каналов </em> [CI]</dt><dd> Этот атрибут используется для описания обратной ссылки от якоря, указанного <samp> href </samp> атрибут для текущего документа. значение этого атрибута представляет собой разделенный пробелами список типов ссылок.</dd><dt> <samp> charset </samp> = <em> charset </em> [CI]</dt><dd> Этот атрибут определяет кодировку символов назначенного ресурса по ссылке. Пожалуйста, обратитесь к разделу о характере кодировки для более подробной информации.</dd></dl><p> <em> Атрибуты, определенные в другом месте </em></p><ul><li> <samp> id </samp>, <samp> class </samp> (идентификаторы всего документа)</li><li> <samp> lang </samp> (язык информация), <samp> dir </samp> (текст направление)</li><li> <samp> заголовок </samp> (заголовок элемента)</li><li> <samp> стиль </samp> (встроенный информация о стиле)</li><li> <samp> форма </samp> и <samp> координаты </samp> (изображение карты)</li><li> <samp> onfocus </samp>, <samp> onblur </samp>, <samp> onclick </samp>, <samp> ondblclick </samp>, <samp> onmousedown </samp>, <samp> onmouseup </samp>, <samp> onmouseover </samp>, <samp> onmousemove </samp>, <samp> onmouseout </samp>, <samp> onkeypress </samp>, <samp> onkeydown </samp>, <samp> onkeyup </samp> (внутренние события)</li><li> <samp>, цель </samp> (цель кадр информации)</li><li> <samp> tabindex </samp> (вкладка навигации)</li><li> <samp> accesskey </samp> (ключи доступа)</li></ul><p> каждый <samp> Элемент </samp> определяет якорь</p><ol><li> <samp> Содержимое элемента </samp> определяет положение якоря.</li><li> <samp> Атрибут name </samp> называет якорь так, чтобы он мог быть пунктом назначения ноль или более ссылок (см. также якоря с <samp> id </samp>).</li><li> <samp> Атрибут href </samp> делает эту привязку исходной привязкой ровно одного ссылка на сайт.</li></ol><p> Авторы могут также создать элемент <samp> A </samp>, который не указывает якорей, то есть не указывает <samp> HREF </samp>, <samp> имя </samp> или <samp> идентификатор </samp>. Значения для этих атрибутов могут быть установить позже через скрипты.</p><p> В следующем примере <samp> Элемент </samp> определяет ссылку. Якорь источника текст "W3C Web site" и якорь назначения - "http://www.w3.org/":</p><pre> Для получения дополнительной информации о W3C, пожалуйста, обратитесь к <A href="http://www.w3.org/"> веб-сайт W3C </A>. </pre><p> Эта ссылка обозначает домашнюю страницу Консорциума World Wide Web. Когда Пользователь активирует эту ссылку в пользовательском агенте, пользовательский агент получит ресурс, в данном случае HTML-документ.</p><p> Пользовательские агенты обычно отображают ссылки таким образом, чтобы сделать их очевидно для пользователей (подчеркивание, обратное видео и т. д.). Точный рендеринг зависит от агента пользователя. Рендеринг может варьироваться в зависимости от того, имеет ли пользователь уже посетил ссылку или нет. Возможен визуальный рендеринг предыдущего ссылка может быть:</p><pre> Для получения дополнительной информации о W3C, пожалуйста, посетите веб-сайт W3C. ~~~~~~~~~~~~ </pre><p> Чтобы сообщить пользовательским агентам, что такое кодировка символов целевая страница, установите <samp> кодировка </samp> атрибут:</p><pre> Для получения дополнительной информации о W3C, пожалуйста, обратитесь к <A href = "http: // www.w3.org/ "charset =" ISO-8859-1 "> Веб-сайт W3C </A> </pre><p> Предположим, мы определили якорь с именем «anchor-one» в файле «one.html».</p><pre> <em> ... текст перед якорем ... </em> <A name="anchor-one"> Это место привязки. </A> <em> ... текст после якоря ... </em> </pre><p> Это создает якорь вокруг текста "Это место якоря один. ". Обычно содержимое <samp> A </samp> не отображаются каким-либо особым образом, когда <samp> A </samp> определяет только якорь.</p><p> Определив якорь, мы можем связать его с тем же или другим документ. URI, обозначающие якоря, содержат символ «#», за которым следует имя якоря (фрагмент идентификатор). Вот несколько примеров таких URI:</p><ul><li> Абсолютный URI: http://www.mycompany.com/one.html#anchor-one</li><li> Относительный URI: ./one.html#anchor-one или one.html # anchor-one</li><li> Когда ссылка определена в том же документе: # anchor-one</li></ul><p> Таким образом, ссылка определена в файле «два.html "в том же каталоге, что и «one.html» будет ссылаться на якорь следующим образом:</p><pre> <em> ... текст перед ссылкой ... </em> Для получения дополнительной информации, пожалуйста, обратитесь к <A href="./one.html#anchor-one"> anchor one </A>. <em> ... текст после ссылки ... </em> </pre><p> <samp> Элемент </samp> в следующем примере указывает ссылку (с <samp> href </samp>) и создает именованный якорь (с именем <samp> </samp>) одновременно:</p><pre> Я только что вернулся из отпуска! Вот <A name = "якорь-два" HREF = "HTTP: // WWW.somecompany.com/People/Ian/vacation/family.png "> фотография моей семьи на озере. </A>. </pre><p> Этот пример содержит ссылку на веб-ресурс другого типа (PNG образ). Активация ссылки должна привести к извлечению ресурса изображения из Интернета (и, возможно, отображается, если система была настроена на так).</p><p> <em> <strong> Примечание. </strong> Агенты пользователей должны быть в состоянии найти якоря создан пустыми <samp> A </samp> элементами, но некоторые не в состоянии это сделать. Например, какой-то пользователь агенты могут не найти «пустую привязку» в следующем фрагменте HTML: </em></p><pre> <A name="empty-anchor"> </A> <EM>.... немного HTML ... </ EM> <A href="#empty-anchor"> Ссылка на пустой якорь </A> </pre><h4><span class="ez-toc-section" id="1221"> 12.2.1 Синтаксис якоря имена </span></h4><p> Имя привязки - это значение имени <samp>, </samp> или идентификатора <samp>, </samp>. атрибут при использовании в контексте якорей. Имена якорей должны соблюдать следующие правила:</p><ul><li> <strong> Уникальность: </strong> Имена якорей должны быть уникальный в документе. Имена якорей, которые отличаются только в том случае, если могут не отображаться в том же документе.</li><li> <strong> Строка соответствия: </strong> Сравнений между идентификаторами фрагментов и имена якорей должны быть сделаны точным (с учетом регистра) совпадением.</li></ul><p> Таким образом, следующий пример является верным в отношении соответствия строк и должны рассматриваться как совпадения пользовательскими агентами:</p><pre> <P> <A href="#xxx"> ... </A> <em> ... больше документа ... </em> <P> <A name="xxx"> ... </A> </pre><p> НЕЗАКОННЫЙ ПРИМЕР: <br/> Следующий пример недопустим в отношении уникальности, так как два имени одинаковы за исключением случая:</p><pre> <P> <A name="xxx"> ... </A> <P> <A name="XXX">... </A> </pre><p> Хотя следующий отрывок является допустимым HTML, поведение пользовательского агента не определен; некоторые пользовательские агенты могут (неправильно) считать это совпадением и другие не могут.</p><pre> <P> <A href="#xxx"> ... </A> <em> ... больше документа ... </em> <P> <A name="XXX"> ... </A> </pre><p> Имена якорей должны быть ограничены ASCII персонажи. Пожалуйста, обратитесь к приложению для получения дополнительной информации о не-ASCII символы в URI значения атрибута.</p><h4><span class="ez-toc-section" id="1222"> 12.2.2 Вложенные ссылки являются незаконными </span></h4><p> Ссылки и якоря, определенные <samp> Элемент </samp> не должен быть вложенным; элемент <samp> A </samp> не должно содержать никаких других <samp> A </samp> элементов.</p><p> Поскольку DTD определяет <samp> LINK </samp> элемент должен быть пустым, <samp> LINK </samp> элементы также не могут быть вложенными.</p><h4><span class="ez-toc-section" id="1223_ID"> 12.2.3 Якоря с <samp> ID </samp> Атрибут </span></h4><p> <samp> Атрибут id </samp> может использоваться для создания привязки в начале тега любого элемент (включая элемент <samp> A </samp>).</p><p> Этот пример иллюстрирует использование атрибута <samp> id </samp> для позиционирования якоря в <samp> х3 </samp> элемент. Якорь связан с через <samp> A </samp> элемент.</p><pre> Подробнее об этом вы можете прочитать в <A href="#section2"> втором разделе </A>. <em> ... позже в документе </em> <h3><span class="ez-toc-section" id="_A_APPLET_FORM_IFRAME_IMG_MAP_HTML_-_DTD_HTML_D_xfc_rst_name_D_uuml_rst_ID_ID_ID_id_name_1224_-_123_LINK"> Раздел второй </ h3> <em> ... позже в документе </em> <P> См. <A href="#section2"> второй раздел </A> выше. Больше подробностей. </pre><p> В следующем примере указывается якорь назначения с идентификатором <samp> </samp> атрибут:</p><pre> Я только что вернулся из отпуска! Вот <A> фотография моей семьи на озере.</A>. </pre><p> <samp> идентификаторы </samp> и <samp> имя </samp> атрибуты имеют одинаковые пространство имен. Это означает, что они не могут оба определить якорь с тем же именем в том же документе. Допустимо используйте оба атрибута, чтобы указать уникальный идентификатор элемента для следующего элементы: <samp> A </samp>, <samp> APPLET </samp>, <samp> FORM </samp>, <samp> РАМА </samp>, <samp> IFRAME </samp>, <samp> IMG </samp> и <samp> MAP </samp>. когда оба атрибута используются в одном элементе, их значения должны быть идентичны.</p><p> НЕЗАКОННЫЙ ПРИМЕР: <br/> Следующий отрывок является недопустимым HTML, так как эти атрибуты объявляют имя дважды в одном документе.</p><pre> <A href="#a1"> ... </A> ... <H2> <em> ... страниц и страниц ... </em> <A name="a1"> </A> </pre><p> Следующий пример иллюстрирует, что <samp> с идентификатором </samp> и <samp> с именем </samp> должен быть одинаковым, когда оба появляются в начальном теге элемента:</p><pre> <P> <A name="a1" href="#a1"> ... </A> </pre><p> Из-за своей спецификации в DTD HTML, имя <samp> </samp> атрибут может содержать ссылки на символы.Таким образом, значение D & # xfc; rst является действительный <samp> Значение атрибута name </samp>, как и D & uuml; rst. <samp> ID </samp> атрибут, с другой стороны, не может содержать символьные ссылки.</p><p> <em> <strong> Использовать <samp> ID </samp> или <samp> имя </samp>? </strong> Авторы должны учитывать следующее проблемы при принятии решения, использовать ли <samp> ID </samp> или <samp> имя </samp> для имени якоря: </em></p><ul><li> <em> <samp> Атрибут id </samp> может выступать не только как имя привязки (например,г., стиль селектор листа, идентификатор обработки и т. д.). </em></li><li> <em> Некоторые старые пользовательские агенты не поддерживают якоря, созданные с идентификатором <samp> </samp> атрибут. </em></li><li> <em> Атрибут <samp> name </samp> позволяет использовать более богатые имена привязок (с объектами). </em></li></ul><h4> 12.2.4 Недоступно и неидентифицируемые ресурсы</h4><p> Ссылка на недоступный или неидентифицируемый ресурс является ошибкой. Хотя пользовательские агенты могут по-разному реагировать на такую ошибку, мы рекомендуем следующее поведение:</p><ul><li> Если пользовательский агент не может найти связанный ресурс, он должен предупредить пользователь.</li><li> Если пользовательский агент не может определить тип связанного ресурса, он должен все еще пытаюсь обработать это. Это должно предупредить пользователя и может позволить пользователю вмешаться и определить тип документа.</li></ul><h3><span class="ez-toc-section" id="_A_APPLET_FORM_IFRAME_IMG_MAP_HTML_-_DTD_HTML_D_xfc_rst_name_D_uuml_rst_ID_ID_ID_id_name_1224_-_123_LINK"> 12.3 Документные отношения: <samp> LINK </samp> элемент </span></h3><p> <em> Начальный тег: <strong> требуется </strong>, Конечный тег: <strong> запрещено </strong> </em></p><p> <em> Атрибуты, определенные в другом месте </em></p><ul><li> <samp> id </samp>, <samp> class </samp> (идентификаторы всего документа)</li><li> <samp> lang </samp> (язык информация), <samp> dir </samp> (текст направление)</li><li> <samp> заголовок </samp> (заголовок элемента)</li><li> <samp> стиль </samp> (встроенный информация о стиле)</li><li> <samp> onclick </samp>, <samp> ondblclick </samp>, <samp> onmousedown </samp>, <samp> onmouseup </samp>, <samp> onmouseover </samp>, <samp> onmousemove </samp>, <samp> onmouseout </samp>, <samp> onkeypress </samp>, <samp> onkeydown </samp>, <samp> onkeyup </samp> (внутренние события)</li><li> <samp> href </samp>, <samp> hreflang </samp>, <samp> тип </samp>, <samp> отн. </samp>, <samp> рев </samp> (ссылки и якоря)</li><li> <samp>, цель </samp> (цель кадр информации)</li><li> <samp> медиа </samp> (заголовок информация о стиле)</li><li> <samp> кодировка </samp> (символ кодировки)</li></ul><p> Этот элемент определяет ссылку.В отличие от <samp> A </samp>, он может появиться только в <samp> HEAD </samp> раздел документа, хотя он может появляться любое количество раз. Хотя <samp> ССЫЛКА </samp> не имеет контента, он передает информацию об отношениях, которая может быть предоставлена пользовательские агенты различными способами (например, панель инструментов с раскрывающимся меню ссылки).</p><p> Этот пример иллюстрирует, как несколько определений <samp> LINK </samp> могут появляться в <samp> HEAD </samp> раздел документа. Текущий документ "Глава2.html ". <samp> отн. </samp> Атрибут определяет связь связанного документа с текущим документ. Значения «Index», «Next» и «Prev» описаны в разделе на типах ссылок.</p><pre> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "Http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> Глава 2 </ TITLE> <LINK rel = "Index" href = "../ index.html"> <LINK rel = "Next" href = "Chapter3.html"> <LINK rel = "Prev" href = "Chapter1.HTML "> </ HEAD> <em> ... остальная часть документа ... </em> </pre><h4><span class="ez-toc-section" id="1231"> 12.3.1 Прямая и обратная связь </span></h4><p> <samp> атрибуты rel </samp> и <samp> rev </samp> играют дополнительные роли - <samp> rel </samp> атрибут указывает прямую ссылку, а атрибут <samp> rev </samp> указывает обратную ссылка на сайт.</p><p> Рассмотрим два документа A и B.</p><pre> Документ A: <LINK href = "docB" rel = "foo"> </pre><p> Имеет то же значение, что и</p><pre> Документ B: <LINK href = "docA" rev = "foo"> </pre><p> Оба атрибута могут быть указаны одновременно.</p><h4><span class="ez-toc-section" id="1232"> 12.3.2 Ссылки и внешние таблицы стилей </span></h4><p> Когда <samp> Элемент LINK </samp> связывает внешнюю таблицу стилей с документом <samp> атрибут type </samp> определяет язык таблицы стилей, а <samp> атрибут media </samp> указывает предполагаемый носитель визуализации или носитель. Пользовательские агенты могут сэкономить время, извлекая из сети только те стили листы, которые относятся к текущему устройству.</p><p> Типы носителей информации обсуждается в разделе о таблицах стилей.</p><h4><span class="ez-toc-section" id="1233"> 12.3.3 Ссылки и поисковые системы </span></h4><p> Авторы могут использовать элемент <samp> LINK </samp> для предоставления разнообразной информации поисковые системы, в том числе:</p><ul><li> Ссылки на альтернативные версии документа, написанного другим человеком язык.</li><li> Ссылки на альтернативные версии документа, предназначенного для разных носителей, например, версия, особенно подходящая для печати.</li><li> Ссылки на стартовую страницу коллекции документов.</li></ul><p> Приведенные ниже примеры иллюстрируют, как языковая информация, типы носителей и Типы ссылок могут быть объединены для улучшения обработки документов поисковыми системами.</p><p> В следующем примере мы используем атрибут <samp> hreflang </samp>, чтобы указать поиск движки, где можно найти версии документа на голландском, португальском и арабском языках. Обратите внимание на использование атрибута <samp> charset </samp> для руководства на арабском языке. Обратите внимание также на использование <samp> атрибут lang </samp> для указания того, что значение заголовка <samp> равно </samp> Атрибут для элемента <samp> LINK </samp>, обозначающий французское руководство, на французском языке.</p><pre> <HEAD> <TITLE> Руководство на английском языке </ TITLE> <LINK title = "Руководство на голландском языке" тип = "текст / html" отн = «альтернативный» hreflang = "п" HREF = "HTTP: // где-то.ком / ручной / dutch.html "> <LINK title = "Руководство на португальском языке" тип = "текст / html" отн = «альтернативный» hreflang = "пт" HREF = "http://someplace.com/manual/portuguese.html"> <LINK title = "Руководство на арабском языке" тип = "текст / html" отн = «альтернативный» кодировка = "ISO-8859-6" hreflang = "ар" HREF = "http://someplace.com/manual/arabic.html"> <LINK lang = "fr" title = "Документация La Fran & Ccedil; ais" тип = "текст / html" отн = «альтернативный» hreflang = "пт" HREF = "HTTP: // где-то.ком / ручной / french.html "> </ HEAD> </pre><p> В следующем примере мы сообщаем поисковым системам, где найти напечатанную версия руководства.</p><pre> <HEAD> <TITLE> Справочное руководство </ TITLE> <LINK media = "print" title = "Руководство в постскриптуме" тип = «приложения / постскриптум» отн = «альтернативный» HREF = "http://someplace.com/manual/postscript.ps"> </ HEAD> </pre><p> В следующем примере мы сообщаем поисковым системам, где найти фронт страница сборника документов.</p><pre> <HEAD> <TITLE> Справочное руководство - Страница 5 </ TITLE> <LINK rel = "Start" title = "Первая страница руководства" тип = "текст / html" HREF = "http://someplace.com/manual/start.html"> </ HEAD> </pre><p> Дополнительная информация приведена в примечаниях к приложению о том, как помочь поисковым системам проиндексировать вашу сеть. сайт.</p><h3><span class="ez-toc-section" id="124"> 12.4 Информация о пути: элемент </span></h3> BASE <samp> </samp><pre> <! ELEMENT <samp> BASE </samp> - O EMPTY - URI базы документов -> <! ATTLIST BASE <samp> HREF </samp>% URI; #REQUIRED - URI, который действует как базовый URI - > </pre><p> <em> Начальный тег: <strong> требуется </strong>, Конечный тег: <strong> запрещено </strong> </em></p><p> <em> Определения атрибутов </em></p><dl><dt> <samp> href </samp> = <em> uri </em> [CT]</dt><dd> Этот атрибут указывает абсолютный URI, который действует как базовый URI для разрешение относительных URI.</dd></dl><p> <em> Атрибуты, определенные в другом месте </em></p><p> В HTML ссылки и ссылки на внешние изображения, апплеты, обработка форм программы, таблицы стилей и т. д. всегда указываются с помощью URI. Относительные URI разрешается в соответствии с базовым URI, который может исходить из разных источников. Элемент <samp> BASE </samp> позволяет авторам явно указывать базовый URI документа.</p><p> При наличии элемент <samp> BASE </samp> должен появляться в заголовке <samp> </samp> раздел документа HTML, перед любым элементом, который ссылается на внешний источник.Информация о пути, указанная элементом <samp> BASE </samp>, влияет только на URI в документ, в котором появляется элемент.</p><p> Например, с учетом следующей декларации <samp> BASE </samp> и <samp> A </samp> декларация:</p><pre> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "Http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <НАЗВАНИЕ> Наши продукты </ TITLE> <BASE href = "http://www.aviary.com/products/intro.html"> </ HEAD> <BODY> <P> Вы видели нашего <A href = "../cages/birds.gif"> Клетки для птиц </A>? </ BODY> </ HTML> </pre><p> относительный URI "../cages/birds.gif" будет преобразован в:</p><pre> http://www.aviary.com/cages/birds.gif </pre><h4><span class="ez-toc-section" id="1241_URI"> 12.4.1 Разрешение относительных URI </span></h4><p> Агенты пользователей должны вычислять базовый URI для разрешения относительных URI согласно [RFC1808], раздел 3. Далее описывается, как [RFC1808] относится конкретно к HTML.</p><p> Пользовательские агенты должны рассчитать базовый URI в соответствии со следующим приоритеты (от наивысшего приоритета к наименьшему):</p><ol><li> Базовый URI устанавливается <samp> БАЗА </samp> элемент.</li><li> Базовый URI задается метаданными, обнаруженными во время протокола взаимодействие, такое как заголовок HTTP (см. [RFC2616]).</li><li> По умолчанию базовый URI соответствует текущему документу. Не весь HTML документы имеют базовый URI (например, допустимый HTML-документ может появиться в электронном письме и не может быть обозначен URI). Такие HTML документы считаются ошибочным, если они содержат относительные URI и полагаются на базовый URI по умолчанию.</li></ol><p> Кроме того, элементы <samp> OBJECT </samp> и <samp> APPLET </samp> определяют атрибуты, которые имеет приоритет над значением, установленным элементом <samp> BASE </samp>.Пожалуйста, обратитесь к определения этих элементов для получения дополнительной информации о проблемах URI, специфичных для их.</p><p> <em> <strong> Примечание. </strong> Для версий HTTP, которые определяют заголовок Link, пользовательские агенты должны обрабатывать эти заголовки точно так же, как <samp> LINK </samp> элементы в документе. HTTP 1.1, как определено в [RFC2616], не включить поле заголовка ссылки (см. раздел 19.6.3). </em></p> ,<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/link-rel-html-atribut-rel-htmlbook-ru.html" data-text="Link rel html: Атрибут rel | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/html/html-yavlyaetsya-kak-sdelat-chtoby-sloj-czelikom-byl-ssylkoj.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Html является: Как сделать, чтобы слой целиком был ссылкой?</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/opredelit-vozrast-domena-chto-takoe-takoe-na-chto-vliyaet-i-kak-opredelit-vozrast-sajta.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Определить возраст домена: что такое такое, на что влияет и как определить возраст сайта?</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/link-rel-html-atribut-rel-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='5948' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_ca3399b8ed5fa5e2a9311001330639f4.js"></script></body></html>