====== ====== Элемент HTML - Ссылка на Внешний Ресурс () определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на [[software:development:ps_pycharm:html5:glossary:css|stylesheets]], а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего. {{tablelayout?colwidth="200px"}} ^ Категории контента ^ Контент метаданных. Если есть [[software:development:ps_pycharm:html5:attribute:global_attributes|itemprop]] : [[software:development:ps_pycharm:html5:content_categories#потоковый контент]] и [[software:development:ps_pycharm:html5:content_categories#фразовый контент]]. ^ |Допустимое содержимое| Нет, это [[software:development:ps_pycharm:html5:glossary:void_element|пустой элемент]].| |Пропуск тегов| Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.| |Допустимые родители| Любой элемент, принимающий элементы метаданных. Если есть itemprop: любой элемент, принимающий фразовый контент.| |Допустимые ARIA-роли| Нет| |DOM-интерфейс| [[software:development:ps_pycharm:api:HTMLLinkElement|HTMLLinkElement]]| ===== Пример =====

This text will be red as defined in the external stylesheet.

The style attribute can override it, though.

 \\ {{:software:development:ps_pycharm:html5:link_7.png?|}} \\ Чтобы подключить таблицу стилей, вы должны включить элемент внутри вашего [[software:development:ps_pycharm:html5:|]] следующим образом: \\ В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet. rel означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике [[software:development:ps_pycharm:html5:rel|типы ссылок]], есть много различных видов отношений. Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок: \\ Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например: \\ \\ Атрибут **sizes** определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку. Вы можете, также, указать медиа тип или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если **media** состояние равно true. Например: \\ В элемент также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру: \\ \\ Значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" (en-US) для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS. Другие замечания по использованию: * Элемент может присутствовать в элементах [[software:development:ps_pycharm:html5:element:|]] или [[software:development:ps_pycharm:html5:element:|]], в зависимости от того, имеет ли он [[https://html.spec.whatwg.org/multipage/links.html#body-ok|тип ссылки]], являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши от содержимого body, помещая их в . * При использовании для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива заголовка Content-Security-Policy не препятствует доступу к ней. * Спецификации HTML и XHTML определяют обработчики событий для элемента , но не указывают как они будут использоваться. * В XHTML 1.0, пустые элементы, такие как , требуют слеш: . * WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов. ===== Атрибуты ===== К этому элементу применимы .[[software:development:ps_pycharm:html5:global_attributes|глобальные атрибуты]] profile \\ URI одного или более профилей метаданных, разделённых пробелами. ==== Пример ==== Заголовок страницы ==== Примечание ==== HTML5-совместимые браузеры автоматически создают элемент [[software:development:ps_pycharm:html5:|]], если его теги пропущены в разметке [[https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable|MDN Understanding WCAG, Guideline 3.1 explanations ]] \\ [[https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html|Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0]]