book51.ru

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== <link> ======
Элемент HTML - Ссылка на Внешний Ресурс (<link>) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на [[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]]|

===== Пример =====
  
<file html myexample.html>
<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>
</file>

\\  
{{:software:development:ps_pycharm:html5:link_7.png?|}} 
\\  
Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего [[software:development:ps_pycharm:html5:<head>|<head>]] следующим образом:
<code html>
<link href="main.css" rel="stylesheet" />
</code>	
\\  
В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet. rel означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <link> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике [[software:development:ps_pycharm:html5:rel|типы ссылок]], есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
<code html>
<link rel="icon" href="favicon.ico" />
</code>	
\\  
Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:
\\  
<code html>
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />
</code>
\\  
Атрибут **sizes** определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

Вы можете, также, указать медиа тип или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если **media** состояние равно true. Например:	
<code html>
<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />
</code>
\\  
В элемент <link> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:
\\  
<code html>
<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />
</code>
\\  
Значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" (en-US) для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS.

Другие замечания по использованию:
  * Элемент <link> может присутствовать в элементах [[software:development:ps_pycharm:html5:element:<head>|]] или [[software:development:ps_pycharm:html5:element:<body>|]], в зависимости от того, имеет ли он [[https://html.spec.whatwg.org/multipage/links.html#body-ok|тип ссылки]], являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, <link rel="stylesheet"> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link> от содержимого body, помещая их в <head>.
  * При использовании <link> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива  заголовка Content-Security-Policy  не препятствует доступу к ней.
  * Спецификации HTML и XHTML определяют обработчики событий для элемента <link>, но не указывают как они будут использоваться.
  * В XHTML 1.0, пустые элементы, такие как <link>, требуют слеш: <link />.
  * WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.
===== Атрибуты =====
К этому элементу применимы .[[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]]