| Следующая версия | Предыдущая версия |
| software:development:ps_pycharm:html5:link [2023/08/16 23:55] – создано vladpolskiy | software:development:ps_pycharm:html5:link [Дата неизвестна] (текущий) – удалено - внешнее изменение (Дата неизвестна) 127.0.0.1 |
|---|
| ====== <link> ====== | |
| Элемент HTML - Ссылка на Внешний Ресурс (<link>) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на [[software:development:ps_pycharm:html5:glossary:css|stylesheets]], а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего. | |
| |
| |
| |
| |
| {{tablelayout?colwidth="200px"}} | |
| ^ Категории контента ^ Контент метаданных. Если есть [[software:development:ps_pycharm:html5:global_attributes|itemprop]] : [[software:development:ps_pycharm:html5:content_categories|потоковый контент]] и [[software:development:ps_pycharm:html5:content_categories|фразовый контент]]. ^ | |
| |Допустимое содержимое| Нет, это [[software:development:ps_pycharm:html5:void_element|пустой элемент]].| | |
| |Пропуск тегов| Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.| | |
| |Допустимые родители| Любой элемент, принимающий элементы метаданных. Если есть itemprop (en-US): любой элемент, принимающий фразовый контент.| | |
| |Допустимые ARIA-роли| Нет| | |
| |DOM-интерфейс| HTMLLinkElement| | |
| |
| ===== Пример ===== | |
| |
| <WRAP center round tip> | |
| <link href="/media/examples/link-element-example.css" rel="stylesheet" /> | |
| |
| <p>This text will be red as defined in the external stylesheet.</p> | |
| <p style="color: blue">The <code>style</code> attribute can override it, though.</p> | |
| </WRAP> | |
| |
| |
| <code php> | |
| <link href="/media/examples/link-element-example.css" rel="stylesheet" /> | |
| |
| <p>This text will be red as defined in the external stylesheet.</p> | |
| <p style="color: blue">The <code>style</code> attribute can override it, though.</p> | |
| </code> | |
| {{:software:development:ps_pycharm:html5:link_7.png?|}} | |
| \\ | |
| Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего <head> следующим образом: | |
| | |
| ===== Атрибуты ===== | |
| К этому элементу применимы .[[software:development:ps_pycharm:html5:global_attributes|глобальные атрибуты]] | |
| |
| <color #00a2e8>profile</color> | |
| \\ | |
| URI одного или более профилей метаданных, разделённых пробелами. | |
| |
| ==== Пример ==== | |
| <code html> | |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Заголовок страницы</title> | |
| </head> | |
| </html> | |
| </code> | |
| |
| ==== Примечание ==== | |
| HTML5-совместимые браузеры автоматически создают элемент [[software:development:ps_pycharm:html5:<head>|]], если его теги пропущены в разметке | |
| |
| |
| [[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]] | |
