Укажите атрибут тэга a который задает путь к файлу
Перейти к содержимому

Укажите атрибут тэга a который задает путь к файлу

  • автор:

Укажите атрибут тэга a который задает путь к файлу

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

Атрибуты

accesskey Активация ссылки с помощью комбинации клавиш. coords Устанавливает координаты активной области. download Предлагает скачать указанный по ссылке файл. href Задает адрес документа, на который следует перейти. hreflang Идентифицирует язык текста по ссылке. name Устанавливает имя якоря внутри документа. rel Отношения между ссылаемым и текущим документами. rev Отношения между текущим и ссылаемым документами. shape Задает форму активной области ссылки для изображений. tabindex Определяет последовательность перехода между ссылками при нажатии на кнопку Tab . target Имя окна или фрейма, куда браузер будет загружать документ. title Добавляет всплывающую подсказку к тексту ссылки. type Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

    Тег А  

Посмотрите на мою фотографию!

Как сделать такое же фото?

HTML тег

  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5
  • html5

Гиперссылки (или просто «ссылки») определяются тегом (HTML Anchor Element).

Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.

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

Тег Chrome

Firefox Opera Safari IExplorer Edge
Да Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
charset char_encoding Не поддерживается в HTML5.
Определяет кодировку, связанного документа.
coords coordinates Не поддерживается в HTML5.
Определяет координаты ссылки.
download filename Если атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки.
href URL Задает URL страницы, или документа на которую ведёт ссылка.
hreflang language_code Определяет язык связанного документа на который ведёт ссылка.
media media_query Указывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств.
name section_name Не поддерживается в HTML5.
Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id.
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
rev text Не поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
shape default
rect
circle
poly
Не поддерживается в HTML5.
Определяет форму ссылки (использовался с атрибутом coords ). Используйте вместо данного тега элемент .
target _blank
_parent
_self
_top
framename
Указывает, где открыть документ.
type media_type Указывает MIME-тип документа на который осуществляется переход.

Пример использования

   Пример размещения ссылки в HTML документе   href = "http://www.yandex.ru">Найдется всё  

В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.

Атрибут href (аббревиатура от hyper reference) — это основной атрибут тега , указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.

Относительные и абсолютные пути ссылок

В приведенном выше примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:

href = «https://www.yandex.ru»>Содержимое элемента href = «http://www.yandex.ru»>Содержимое элемента href = «//www.yandex.ru»>Содержимое элемента

Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).

Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок. Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.

Путь относительно текущего документа

Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла.

подключение файлов к HTML документу из той же папки

Пример подключения файлов:

   Пример подключения файлов к HTML документу из той же папки   src = "image.png" alt = "someimage info">  href = "page.html">Содержимое элемента  

Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:

подключение файлов из дочернего каталога

   Пример подключения файлов из дочернего каталога   src = "etc/image.png" alt = "someimage info">  href = "etc/page.html">Содержимое элемента  

Обратите внимание, как мы указываем путь к нашим файлам — мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).

Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:

подключение файлов из родительского каталога

   Пример подключения файлов из родительского каталога   src = "../../image.png" alt = "someimage info">  href = "../page.html">Содержимое элемента  

Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы ../ это позволит подняться на один уровень вверх. Вы можете, используя символы ../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.

Путь относительно корня сайта

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

Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой.

Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:

подключение файлов относительно корня сайта

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

   Пример подключения файлов относительно корня сайта   src = "/html/primer/anyimage.png" alt = "someimage info">  href = "/html/primer/anypage.html">Содержимое элемента  src = "/css/primer/anyimage.png" alt = "someimage info">  href = "/css/primer/anypage.html">Содержимое элемента  

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

Атрибут target

Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:

 href="http://yandex.ru" target="_blank">Поиск 

Ниже представлены все значения этого атрибута:

Атрибут Значение
_blank Загружает страницу в новое окно браузера.
_self Загружает страницу в текущее окно. Это значение по умолчанию.
_parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
framename Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

Атрибут mailto

Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:

 href = "mailto:smbd@some.com">Написать автору 

Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.

В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:

 href = "mailto:mail_1@some.com?subject=Тема%20моего%20письма&cc=mail2@some.com&body= Здравствуй%20уважаемый%20автор">Написать автору 
  • subject —тема письма.
  • cc —копия письма.
  • bcc —скрытая копия письма.
  • body —тело письма.

Допустимо указывать несколько адресов (либо не указывать вовсе):

 href=" mailto:mail_1@some.com, mailto:mail_2@some.com ">Написать автору 

Изображение как ссылка

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

   Использование изображения в качестве ссылки  href = "http://yandex.ru"> src="10.jpg" alt="Поиск в Яндекс">   

При этом при клике на картинку будет осуществлён переход по указанной ссылке:

Поиск

Размещение файлов на сайте для скачивания

html5

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

   Пример использования атрибута download   href = "/path/to/file.mp3" download>Любимая песня  

Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:

Тег Chrome

Firefox Opera Safari IExplorer Edge
download html5 14.0 20.0 15.0 10.1 Нет 13.0

Если использовать только HTML, то единственный вариант, который позволит посетителям скачать, а не открыть, с вашего сайта, например, текстовый файл, это поместить его предварительно в архив (заархивировать файл). Алгоритм работы любого браузера такой, что если он не может открыть файл (не поддерживает формат), то он предлагает скачать / скачивает файл.

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент мог быть как гиперссылкой, так и якорем, а в HTML5 элемент всегда гиперссылка (в случае отсутствия атрибута href является контейнером для гиперссылки). В HTML5 добавлено два новых атрибута и пять удалено.

Значение CSS по умолчанию

a:link, a:visited  color: (internal value); text-decoration: underline; cursor: auto; > a:link:active, a:visited:active  color: (internal value); > 

Тег в HTML

Тег в html дает возможность использовать переход по гиперссылкам. Пользователь, щелкнув кнопкой мышки на активной области ссылки, которой может быть текст (обычно подчеркнутый и синего цвета) или изображение, переходит в другое место страницы или к другому документу интернет.

Форма записи следующая:

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

Следует иметь в виду, что применение стилей CSS создает разнообразие вариантов оформления ссылок. Оно, например, дает возможность ввести зависимость вида ссылки от ее состояния, использовать самые различные виды кнопок, а также поменять внешний вид курсора при наведении.

href

Атрибут href используется для ссылки на другую страницу сайта или место в документе.

URL – адрес нужного документа, который может быть относительным или абсолютным.

Относительный адрес может использоваться, когда документ находится на том же сервере – это указание пути от главного документа сайта. Если нужный документ или файл находится в той же папке, то можно не указывать полный путь к нему, а указать только его имя:

Если документ находится во вложенной папке указывается относительный путь к этой папке от главного документа:

Также в href может быть указать скрипт js, например, href=”javascript:alert(‘Hello’);”.

name

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

где anchor – это уникальное имя якоря.

В ссылке, которая будет вести на эту закладку нужно указать следующий адрес:

Анкор

то есть название якоря с символом # перед ним.

mailto

У атрибута href есть возможность указания почтового ящика.

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

tel

С помощью tel можно указать номер телефона и при нажатии на ссылку начнется дозвон по нему. Это очень удобно на мобильных телефонах и фактически стало стандартном для мобильной верстки.

download

При указании атрибута download не происходит переход по ссылке, а появляется предложение скачать файл. Пример:

target

Определяет тип окна или фрейма, в котором будет открыт документ или файл.

  • _blank – новое окно;
  • _self – текущее окно;
  • _parent – родительский фрейм;
  • _top – отмена всех фреймов и загрузка в полном окне;
  • framename – указанный фрейм.

В случае отсутствия фреймов значения _parent и _top работают как _self . Значение по умолчанию – _self .

Синтаксис: – откроет страницу в новом окне.

title

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

tabindex

Порядок перехода между ссылками при нажатии на кнопку Tab. Перемещение между ссылками происходит по нарастанию чисел. По умолчанию выключен.

rel

указание на то, чем является документ по ссылке текущему.

У rel много значений. Приведем лишь некоторые:

  • author – ссылка на страницу об авторе;
  • bookmark – постоянная ссылка на раздел или запись;
  • contact – контактная информация;
  • details – страница с деталями;
  • index – содержание;
  • license – страница с лицензионным соглашением или авторскими правами;
  • nofollow – не передавать по ссылке вес.

Больше значений можно найти здесь.

Кнопка как ссылка

Делать кнопку ссылкой нежелательно в силу того, что кнопка по своему предназначению инициирует действие, а не переход на другой ресурс. Но если нужно, можно такое сделать. В этом случае используем событие onclick. На примере ниже при нажатии на кнопку произойдет переход на страницу page.html.

Стилизация

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

  • первая ссылка зеленого цвета с красным подчеркиванием при наведении;
  • вторая – при наведении подчеркивание в виде прерывистой линии;
  • третья – стилизована под кнопку.

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

: Элемент — ссылка на внешний ресурс

Элемент HTML — Ссылка на Внешний Ресурс ( ) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

Интерактивный пример

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

link href="main.css" rel="stylesheet" /> 

В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet . rel означает «отношения (relationship)», и, вероятно, является одной из ключевых особенностей элемента — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок (en-US) , есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

link rel="icon" href="favicon.ico" /> 

Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:

link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" /> 

Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

Вы можете, также, указать медиа тип или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:

link href="print.css" rel="stylesheet" media="print" /> link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" /> 

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

link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> 

Значение rel — preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel=»preload» (en-US) для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS.

Другие замечания по использованию:

  • Элемент может присутствовать в элементах или , в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши от содержимого body, помещая их в .
  • При использовании для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива (en-US) заголовка Content-Security-Policy (en-US) не препятствует доступу к ней.
  • Спецификации HTML и XHTML определяют обработчики событий для элемента , но не указывают как они будут использоваться.
  • В XHTML 1.0, пустые элементы, такие как , требуют слеш: .
  • WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

Этот атрибут используется только для элементов с атрибутом rel=»preload» или rel=»prefetch» . Он указывает тип контента, загружаемого , который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.

Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе не искажая их. Допустимы значения:

Cross-origin запрос (т.е. с HTTP-заголовком Origin ) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка Access-Control-Allow-Origin ), изображение будет искажено, а его использование ограничено.

Cross-origin запрос (т.е. с HTTP-заголовком Origin ) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials (en-US) ), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка Origin) , предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите CORS settings attributes.

Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.

Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты href .

Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения: auto : указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов. high : указывает браузеру, что ресурс находится в высоком приоритете. low : указывает браузеру, что ресурс находится в низком приоритете.

**Примечание:**Атрибут importance можно использовать только для элементов с атрибутами rel=»preload» или rel=»prefetch» .

integrity Экспериментальная возможность

Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity (en-US) .

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

Примечание:

  • В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print , screen , aural , braille . HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
  • Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.

referrerpolicy Экспериментальная возможность

Строка, указывающая какой реферер использовать при загрузки ресурсов:

  • no-referrer означает, что заголовок Referer не будет отправлен.
  • no-referrer-when-downgrade означает, что заголовок Referer не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
  • origin означает, что реферером будет источник, который соответствует схеме, хосту и порту.
  • origin-when-cross-origin означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
  • unsafe-url означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.

Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки (en-US) .

Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если rel содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:

  • any , означает, что иконка может быть масштабируема до любого размера, например в векторном формате image/svg+xml .
  • пробелоразделенный список размеров, каждый в формате x или X . Каждый из этих размеров должен содержаться в ресурсе.

**Примечание:**Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.

Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок rel=»preload» , чтобы браузер загружал только те типы файлов, которые он поддерживает.

Нестандартные атрибуты

disabled Non-standard

Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.

**Примечание:**Хотя в стандарте HTML нет атрибута disabled , атрибут disabled есть в объекте DOM HTMLLinkElement .

methods Non-standard

Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту title) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.

prefetch Non-standard Secure context

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

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

Устаревшие атрибуты

Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию iso-8859-1 .

Примечание: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок Content-Type на связываемый ресурс.

Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом href . Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel . Значения типов ссылки (en-US) для атрибута аналогичны возможным значениям для rel .

Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит. Примечание: Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки (en-US) . Например, чтобы установить обратную ссылку для made , укажите author .Также, этот атрибут не означает «ревизия» и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

Стилизация с CSS

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

Примеры

Включение таблицы стилей

Включение таблицы стилей на страницы имеет следующий синтаксис:

link href="style.css" rel="stylesheet" /> 

Предоставление альтернативных таблиц стилей

Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

link href="default.css" rel="stylesheet" title="Default Style" /> link href="fancy.css" rel="alternate stylesheet" title="Fancy" /> link href="basic.css" rel="alternate stylesheet" title="Basic" /> 

Предоставление иконок для различных контекстов использования

Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel и sizes как подсказки.

link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png" /> link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png" /> link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" /> link rel="apple-touch-icon-precomposed" href="favicon57.png" /> link rel="icon" href="favicon32.png" /> 

Условная загрузка ресурсов с медиавыражениями

Вы можете предоставить тип медиа или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:

link href="print.css" rel="stylesheet" media="print" /> link href="mobile.css" rel="stylesheet" media="all" /> link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)" /> link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)" /> 

События загрузки таблицы стилей

Вы можете определить, когда таблица стилей была загружена, наблюдая за событием load , запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error :

script> var myStylesheet = document.querySelector("#my-stylesheet"); myStylesheet.onload = function ()  // Do something interesting; the sheet has been loaded >; myStylesheet.onerror = function ()  console.log("An error occurred loading the stylesheet!"); >; script> link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" /> 

Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.

Preload примеры

Техническое резюме

Каталоги контента Контент метаданных. Если есть itemprop (en-US) : потоковый контент и фразовый контент.
Допустимое содержимое Нет, это empty element.
Пропуск тегов Так как это пустой элемент, присутствовать должен начальный тэг, конечный — отсутствует.
Допустимые родители Любой элемент, принимающий элементы метаданных. Если есть itemprop (en-US) : любой элемент, принимающий фразовый контент.
Допустимые ARIA-роли Нет
DOM-интерфейс HTMLLinkElement

Спецификации

Specification
HTML Standard
# the-link-element

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

BCD tables only load in the browser

Смотрите также

  • Link (en-US) HTTP header
  • Ryan Grove’s and node event compatibility chart

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *