Различия

Показаны различия между двумя версиями страницы.

--- software:development:ps_pycharm:html5:link [2023/08/17 13:39] – [Пример] vladpolskiy
+++ software:development:ps_pycharm:html5:link [Дата неизвестна] (текущий) – удалено - внешнее изменение (Дата неизвестна) 127.0.0.1
@@ Строка 1: / Строка 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|
-===== Пример =====
-<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.
-Другие замечания по использованию:
-===== Атрибуты =====
-К этому элементу применимы .[[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]]