From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../html/drag_and_drop/drag_operations/index.html | 314 ----------------- files/ru/web/guide/html/drag_and_drop/index.html | 72 ---- .../html/html5/constraint_validation/index.html | 343 +++++++++++++++++++ files/ru/web/guide/html/html5/index.html | 171 ++++++++++ .../html/html5/introduction_to_html5/index.html | 26 ++ .../index.html | 375 --------------------- .../index.html | 204 ----------- .../guide/html/using_data_attributes/index.html | 129 ------- .../using_html_sections_and_outlines/index.html | 375 +++++++++++++++++++++ .../index.html" | 149 -------- 10 files changed, 915 insertions(+), 1243 deletions(-) delete mode 100644 files/ru/web/guide/html/drag_and_drop/drag_operations/index.html delete mode 100644 files/ru/web/guide/html/drag_and_drop/index.html create mode 100644 files/ru/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/ru/web/guide/html/html5/index.html create mode 100644 files/ru/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html delete mode 100644 files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html delete mode 100644 files/ru/web/guide/html/using_data_attributes/index.html create mode 100644 files/ru/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 "files/ru/web/guide/html/\321\204\320\276\321\200\320\274\321\213_\320\262_html/index.html" (limited to 'files/ru/web/guide/html') diff --git a/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html b/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html deleted file mode 100644 index 2dcdb6babb..0000000000 --- a/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Drag Operations -slug: Web/Guide/HTML/Drag_and_drop/Drag_operations -translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

Ниже описаны шаги, которые происходят при drag and drop операции.

- -

Drag операции описываются в документе, используя {{domxref("DataTransfer")}} интерфейс. Этот документ не использует не{{domxref("DataTransferItem")}} интерфейс, не{{domxref("DataTransferItemList")}} интерфейс.

- -

draggable атрибуты

- -

На веб-странице, в некоторых случаях используется поведение drag (перетаскивания) по умолчанию. Включая выделенный текст, изображения и ссылки. Когда изображение иои ссылка переносятся, URL изображения или ссылки устанавливается в качестве данных drag и перетаскивание начинается. Для других элементов, они должны быть частью выделения для выполнения перетаскивания по умолчанию. Чтобы увидеть это в действии, выделите область веб-страницы, а затем нажмите и удерживайте кнопку мыши и перетащите выделение. Появится специфичный для ОС рендеринг выделенного фрагмента и будет следовать за указателем мыши при перетаскивании. Однако это поведение является только drag поведением по умолчанию, если нет слушателей, определяющих данные для перетаскивания.

- -

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

- -

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

- -
    -
  1. Установить {{htmlattrxref("draggable")}}="true" на элемент, который вы хотите сделать перетаскиваемым.
    2. -
  2. Добавить слушатель события {{event("dragstart")}}.
    3. -
  3. Установить данные перетаскивания в слушатель выше.
    4. -
- -

Вот пример, который позволяет перетаскивать часть содержимого.

- -
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
-  This text <strong>may</strong> be dragged.
-</p>
-
- -

Атрибут {{htmlattrxref("draggable")}} установлен в  "true", т.о. этот элемент становится перетаскиваемым. Если этот атрибут был опущен или установлен в "false", то элемент не может быть перенесен, и вместо этого будет выбран текст.

- -

Атрибут {{htmlattrxref("draggable")}} может быть использован для любого элемента, включаяизображения и ссылки. Однако, для последних двух, значение по умолчанию - true, т.о. вы можете только использвать атрибут  {{htmlattrxref("draggable")}} со значением false для отключение перетаскивания этих элементов.

- -
-

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

-
- -

Начало операции перетаскивания

- -

В примере, слушатель добавлен для события {{event("dragstart")}} с использованием атрибута{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}.

- -
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
-  This text <strong>may</strong> be dragged.
-</p>
-
- -

Когда пользователь начинает перетаскивание, запускается событиеdrag, the {{event("dragstart")}}.

- -

В этом примере слушатель {{event("dragstart")}} добавлен к самому перемещаемом элементу. Однако, вы можете слушать более высокого предка, так как событие перетаскивание высплывает вверх как и большинство событий.

- -

Внутри события {{event("dragstart")}}, вы можете указать drag данные, изображжение отклика, drag-эффекты, все это описано ниже. Однако, обязательны только drag данные. (Изображение и drag-эффекты по умолчанию, подходят в большинстве ситуаций)

- -

Drag-данные

- -

Все {{domxref("DragEvent","drag events")}} имеют свойство, называемое{{domxref("DragEvent.dataTransfer","dataTransfer")}}, которое содержит drag-данные (dataTransfer это {{domxref("DataTransfer")}} object).

- -

Когда происходит перетаскивание, данные должны быть связаны с перетаскиванием, которое определяет, что перетаскивается. Например, при перетаскивании выделенного текста в текстовое поле данные, связанные с элементом данных перетаскивания, являются самим текстом. Аналогично, при перетаскивании ссылки на веб-странице элемент данных перетаскивания является URL-адресом ссылки.

- -

{{domxref("DataTransfer","drag data")}} содержит два параметра, тип (или формат) данных, и значение данных. Формат это строковый тип (такой как text/plain текстовых данных), значение - строка текста. Когда начинается перетаскивание, вы добавляете данные, предоставляя тип и данные. Во время перетаскивания в слушателе события для событий {{event("dragenter")}} и {{event("dragover")}} , вы используете типы данных перетаскиваемых данных, чтобы проверить, разрешено ли удаление. Например, цель drop, которая принимает ссылки, будет проверять тип text/uri-list. В течение события drop, слушатель будет получать данные тащат и вставить его на место.

- -

Свойство {{domxref("DataTransfer","drag data's")}} {{domxref("DataTransfer.types","types")}} возвращает список MIME-типов {{domxref("DOMString")}}, таких как text/plain или image/jpeg. Вы также можете создавать свои собственные типы. Большинство основные используемых типов описаны в  Recommended Drag Types.

- -

Перетаскивание может включать элементы данных нескольких различных типов. Это позволяет предоставлять данные в более специфических типах, часто пользовательских, но по предоставляет резервные данные для drop, которые не поддерживают более специфические типы. Как правило, наименее специфичным типом будут обычные текстовые данные, использующие тип text/plain. Эти данные будут простым текстовым представлением.

- -

Установка элементов drag-данных {{domxref("DragEvent.dataTransfer","dataTransfer")}}, используя метод {{domxref("DataTransfer.setData","setData()")}}. Требуется два аргумента: тип данных и значение данных. Например:

- -
event.dataTransfer.setData("text/plain", "Text to drag");
-
- -

Здесь, значение -  "Text to drag", формат -  text/plain.

- -

Вы можете предусмотреть данные в нескольких форматах. Сделаем это, вызовем метод  {{domxref("DataTransfer.setData","setData()")}} несколько раз с различными форматами. Вы должны вызывать его с форматами от большей специфичности к меньшей.

- -
const dt = event.dataTransfer;
-dt.setData("application/x.bookmark", bookmarkString);
-dt.setData("text/uri-list", "https://www.mozilla.org");
-dt.setData("text/plain", "https://www.mozilla.org");
-
- -

Добавлены данные трех различных форматов. Первый тип - application/x.bookmark, пользовательский тип.Другие приложения не поддерживают данный тип, но вы можете использовать пользовательский тип для перетаскивания между областями в одном приложениее или на одной странице.

- -

Предоставляя данные и в других типах, мы также можем поддерживать перетаскивание в другие приложения в менее специфичных формах. Тип application/x.bookmark может предоставлять данные с  более подробной информацией для использования в приложении, в то время как другие типы могут включать только один URL-адрес или текстовую версию.

- -

Обратите внимание, что и text/uri-list и text/plain cодержат одни и те же данные в этом примере.  Это часто бывает так, но это не обязательно.

- -

Если вы попытаетесь добавить данные дважды с тем же форматом, новые данные заменят старые данные, но в той же позиции в списке типов, что и старые данные.

- -

Вы можете очистить данные, используя метод {{domxref("DataTransfer.clearData","clearData()")}}, который принимает один аргумент: тип данных для удаления.

- -
event.dataTransfer.clearData("text/uri-list");
-
- -

Аргумент type в методе {{domxref("DataTransfer.clearData","clearData()")}} опционален. Если type не указан, данные, связанные со всеми типами, удаляются. Если перетаскивание не содержит элементов данных перетаскивания или все элементы были впоследствии очищены, то перетаскивание не произойдет.

- -

Настройка изображения отклика drag

- -

Когда происходит перетаскивание, полупрозрачное изображение генерируется из цели перетаскивания (событие "{{event("dragstart")}}" элемента срабатывает), и следует за указателем пользователя во время перетаскивания. Это изображение создается автоматически, поэтому вам не нужно создавать его самостоятельно. Однако вы можете использовать {{domxref("DataTransfer.setDragImage","setDragImage()")}} для задания пользовательского изображения отклика перетаскивания.

- -
event.dataTransfer.setDragImage(image, xOffset, yOffset);
-
- -

Необходимы три аргумента. Первый - это ссылка на изображение. Эта ссылка обычно относится к элементу <img>, но также может относиться к элементу <canvas> или любому другому элементу. Изображение отклика будет генерироваться из того, как изображение выглядит на экране, для изображений они будут нарисованы в их первоначальном размере. Второй и третий аргументы метода {{domxref("DataTransfer.setDragImage","setDragImage()")}} - это смещения, в которых изображение должно появляться относительно указателя мыши.

- -

Также можно использовать изображения и canvas, которых нет в документе. Этот метод полезен при рисовании пользовательских изображений перетаскивания с помощью элемента canvas, как показано в следующем примере:

- -
function dragWithCustomImage(event) {
-  const canvas = document.createElement("canvas");
-  canvas.width = canvas.height = 50;
-
-  const ctx = canvas.getContext("2d");
-  ctx.lineWidth = 4;
-  ctx.moveTo(0, 0);
-  ctx.lineTo(50, 50);
-  ctx.moveTo(0, 50);
-  ctx.lineTo(50, 0);
-  ctx.stroke();
-
-  const dt = event.dataTransfer;
-  dt.setData('text/plain', 'Data to Drag');
-  dt.setDragImage(canvas, 25, 25);
-}
-
- -

В этом примере мы делаем один canvas перетаскивания. Поскольку размер холста составляет 50×50 пикселей, мы используем смещение половины этого (25), чтобы изображение было центрировано на указателе мыши.

- -

Drag эффекты

- -

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

- -

Вы можете указать, какая из трех операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в слушателе событий{{event("dragstart")}}.

- -
event.dataTransfer.effectAllowed = "copy";
-
- -

В этом примере разрешена только копия.

- -

Вы можете комбинировать значения различными способами:

- -
-
none
-
никакая операция не разрешена
-
copy
-
только copy
-
move
-
только move
-
link
-
только link
-
copyMove
-
только copy или move
-
copyLink
-
только copy или link
-
linkMove
-
только link или move
-
all
-
только copy, move, или link
-
uninitialized
-
Значение по умолчанию all.
-
- -

Обратите внимание, что эти значения должны использоваться так, как указано выше. Например, установка свойства {{domxref("DataTransfer.effectAllowed","effectAllowed")}} на copyMove позволяет выполнять операцию копирования или перемещения, но не позволяет пользователю выполнять операцию связывания. Если вы не измените свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}},  то любая операция разрешена, как и со значением 'all'. Поэтому вам не нужно настраивать это свойство, если вы не хотите исключить определенные типы.

- -

Во время операции перетаскивания, слушатель для событий {{event("dragenter")}} или {{event("dragover")}} может проверить свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} , какие операции разрешены. Связанное свойство,  {{domxref("DataTransfer.dropEffect","dropEffect")}}, должно быть установлено в пределах одного из этих событий, чтобы указать, какая единственная операция должна быть выполнена. Допустимые значения для {{domxref("DataTransfer.dropEffect","dropEffect")}} - none, copy, move, или link. Комбинированные значения для этого свойства не используются.

- -

С событиями {{event("dragenter")}} и {{event("dragover")}}, свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} инициализируется в соответствии с запросом пользователя. Пользователь может изменить желаемый эффект, нажав клавиши-модификаторы. Хотя точные используемые клавиши различаются в зависимости от платформы, обычно клавиши  Shift и Control используются для переключения между копированием, перемещением и связыванием. Указатель мыши изменится, чтобы указать, какая операция требуется. Например, для copy курсор может появиться со знаком плюс рядом с ним.

- -

Вы можете изменять свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} во время событий {{event("dragenter")}} или {{event("dragover")}}, например, определенная drop-цель поддерживает только определенные операции. Вы можете изменить свойство {{domxref("DataTransfer.dropEffect","dropEffect")}}, чтобы переопределить действие пользователя, и обеспечить выполнение специфичной  операции перетаскивания при ее наступлении. Обратите внимание, что этот эффект должен быть указан в списке свойств {{domxref("DataTransfer.effectAllowed","effectAllowed")}}. В противном случае ему будет присвоено другое допустимое значение.

- -
event.dataTransfer.dropEffect = "copy";
-
- -

В этом примере выполняется эффект копирования.

- -

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

- -

В событиях {{event("drop")}} и {{event("dragend")}}, yвы можете проверить свойства {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения того, какой эффект был в конечном итоге выбран.  Если выбран эффект "move",то исходные данные должны быть удалены из источника перетаскивания в событии{{event("dragend")}}.

- -

Указание drop-целей

- -

Слушатель для событий {{event("dragenter")}} и {{event("dragover")}} используются для указания допустимых drop-целей, то есть мест, где могут быть сброшены перетаскиваемые элементы. Большинство областей веб-страницы или приложения не являются допустимыми местами для сброса данных. Таким образом, обработка этих событий по умолчанию не допускает сброса перетаскиваемых данных.

- -

Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события dragenter и dragover.  Это можно сделать, либо вернув false из определенных атрибутом слушателя событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.

- -
<div ondragover="return false">
-<div ondragover="event.preventDefault()">
-
- -

Вызывая метод {{domxref("Event.preventDefault","preventDefault()")}} во время обоих событий {{event("dragenter")}} и {{event("dragover")}} укажите, что падение разрешено в этом месте. Однако обычно вы захотите вызвать метод  {{domxref("Event.preventDefault","preventDefault()")}} события только в определенных ситуациях (например, только при перетаскивании ссылки).

- -

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

- -

Наиболее распространенным является принятие или отклонение сброса в зависимости от типа данных перетаскивания при передаче данных — например, разрешение для изображений, ссылок или и того, и другого. Для этого вы можете проверить свойство {{domxref("DataTransfer.types","types")}} события {{domxref("DragEvent.dataTransfer","dataTransfer")}} (свойство). Свойство {{domxref("DataTransfer.types","types")}} возвращает массив из строк, добавленных при начале перетаскивания, в порядке от наиболее значимого к наименее значимому.

- -
function doDragOver(event) {
-  const isLink = event.dataTransfer.types.includes("text/uri-list");
-  if (isLink) {
-    event.preventDefault();
-  }
-}
- -

В этом примере мы используем метод includes  чтобы проверить, присутствует ли тип text/uri-list в списке типов. Если это так, мы отменим событие, так что сброс становится разрешен. Если перетаскиваемые данные не содержат ссылки, событие не будет отменено, и сброс не может произойти в этом месте.

- -

Вы также можете установить либо свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, либо свойство{{domxref("DataTransfer.dropEffect","dropEffect")}}, либо оба одновременно, если вы хотите указать более конкретные сведения о типе операции, которая будет выполнена. Естественно, изменение любого свойства не будет иметь никакого эффекта, если вы не отмените событие.

- -

Drop Feedback

- -

There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property.

- -

Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.

- -

However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the :-moz-drag-over CSS pseudoclass on a drop target.

- -
.droparea:-moz-drag-over {
-  outline: 1px solid black;
-}
-
- -

In this example, the element with the class droparea will receive a 1 pixel black outline while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the {{event("dragenter")}} event.

- -
-

Note: You must cancel the {{event("dragenter")}} event for this pseudoclass to apply, as this state is not checked for the {{event("dragover")}} event.

-
- -

For more complex visual effects, you can also perform other operations during the {{event("dragenter")}} event. For example, by inserting an element at the location where the drop will occur. This might be an insertion marker, or an element that represents the dragged element in its new location. To do this, you could create an image or separator element and simply insert it into the document during the {{event("dragenter")}} event.

- -

The {{event("dragover")}} event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a {{event("dragover")}} event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.

- -

Finally, the {{event("dragleave")}} event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the :-moz-drag-over pseudoclass will be removed automatically. The {{event("dragleave")}} event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

- -

Performing a Drop

- -

When the user releases the mouse, the drag and drop operation ends.

- -

If the mouse is released over an element that is a valid drop target, that is, one that cancelled the last {{event("dragenter")}} or {{event("dragover")}} event, then the drop will be successful, and a {{event("drop")}} event will fire at the target. Otherwise, the drag operation is cancelled, and no {{event("drop")}} event is fired.

- -

During the {{event("drop")}} event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.

- -

As with all drag-related events, the event's {{domxref("DataTransfer","dataTransfer")}} property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.

- -
function onDrop(event) {
-  const data = event.dataTransfer.getData("text/plain");
-  event.target.textContent = data;
-  event.preventDefault();
-}
-
- -

The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. (Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a {{event("dragover")}} event.)

- -

In the example here, once the data has been retrieved, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

- -

In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop, so that the browser's default handling is not triggered by the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.

- -

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

- -
function doDrop(event) {
-  const lines = event.dataTransfer.getData("text/uri-list").split("\n");
-  lines.filter(line => !line.startsWith("#"))
-    .forEach(line => {
-      const link = document.createElement("a");
-      link.href = line;
-      link.textContent = line;
-      event.target.appendChild(link);
-    })
-  event.preventDefault();
-}
-
- -

This example inserts a link from the dragged data. As the name implies, the text/uri-list type actually may contain a list of URLs, each on a separate line. The above code uses split to break the string into lines, then iterates over the list of lines, and inserts each as a link into the document. (Note also that links starting with a number sign (#) are skipped, as these are comments.)

- -

For simple cases, you can use the special type URL just to retrieve the first valid URL in the list. For example:

- -
const link = event.dataTransfer.getData("URL");
-
- -

This eliminates the need to check for comments or iterate through lines yourself. However, it is limited to only the first URL in the list.

- -

The URL type is a special type. It is used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.

- -

Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In the following example, three formats are supported by a drop target.

- -

The following example returns the data associated with the best-supported format:

- -
function doDrop(event) {
-  const supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
-  const types = event.dataTransfer.types.filter(type => supportedTypes.includes(type));
-  if (types.length) {
-    const data = event.dataTransfer.getData(types[0]);
-  }
-  event.preventDefault();
-}
-
- -

Окончание перетаскивания

- -

Как только перетаскивание завершено, событие {{event("dragend")}} запускается в источнике перетаскивания (тот же элемент, который получил событие {{event("dragstart")}}). Это событие сработает, если перетаскивание было успешным[1] или если оно было отменено. Однако вы можете использовать свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения, какая операция удаления произошла.

- -

Если свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} имеет значение none во время события {{event("dragend")}}, то перетаскивание было отменено. В противном случае эффект указывает, какая операция была выполнена. Источник может использовать эту информацию после операции перемещения для удаления перетаскиваемого элемента из старого расположения. Свойство {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} будет присвоено значение true, если пользователь отменил перетаскивание (нажав Escape), и false если перетаскивание было отменено по другим причинам, таким как недопустимая цель перетаскивания, или если оно было успешным.

- -

Сброс может произойти внутри того же окна или над другим приложением. Событие{{event("dragend")}}будет срабатывать всегда, независимо от этого. Свойство события {{domxref("MouseEvent.screenX","screenX")}} и {{domxref("MouseEvent.screenY","screenY")}} будут установлены в координаты экрана, где произошел сброс.

- -

Когда событие {{event("dragend")}} завершило распространение, операция перетаскивания завершена.

- -

[1]: В Gecko, {{event("dragend")}} не отправляется, если исходный узел движется или удаляется во время перетаскивания (например, при сбрасывании или {{event("dragover")}}). Bug 460801

- -

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

- - diff --git a/files/ru/web/guide/html/drag_and_drop/index.html b/files/ru/web/guide/html/drag_and_drop/index.html deleted file mode 100644 index 86467501fd..0000000000 --- a/files/ru/web/guide/html/drag_and_drop/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Drag and drop -slug: Web/Guide/HTML/Drag_and_drop -translation_of: Web/API/HTML_Drag_and_Drop_API ---- -

Firefox и прочие приложения компании Mozilla имеют ряд возможностей для управления drag и drop. Это позволяет пользователю нажать и удерживая зажатой кнопку мыши над элементом, переместить его на другую позицию, отпустив кнопку мыши пользователь может оставить элемент на новой позиции. На протяжении всей операции перемещения полупрозрачное представление элемента следует за курсором мыши. Новая позиция элемента может располагаться в совершенно другом приложении. Веб сайты, и XUL приложения могут использовать эту функциональность для того, чтобы определить какие элементы страницы могут быть перемещены, а также определить элементы куда первые могут быть перемещены.

- -
Эта часть покрывает функциональность drag и drop в Firefox 3.5 (Gecko 1.9.1) а также последующие версии. Для старого API для Firefox 3.0 и ранее, в котором нет соответствующей поддержки данной функциональности, смотрите older API documentation.
- -

Основы Drag и Drop

- -

Использование функциональности drag и drop подразумевает выполнения следующих шагов:

- - - -

Mozilla и Firefox поддерживают ряд возможностей, которые выходят за рамку стандартной модели спецификации. Они позволяют пользователю перемещать несколько элементов и перемещать нестроковые данные. Для детальной информации смотрите Dragging and Dropping Multiple Items.

- -

Для того, чтобы ознакомиться с общим списком данных поддерживаемых операцией drag and drop смотрите Recommended Drag Types.

- -

Также доступны примеры с лучшей практикой использования операции drag and drop для перемещения данных разных типов:

- - - -

Смотри DataTransfer для ссылки на объект DataTransfer.

- -

События Drag

- -

Ряд событий срабатывают на протяжении всей процедуры drag and drop. Запомните, что только drag-события срабатывают на протяжении операции перемещения; события мыши, такие как mousemove - нет. Также запомните, что события dragstart и dragend не срабатывают при попытке перенести файл из операционной системы в браузер.

- -

Свойство dataTransfer всех событий перемещения содержит данные про все drag и drop операции.

- -
-
dragstart
-
Срабатывает когда элeмент начал перемещаться. В момент срабатывания события dragstart пользователь начинает перетаскивание элемента. Обработчик данного события может быть использован для сохранения информации о перемещаемом объекте, а также для изменения изображения, которое будет ассоциировано с перемещением. Дaнное событие не срабатывает, когда некоторый файл будет переноситься из операционной системы в браузер. Для детальной информации Starting a Drag Operation.
-
dragenter
-
Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите Specifying Drop Targets.
-
dragover
-
Данное событие срабатывает каждые несколько сотен милисекунд, когда перемещаемый элемент оказывается над зоной, принимающей перетаскиваемые элементы. Для детальной информации смотрите Specifying Drop Targets.
-
dragleave
-
Это событие запускается в момент перетаскивания, когда курсор мыши выходит за пределы элемента. Обработчикам следует убрать любую подсветку или иные индикаторы, указывавшие на присутствие курсора, чтобы тем самым обозначить реакцию на прекращение перетаскивания.
-
drag
-
Запускается при перемещении элемента или выделенного текста.
-
drop
-
Событие drop вызывается для элемента, над которым произошло "сбрасывание" перемещаемого элемента. Событие отвечает за извлечение "сброшенных" данных и их вставку. Событие будет срабатывать только при завершении операции перетаскивания, например, событие не сработает, если пользователь отменит перетаскивание нажатием Esc, или не донесет элемент, до цели. Для детальной информации смотрите Performing a Drop.
-
dragend
-
Источник перетаскивания получит событие dragend, когда перетаскивание завершится, было оно удачным или нет. Это событие не вызывается при перетаскивании файла в браузер из ОС.   Для детальной информации смотрите Finishing a Drag.
-
- -

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

- - diff --git a/files/ru/web/guide/html/html5/constraint_validation/index.html b/files/ru/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..5a5fccec8c --- /dev/null +++ b/files/ru/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,343 @@ +--- +title: Constraint validation +slug: HTML/HTML5/Constraint_validation +tags: + - Селекторы +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +--- +

Создание веб форм всегда было комплексной задачей. В то время как сама по себе разметка формы - задача не сложная, проверка каждого поля на валидность - сложнее, а информирование юзера о проблеме - может стать головной болью. Стандарт HTML5 предоставил новые механизмы для форм: были добавлены новые семантические типы для элемента {{ HTMLElement("input") }} и обязательная валидация, чтобы облегчить работу по проверке содержимого формы на стороне браузера. Проще говоря, обычная проверка может быть выполнена без JavaScript, простой установкой новых аттрибутов; более сложные ограничения могут быть реализованы через HTML5 Constraint Validation API.

+ +
Внимание: HTML5 Constraint validation не отменяет валидацию на стороне сервера. Несмотря на то что на сервер будет отправляться меньше запросов с невалидными данными, такие запросы всё ещё могут быть отправлены менее "сговорчивыми" браузерами (например, браузерами без поддержки HTML5 и без JavaScript) или плохими парнями, пытающимися взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам всё ещё нужно проверять ввод на стороне сервера, таким образом, чтобы это было согласовано с валидацией на стороне клиента.
+ +

Внутренние и базовые ограничения

+ +

В HTML5, базовые ограничения описываются двумя способами:

+ + + +

Семантические типы input-ов

+ +

Аттрибуты, присущие элементам {{ htmlattrxref("type", "input") }}:

+ + + + + + + + + + + + + + + + + + + + + +
Input typeОпределение ограниченияСвязанное с этим нарушение
<input type="URL">Значение должно быть абсолютным URL, одним из: +
    +
  • валидным URI (как описано в RFC 3986)
    • +
  • валидным IRI, без query сомпонента (как описано в RFC 3987)
    • +
  • валидным IRI, без query сомпонента и без неэкранированных не-ASCII символов (как описано в RFC 3987)
    • +
  • валидным IRI, при условии, что кодировка документа UTF-8 или UTF-16 (как описано в RFC 3987)
    • +
+ 		Type mismatch constraint violation
 <input type="email">Значение должно следовать ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) где: +
    +
  • atext (описан в RFC 5322) - US-ASCII символ (A to Z and a-z), цифра (от 0 до 9) или один из следующих: 
    + ! # $ % & ' * + - / = ? ` { } | ~ специальных символов,
    • +
  • ldh-str (описан в RFC 1034) - US-ASCII символы, цифры и "-", сгруппированы по словам и разделённые точкой (.).
    • +
+ +
Внимание: если установлен аттрибут {{ htmlattrxref("multiple", "input") }}, в поле могут быть вписаны несколько e-mail адресов, разделённых запятыми. Если любое из этих условий не выполнено, будет вызвано Type mismatch constraint violation.
+ 		Type mismatch constraint violation
+ +

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

+ +

Аттрибуты валидации

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
АттрибутТипы input с поддержкой аттрибутаВозможные значенияОписание ограниченияСвязанное нарушение
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordРегулярное выражение JavaScript (по стандарту ECMAScript 5, флаги global, ignoreCase, и multiline отключены)Значение должно подходить под паттернPattern mismatch constraint violation
{{ htmlattrxref("min", "input") }}range, numberВалидное числоЗначение поля должно быть больше или равно значению аттрибутаUnderflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("max", "input") }}range, numberВалидное числоЗначение поля должно быть меньше или равно значению аттрибутаOverflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elementsникакое так как это Boolean аттрибут: его присутствие означает true, а отсутствие - falseЗначение должно быть не пустым (если установлено).Missing constraint violation
{{ htmlattrxref("step", "input") }}dateЦелое число днейПока в аттрибут step не установлен любой литерал, значение может быть min + любое число, крастное шагу.Step mismatch constraint violation
monthЦелое число месяцев
weekЦелое число недель
datetime, datetime-local, timeЦелое число секунд
range, numberЦелое число
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; также на элементе {{ HTMLElement("textarea") }}Длина (целое число)Количество символов (знаков) не должно превышать значение аттрибута.Too long constraint violation
+ +

Процесс валидации ограничений

+ +

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

+ + + +
Note: + + +
+ +

Complex constraints using HTML5 Constraint API

+ +

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.

+ +

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

+ +

Constraint combining several fields: Postal code validation

+ +

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

+ +
+

Note: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. 

+
+ +

As an example, we will add a script checking the constraint validation for this simple form:

+ +
<form>
+    <label for="ZIP">ZIP : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">Country : </label>
+    <select id="Country">
+      <option value="ch">Switzerland</option>
+      <option value="fr">France</option>
+      <option value="de">Germany</option>
+      <option value="nl">The Netherlands</option>
+    </select>
+    <input type="submit" value="Validate">
+</form>
+ +

This displays the following form: 

+ +

+ +

First, we write a function checking the constraint itself:

+ +
function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Read the country id
+  var country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  var ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

You can see a live example of the postal code validation.  

+ +

Limiting the size of a file before its upload

+ +

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.

+ +

Here is the HTML part:

+ +
<label for="FS">Select a file smaller than 75 kB : </label>
+<input type="file" id="FS">
+ +

This displays:

+ +

+ +

 

+ +

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Check the constraint
+       FS.setCustomValidity("The selected file must not be larger than 75 kB");
+       return;
+     }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}
+ +

 

+ +

Finally we hook the method with the correct event:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

You can see a live example of the File size constraint validation.

+ +

Visual styling of constraint validation

+ +

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

+ +

Controlling the look of elements

+ +

The look of elements can be controlled via CSS pseudo-classes.

+ +

:required and :optional CSS pseudo-classes

+ +

The :required and :optional pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

+ + +

:-moz-placeholder CSS pseudo-class

+ +

See :-moz-placeholder.

+ +

:valid :invalid CSS pseudo-classes

+ +

The :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

+ +

Default styles

+ +

Controlling the text of constraints violation

+ +

The x-moz-errormessage attribute

+ +

The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.

+ +
+

Note: This extension is non-standard.

+
+ +

Constraint API's element.setCustomValidity()

+ +

The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.

+ +

Constraint API's ValidityState object

+ +

The DOM ValidityState interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

+ +

Examples of personalized styling

+ +

HTML4 fallback

+ +

Trivial fallback

+ +

JS fallback

+ +

Conclusion

diff --git a/files/ru/web/guide/html/html5/index.html b/files/ru/web/guide/html/html5/index.html new file mode 100644 index 0000000000..dca2e39993 --- /dev/null +++ b/files/ru/web/guide/html/html5/index.html @@ -0,0 +1,171 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 — последняя версия стандарта HTML. Термин имеет два определения:

+ + + +

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

+ + + + + + + + + + +
+

СЕМАНТИКА

+ +
+
Секции и контуры в HTML5
+
Контурные и секционные элементы в HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
+
Использование HTML5 audio и video
+
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
+
Формы в HTML5
+
Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для аттрибута {{ htmlattrxref("type", "input") }} тега {{ HTMLElement("input") }} и новый элемент {{ HTMLElement("output") }}.
+
Новые семантические элементы
+
Кроме секций, медиа и форм, множество новых тегов, такие как {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} и {{ HTMLElement("meter") }}, увеличено количество валидных HTML5 элементов.
+
Улучшение {{HTMLElement("iframe")}}
+
Использование атрубутов {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe") }}, разработчики могут задать нужный уровень безопасности и осуществивить рендеринг тега {{HTMLElement("iframe")}}.
+
MathML
+
Позволяет вставлять математические формулы.
+
Введение в HTML5
+
Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.
+
HTML5-совместимый парсер
+
Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.
+
+
+ +

СВЯЗЬ

+ +
+
Web Sockets
+
Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.
+
Server-sent события
+
Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
+
WebRTC
+
Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
+
+ +

ОФФЛАЙН И ХРАНИЛИЩЕ

+ +
+
Оффлайн ресурсы: кеш приложения
+
Firefox полностью поддерживает спецификацию HTML5 по оффлайн ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне
+
Online and offline events
+
Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.
+
WHATWG сессионное или постоянное хранилище (aka DOM Storage)
+
Постоянное или сессионое храилище позволяет веб-приложениям хранить структурированны данные на стороне клиента.
+
IndexedDB
+
Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.
+
Using files from web applications
+
Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя {{ HTMLElement("input") }} с типом file, имеющих атрибут multiple. Ещё это FileReader.
+
+ +

МУЛЬТИМЕДИА

+ +
+
Использование HTML5 audio и video
+
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
+
WebRTC
+
Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
+
Использование Camera API
+
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
+
+ +

ГРАФИКА И ЭФФЕКТЫ

+ +
+
Canvas Tutorial
+
Узнайте о элементе {{ HTMLElement("canvas") }} и узнайте, как рисовать графику и другие элементы в Firefox.
+
HTML5 text API для <canvas>
+
HTML5 text API сейчас поддерживается в {{ HTMLElement("canvas") }}.
+
WebGL
+
WebGL приносит 3D в веб, соответстсвует OpenGL ES 2.0, может использоваться в HTML5 через {{ HTMLElement("canvas") }}.
+
SVG
+
Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.
+
+ +
+
+
+ 		+

производительность и интеграция

+ +
+
Web Workers
+
Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.
+
XMLHttpRequest Level 2
+
Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе AJAX.
+
JIT-компилирование движков JavaScript
+
Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.
+
History API
+
Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.
+
contentEditable атрибут: трансформируйте свой сайт в википедию!
+
HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.
+
Drag and drop
+
HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.
+
Управление фокусом в HTML
+
Поддержка новый атрибутов HTML5 activeElement and hasFocus.
+
Обработчики протоколов для Web
+
Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Контролирует анимации для обеспечения оптимальной производительности.
+
Fullscreen API
+
Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.
+
Pointer Lock API
+
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
+
Online and offline events
+
Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернется в сеть.
+
+ +

доступ к устройствам

+ +
+
Использование Camera API
+
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
+
Touch события
+
Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.
+
Геолокация
+
Позволяет браузерам получать местоположение пользователя.
+
Определение ориентации устройства
+
Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).
+
Pointer Lock API
+
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
+
+ +

стилизация

+ +

CSS был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.

+ +
+
Новые способы стилизирования фона
+
Новая возможность задать тень элемента, используя {{ cssxref("box-shadow") }} или установление множественных фонов.
+
Лучшие границы
+
Не только изображения можно использовать для стилизирования границы, используя {{ cssxref("border-image") }} или его длинные формы записи, а скруглить уголки можно свойством {{ cssxref("border-radius") }}.
+
Анимируйте свой стиль
+
Используйте CSS Переходы, чтобы анимировать изменение состояния элемента или CSS Анимации для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.
+
Улучшение типографии
+
Авторы могут лучше контролировать типографию. Например, они могут контролировать {{ cssxref("text-overflow") }} и перенос слов, а также тень текста и его декорированиe. Могут загрузить и применить другой шрифт правилом {{ cssxref("@font-face") }}.
+
Новые презентационные макеты
+
Для того, чтобы улучшить гибкость дизайна, добавили: CSS мульти-колоночный макет и CSS отзывчивый блочный макет.
+
+
diff --git a/files/ru/web/guide/html/html5/introduction_to_html5/index.html b/files/ru/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..28b8138f0e --- /dev/null +++ b/files/ru/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,26 @@ +--- +title: Введение в HTML5 +slug: HTML/HTML5/Введение_в_HTML5 +tags: + - DOCTYPE + - HTML5 + - HTML5 парсер +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

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

+

Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features. Gecko began supporting some HTML5 features in version 1.8.1. You can find a list of all of the HTML5 features that Gecko currently supports on the main HTML5 page. For detailed information about multiple browsers' support of HTML5 features, refer to the CanIUse website.

+

Declaring that the document contains HTML5 mark-up with the HTML5 doctype

+

The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:

+
<!DOCTYPE html>
+
+

Doing so will cause even browsers that don't presently support HTML5 to enter into standards mode, which means that they'll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don't support.

+

This is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.

+

Декларация кодировки с помощью <meta charset>

+

The first thing done on a page is usually indicating the character set that is used. In previous versions of HTML, it was done using a very complex {{HTMLElement("meta")}} element. Now, it is very simple:

+
<meta charset="UTF-8">
+

Place this right after your {{HTMLElement("head") }}, as some browsers restart the parsing of an HTML document if the declared charset is different from what they had anticipated. Also, if you are not currently using UTF-8, it's recommended that you switch to it in your Web pages, as it simplifies character handling in documents using different scripts.

+

Note that HTML5 restricts the valid charset to that compatible with ASCII and using at least 8 bits. This was done to tighten security and prevent some types of attacks.

+

Использование нового HTML5 парсера

+

The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.

+

This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.

+

Не волнуйтесь - вам не придется ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!

diff --git a/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index a6236d9c24..0000000000 --- a/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,375 +0,0 @@ ---- -title: Использование разделов и создание структуры HTML документа -slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document -tags: - - HTML5 - - Веб - - Для опытных разработчиков - - Обзор - - Пример - - Разделы - - Руководство - - Структура -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
-

Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрен в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h1-h6).

-
- -

Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.

- -

Структура документа в HTML 4

- -

Структура документа, т. е. семантическая структура контента, заключенного в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включенными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

- -

Так, следующая разметка:

- -
-
<div class="section" id="forest-elephants" >
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними.
-     ...продолжение данного подраздела...
-  </div>
-</div>
-
-
- -

обеспечивает следующую структуру:

- -
1. Лесные слоны
-   1.1 Среда обитания
-
- -

Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

- -
<h1>Лесные слоны</h1>
- <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h2>Среда обитания</h2>
-  <p>Лесные слоны живут не на деревьях, а под ними.
-    ...продолжение данного подраздела...
-  <h2>Рацион</h2>
-<h1>Монгольская песчанка</h1>
-
- -

обеспечивает следующую структуру:

- -
1. Лесные слоны
-   1.1 Среда обитания
-   1.2 Рацион
-2. Монгольская песчанка
-
- -

Какие проблемы решает HTML5

- -

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

- -
    -
  1. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
    2. -
  2. Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
    3. -
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.
    4. -
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.
    5. -
- -

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

- -

Алгоритм создания структуры HTML5

- -

Задание разделов в HTML5

- -

Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. 

- -
Note: Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. «Задание заголовков в HTML5».
- -

Например:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <section>
-    <h1>Введение</h1>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
-  </section>
-  <section>
-    <h1>Среда обитания</h1>
-    <p>Лесные слоны живут не на деревьях, а под ними.</p>
-  </section>
-  <aside>
-    <p>рекламный блок</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Данный фрагмент HTML задает раздел верхнего уровня:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <section>
-    <h1>Введение</h1>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
-  </section>
-  <section>
-    <h1>Среда обитания</h1>
-    <p>Лесные слоны живут не на деревьях, а под ними.</p>
-  </section>
-  <aside>
-    <p>рекламный блок</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Данный раздел имеет три подраздела:

- -
<section>
-  <h1>Лесные слоны</h1>
-
-  <section>
-    <h1>Введение</h1>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
-  </section>
-
-  <section>
-    <h1>Среда обитания</h1>
-    <p>Лесные слоны живут не на деревьях, а под ними.</p>
-  </section>
-
-  <aside>
-    <p>рекламный блок</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

В результате получаем следующую структуру:

- -
1. Лесные слоны
-   1.1 Введение
-   1.2 Среда обитания
-
- -

Задание заголовков в HTML5

- -

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задает заголовок текущего раздела.

- -

Элемент заголовка имеет определенную степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <section>
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними.
-        ...продолжение данного подраздела...
-  </section>
-</section>
-<section>
-  <h3>Монгольская песчанка</h3>
-  <p>В данном разделе мы расскажем о монгольской песчанке.
-     ...продолжение данного раздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Среда обитания
-2. Монгольская песчанка
- -

Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

- -

Неявное задание разделов

- -

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

- -

Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h3 class="implicit subsection">Среда обитания</h3>
-  <p>Лесные слоны живут не на деревьях, а под ними.
-    ...продолжение данного подраздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Среда обитания (неявно задано элементом h3)
-
- -

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h1 class="implicit section">Монгольская песчанка</h1>
-  <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
-    ...продолжение данного раздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел)
-
- -

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

- -
<body>
-  <h1>Млекопитающие</h1>
-  <h2>Киты</h2>
-  <p>В данном разделе мы поговорим о китах.
-    ...продолжение данного раздела...
-  <section>
-    <h3>Лесные слоны</h3>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-    <h3>Монгольская песчанка</h3>
-      <p>Песчанки распространились далеко за пределы Монголии.
-         ...продолжение данного подраздела...
-    <h2>Рептилии</h2>
-      <p>Рептилии – это холоднокровные животные.
-          ...продолжение данного раздела...
-  </section>
-</body>
- -

приводит к следующей структуре:

- -
1. Млекопитающие
-   1.1 Киты (неявно задается элементом h2)
-   1.2 Лесные слоны (явным образом задается элементом раздела)
-   1.3 Монгольская песчанка (неявно задается элементом h3, который одновременно закрывает предыдущий раздел)
-2. Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел)
-
- -

Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.

- -

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.

- -

Корни задания разделов

- -

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

- -

Например:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <section>
-    <h2>Введение</h2>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
-  </section>
-  <section>
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «<cite>Лесной слон на Борнео</cite>»:</p>
-    <blockquote>
-       <h1>Борнео</h1>
-       <p>Лесной слон живет на Борнео...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Данный пример приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Введение
-   1.2 Среда обитания
- -

Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

- -

Разделы, не входящие в структуру

- -

 HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

- -
    -
  1. Элемент вспомогательного раздела {{HTMLElement("aside")}} задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
    2. -
  2. Элемент навигационного раздела {{HTMLElement("nav")}} задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
    3. -
- -

Шапки и подвалы

- -

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

- -
    -
  1. Элемент шапки {{HTMLElement("header")}} задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
    2. -
  2. Элемент подвала ({{HTMLElement("footer")}}) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
    3. -
- -

Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.

- -

Адреса в элементах задания разделов

- -

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.

- -

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

- -

Использование элементов HTML5 в браузерах, не поддерживающих HTML5

- -

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

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.

- -

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержа скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

- -
<noscript>
-   <strong>Внимание!</strong>
-   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
-   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
-</noscript>
- -

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Внимание!</strong>
-     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
-     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
-  </noscript>
-<![endif]-->
- -

Заключение

- -

Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.

- -
{{HTML5ArticleTOC()}}
diff --git a/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html deleted file mode 100644 index f34fe049f5..0000000000 --- a/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Tips for authoring fast-loading HTML pages -slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

Эти советы основаны на общих знаниях и экспериментах.

- -

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

- -

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

- -

Советы

- -

Уменьшайте вес страницы

- -

Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.

- -

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

- -

Такие инструменты, как HTML Tidy , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии

- -

Минимизируйте количество файлов

- -

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

- -

В зависимости от настроек кэша браузера он может отправить запрос с заголовком If-Modified-Since для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.

- -

Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.

- -

Используйте сеть доставки (и дистрибуции) содержимого (Content Delivery Network (CDN))

- -

Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.

- -

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

- -

Дальнейшее чтение:

- - - -

Сократите поиск доменов

- -

Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.

- -

Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.

- -

Кэшируйте повторно использованный контент

- -

Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.

- -

В частности, обратите внимание на  заголовок Last-Modified. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок Last-Modified к статическим страницам (напр. .html, .css), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. .php, .aspx), это, конечно, не может быть сделано, и заголовок не отправляется.

- -

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

- -

Больше информации:

- -
    -
  1. HTTP Conditional Get for RSS Hackers
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. On HTTP Last-Modified and ETag
    4. -
- -

Оптимально размещайте компоненты на странице

- -

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

- -

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

- -

Уменьшайте количество встроенных скриптов

- -

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

- -

Используйте современный CSS и корректную разметку

- -

Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.

- -

Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).

- -

Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, HTML Tidy может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки

- -

Разделяйте ваш контент

- -

Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, или <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a>.

- -

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

- -

Вместо глубоко вложенных таблиц, как в:

- -
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
- -

используйте невложенные таблицы как показано (или div'ы)

- -
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-
- -

Смотри также: CSS3 Multi-column Layout Spec и CSS3 Flexible Box Layout

- -

Сокращайте и сжимайте активы SVG

- -

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

- -

Сокращайте и сжимайте ваши изображения

- -

Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу.  Есть онлайн-инструменты, такие как <a href="https://compressjpeg.com/">Compress Jpeg</a>, <a href="https://tinypng.com">Tiny PNG</a> и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.

- -

Указывайте размеры для изображений и таблиц 

- -

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

- -

Таблицы должны использовать CSS селектор: комбинация свойств

- -
  table-layout: fixed;
-
- -

и должны указывать ширину колонок используя HTML теги COL и COLGROUP

- -

Мудро выбирайте требования к пользовательскому агенту

- -

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

- -

В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.

- -

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

- -

Используйте async и defer, если это возможно

- -

Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.

- -

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

- -

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

- -

Пример структуры страницы

- -

· HTML

- -
-
· HEAD
-
- -
-
-
-
· LINK ...
- CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.
-
-
-
- -
-
-
-
· SCRIPT ...
- Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы
-
Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.
-
-
-
- -
-
· BODY
-
· Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
-
- -
-
-
-
· SCRIPT ...
- Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.
-
Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания
-
Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.
-
-
-
- - - - - -
-

Original Document Information

- - -
- -

 

diff --git a/files/ru/web/guide/html/using_data_attributes/index.html b/files/ru/web/guide/html/using_data_attributes/index.html deleted file mode 100644 index cef001e25a..0000000000 --- a/files/ru/web/guide/html/using_data_attributes/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Использование data-* атрибутов -slug: Web/Guide/HTML/Using_data_attributes -tags: - - Guide - - HTML -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -

HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.

- -

Синтаксис HTML

- -

Синтаксис прост — любой атрибут, чьё имя начинается с data-, является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data-атрибуты:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

Доступ в JavaScript

- -

Чтение data-атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Чтобы получить data-атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным "5".

- -

Доступ в CSS

- -

Заметим, что data-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию {{cssxref("attr")}}:

- -
article::before {
-  content: attr(data-parent);
-}
- -

Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:

- -
article[data-columns='3']{
-  width: 400px;
-}
-article[data-columns='4']{
-  width: 600px;
-}
- -

Увидеть как это работает можно в примере на JSBin.

- -

Data-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

- -

Проблемы

- -

Не храните данные, которые должны быть видимы и доступны в data-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data-атрибутах.

- -

Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset. Для поддержки IE 10 и более ранних версий получение доступа к data-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, производительность чтения data-атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute().

- -

Тем не менее, для пользовательских метаданных, связанных с элементами, data-атрибуты являются отличным решением.

- -

Поддержка в браузерах

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
caniuse
-

IE

- 		-

Edge

- 		-

Firefox

- 		-

Chrome

- 		-

Safari

- 		-

Opera

- 		-

iOS Safari

- 		-

Opera Mini*

- 		-

Android Browser

- 		-

Chrome for Android

-
11+14+52+49+10.1+46+9.3+all4.4+59+
- -

 

- -

Тем не менее, для содержимого, которое не надо показывать это является отличным решением.

- -

См. также

- - diff --git a/files/ru/web/guide/html/using_html_sections_and_outlines/index.html b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..a6236d9c24 --- /dev/null +++ b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,375 @@ +--- +title: Использование разделов и создание структуры HTML документа +slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document +tags: + - HTML5 + - Веб + - Для опытных разработчиков + - Обзор + - Пример + - Разделы + - Руководство + - Структура +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрен в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h1-h6).

+
+ +

Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.

+ +

Структура документа в HTML 4

+ +

Структура документа, т. е. семантическая структура контента, заключенного в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включенными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

+ +

Так, следующая разметка:

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними.
+     ...продолжение данного подраздела...
+  </div>
+</div>
+
+
+ +

обеспечивает следующую структуру:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+
+ +

Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

+ +
<h1>Лесные слоны</h1>
+ <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h2>Среда обитания</h2>
+  <p>Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+  <h2>Рацион</h2>
+<h1>Монгольская песчанка</h1>
+
+ +

обеспечивает следующую структуру:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+   1.2 Рацион
+2. Монгольская песчанка
+
+ +

Какие проблемы решает HTML5

+ +

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

+ +
    +
  1. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
    2. +
  2. Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
    3. +
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.
    4. +
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.
    5. +
+ +

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

+ +

Алгоритм создания структуры HTML5

+ +

Задание разделов в HTML5

+ +

Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. 

+ +
Note: Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. «Задание заголовков в HTML5».
+ +

Например:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Данный фрагмент HTML задает раздел верхнего уровня:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Данный раздел имеет три подраздела:

+ +
<section>
+  <h1>Лесные слоны</h1>
+
+  <section>
+    <h1>Введение</h1>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
+  </section>
+
+  <section>
+    <h1>Среда обитания</h1>
+    <p>Лесные слоны живут не на деревьях, а под ними.</p>
+  </section>
+
+  <aside>
+    <p>рекламный блок</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

В результате получаем следующую структуру:

+ +
1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+
+ +

Задание заголовков в HTML5

+ +

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задает заголовок текущего раздела.

+ +

Элемент заголовка имеет определенную степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <section>
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними.
+        ...продолжение данного подраздела...
+  </section>
+</section>
+<section>
+  <h3>Монгольская песчанка</h3>
+  <p>В данном разделе мы расскажем о монгольской песчанке.
+     ...продолжение данного раздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Среда обитания
+2. Монгольская песчанка
+ +

Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

+ +

Неявное задание разделов

+ +

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

+ +

Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h3 class="implicit subsection">Среда обитания</h3>
+  <p>Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Среда обитания (неявно задано элементом h3)
+
+ +

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  <h1 class="implicit section">Монгольская песчанка</h1>
+  <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
+    ...продолжение данного раздела...
+</section>
+ +

приводит к следующей структуре:

+ +
1. Лесные слоны
+2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел)
+
+ +

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

+ +
<body>
+  <h1>Млекопитающие</h1>
+  <h2>Киты</h2>
+  <p>В данном разделе мы поговорим о китах.
+    ...продолжение данного раздела...
+  <section>
+    <h3>Лесные слоны</h3>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+    <h3>Монгольская песчанка</h3>
+      <p>Песчанки распространились далеко за пределы Монголии.
+         ...продолжение данного подраздела...
+    <h2>Рептилии</h2>
+      <p>Рептилии – это холоднокровные животные.
+          ...продолжение данного раздела...
+  </section>
+</body>
+ +

приводит к следующей структуре:

+ +
1. Млекопитающие
+   1.1 Киты (неявно задается элементом h2)
+   1.2 Лесные слоны (явным образом задается элементом раздела)
+   1.3 Монгольская песчанка (неявно задается элементом h3, который одновременно закрывает предыдущий раздел)
+2. Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел)
+
+ +

Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.

+ +

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.

+ +

Корни задания разделов

+ +

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

+ +

Например:

+ +
<section>
+  <h1>Лесные слоны</h1>
+  <section>
+    <h2>Введение</h2>
+    <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
+  </section>
+  <section>
+    <h2>Среда обитания</h2>
+    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «<cite>Лесной слон на Борнео</cite>»:</p>
+    <blockquote>
+       <h1>Борнео</h1>
+       <p>Лесной слон живет на Борнео...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

Данный пример приводит к следующей структуре:

+ +
1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+ +

Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

+ +

Разделы, не входящие в структуру

+ +

 HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

+ +
    +
  1. Элемент вспомогательного раздела {{HTMLElement("aside")}} задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
    2. +
  2. Элемент навигационного раздела {{HTMLElement("nav")}} задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
    3. +
+ +

Шапки и подвалы

+ +

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

+ +
    +
  1. Элемент шапки {{HTMLElement("header")}} задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
    2. +
  2. Элемент подвала ({{HTMLElement("footer")}}) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
    3. +
+ +

Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.

+ +

Адреса в элементах задания разделов

+ +

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.

+ +

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

+ +

Использование элементов HTML5 в браузерах, не поддерживающих HTML5

+ +

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

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.

+ +

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержа скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

+ +
<noscript>
+   <strong>Внимание!</strong>
+   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+</noscript>
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Внимание!</strong>
+     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+  </noscript>
+<![endif]-->
+ +

Заключение

+ +

Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.

+ +
{{HTML5ArticleTOC()}}
diff --git "a/files/ru/web/guide/html/\321\204\320\276\321\200\320\274\321\213_\320\262_html/index.html" "b/files/ru/web/guide/html/\321\204\320\276\321\200\320\274\321\213_\320\262_html/index.html" deleted file mode 100644 index ad5a8bc7e6..0000000000 --- "a/files/ru/web/guide/html/\321\204\320\276\321\200\320\274\321\213_\320\262_html/index.html" +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Формы в HTML -slug: Web/Guide/HTML/Формы_в_HTML -tags: - - HTML - - HTML5 - - Введение - - Интернет - - Любитель - - Новичок - - Обзор - - Руководство - - Формы -translation_of: Learn/HTML/Forms/HTML5_updates ---- -

Элементы и атрибуты форм в HTML5 предоставляют большие возможности семантической верстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.

- -

Эта статья описывает изменения в HTML-формах, представленных в HTML5. Для более подробного руководства по использованию формами, просмотрите наше обширное руководство по HTML-формам.

- -

Элемент <input>

- -

В элементе {{HTMLElement("input")}} появились новые значения для атрибута {{htmlattrxref("type", "input")}}. (Просмотрите справочник {{HTMLElement("input")}} для получения полного списка атрибутов, значений и их использования для этого элемента.)

- - - -

Также, элемент {{HTMLElement("input")}} получил новые атрибуты:

- - - -

Текстовое поле

- -

<input> с атрибутом type="text" определяет однострочное поле для ввода.

- -
<form>
-  Введите свое имя: <input type="text" name="name">
-</form>
- -

Флажок

- -

<input> с атрибутом type="checkbox" определяет флажок.

- -
<input type="checkbox" name="chk" value="" checked> Подписаться на рассылку
- -

Переключатель

- -

<input> с атрибутом type="radio" определяет радио кнопку.

- -
<form>
-  <input type="radio" name="animal" value="monkey">Обезьяна<br>
-  <input type="radio" name="animal" value="cat">Кот<br>
-  <input type="radio" name="animal" value="other">Другое
-</form>
- -

Элемент <form>

- -

Элемент {{HTMLElement("form")}} получил новый атрибут:

- - - -

Элемент <datalist>

- -

Элемент {{HTMLElement("datalist")}} представляет собой список элементов {{HTMLElement("option")}}, который необходимо предложить при вводе поля {{HTMLElement("input")}}.

- -

Вы можете использовать атрибут {{htmlattrxref("list", "input")}} в элементе {{HTMLElement("input")}}, чтобы связать текстовое поле с элементом {{HTMLElement("datalist")}}.

- -

Элемент <output>

- -

Элемент {{HTMLElement("output")}} представляет собой результат каких-либо вычислений.

- -

Вы можете использовать атрибут {{htmlattrxref("for", "output")}} для указания связи между элементом {{HTMLElement("output")}} и другими элементами в документе, которые повлияли на расчет (к примеру, поля для ввода параметров). Значением атрибута {{htmlattrxref("for", "output")}} является список ID других элементов, разделенный пробелами.

- -

{{non-standard_inline}} Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for {{HTMLElement("output")}} elements, and therefore applies the {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, and {{Cssxref(":-moz-ui-valid")}} CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").

- -

Атрибут placeholder

- -

Атрибут {{htmlattrxref("placeholder", "input")}} в элементах {{HTMLElement("input")}} и {{HTMLElement("textarea")}} отображает подсказки для пользователей, которые показывают, что можно ввести в эти поля. Текст в placeholder не должен содержать символов перевода строки или возврата каретки.

- -

Атрибут autofocus

- -

Атрибут {{htmlattrxref("autofocus", "input")}} позволяет указать для элемента формы автоматическое получение фокуса после полной загрузки страницы, если пользователь сам не переместит фокус на другой элемент, например, этот атрибут можно указать для различных полей ввода. Только один элемент в документе должен иметь этот атрибут, который содержит Boolean значение. Этот атрибут может быть установлен в {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}} элементах.  {{htmlattrxref("autofocus", "input")}} нельзя установить в элементах input c атрибутом type установленным в значение hidden (это означает, что ты не можешь автоматически устанавливать фокус в скрытых полях).

- -

DOM свойство label.control

- -

DOM интерфейс HTMLLabelElement , помимо свойств, относящихся к HTML элементу {{HTMLElement("label")}} , предоставляет дополнительное свойство  control, возвращающее поле ввода, для которого предназначен {{HTMLElement("label")}}. Оно либо указывается в атрибуте {{htmlattrxref("for", "label")}} , либо является первым вложенным полем ввода.

- -

Constraint Validation

- -

HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about the input data.

- -

If the title attribute is set on the {{HTMLElement("input")}} element, its value is used as tooltip. However, if the validation fails, this tooltip text will be replaced with the associated error message. It is possible to customize this error message using the non-standard {{htmlattrxref("x-moz-errormessage")}} attribute or when calling the setCustomValidity() method.

- -
<input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail">
- -
Note: Constraint validation is not supported on {{HTMLElement("button")}} elements in a form; to style a button based on the validity of the associated form, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class.
- -

HTML Syntax for Constraint Validation

- -

The following items in HTML5 syntax can be used to specify constraints on form data.

- - - -

In addition, you can prevent constraint validation by specifying the {{htmlattrxref("novalidate", "form")}} attribute on the {{HTMLElement("form")}}, or the {{htmlattrxref("formnovalidate", "button")}} attribute on the {{HTMLElement("button")}} element and on the {{HTMLElement("input")}} element (when {{htmlattrxref("type", "input")}} is submit or image). These attributes indicate that the form is not to be validated when it is submitted.

- -

Constraint Validation API

- -

The following DOM properties and methods related to constraint validation are available to client-side scripts:

- - - -

See also

- - -- cgit v1.2.3-54-g00ecf