{"id":322450,"date":"2021-05-01T15:00:16","date_gmt":"2021-05-01T15:00:16","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=322450"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=322450","title":{"rendered":"HTML-\u0442\u0435\u0433\u0438 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435 \u0437\u043d\u0430\u043b\u0438"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ft\/u3\/fi\/ftu3fi_ohwwkcssmndmvwt4p-me.png\" alt=\"image\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e HTML-\u0442\u0435\u0433\u0430\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0433\u043b\u0430\u0433\u043e\u043b\u044c\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c, \u0441\u0440\u0430\u0437\u0443 \u043a \u0434\u0435\u043b\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"abbr\"><code>abbr<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>abbr<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D0%B0\">\u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0443<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%90%D0%BA%D1%80%D0%BE%D0%BD%D0%B8%D0%BC\">\u0430\u043a\u0440\u043e\u043d\u0438\u043c<\/a>. \u0410\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u0438\u043b\u0438 \u0430\u043a\u0440\u043e\u043d\u0438\u043c \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>title<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;\/abbr&gt; \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0431\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0438\u043c \u0443\u0447\u0435\u043d\u044b\u043c \u0422\u0438\u043c\u043e\u043c \u0411\u0435\u0440\u043d\u0435\u0440\u0441\u043e\u043c-\u041b\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432 1986\u20141991 \u0433\u043e\u0434\u0430\u0445.<\/code><\/pre>\n<p>  <\/p>\n<p><code>abbr<\/code> \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0442\u0435\u0433\u043e\u043c <code>dfn<\/code>, \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0438\u043b\u0438 \u0442\u0435\u0440\u043c\u0438\u043d:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;p&gt;&lt;dfn&gt;&lt;abbr title=&quot;Cascading Style Sheets&quot;&gt;CSS&lt;\/abbr&gt;&lt;\/dfn&gt; - \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (\u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b).&lt;\/p&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"address\"><code>address<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>address<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435 \u0438\u043b\u0438 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u0438. \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0430\u0434\u0440\u0435\u0441 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u044b, \u0430\u0434\u0440\u0435\u0441 \u0441\u0430\u0439\u0442\u0430, \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u0434\u0440\u0435\u0441, \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u044b \u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u044f\u0445 \u0438 \u0442.\u0434.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<pre><code class=\"html\">&lt;address&gt; \u0410\u0432\u0442\u043e\u0440 \u0441\u0442\u0430\u0442\u044c\u0438: &lt;a href=&quot;mailto:ivan@mail.com&quot;&gt;\u0418\u0432\u0430\u043d \u0418\u0432\u0430\u043d\u043e\u0432&lt;\/a&gt;&lt;br \/&gt; \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442: &lt;a href=&quot;http:\/\/example.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Example.com&lt;\/a&gt;&lt;br \/&gt; \u0410\u0434\u0440\u0435\u0441: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0446\u0430\u0440\u0441\u0442\u0432\u043e, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u043e\u0441\u0443\u0434\u0430\u0440\u0441\u0442\u0432\u043e &lt;address&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"audio\"><code>audio<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>audio<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u043c\u0443\u0437\u044b\u043a\u0430 \u0438 \u0434\u0440.) \u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e-\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>src<\/code>, \u043b\u0438\u0431\u043e \u0442\u0435\u0433 <code>source<\/code>. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 (\u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u0430 \u0430\u0443\u0434\u0438\u043e-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>type<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 <code>&lt;audio&gt;<\/code> \u0438 <code>&lt;\/audio&gt;<\/code> \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>audio<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0430\u0443\u0434\u0438\u043e: <code>MP3<\/code>, <code>WAV<\/code> \u0438 <code>OGG<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>autoplay<\/code> \u2014 \u0430\u0432\u0442\u043e\u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 (\u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432)<\/li>\n<li><code>controls<\/code> \u2014 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>audio<\/code>, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435)<\/li>\n<li><code>loop<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f, \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430<\/li>\n<li><code>muted<\/code> \u2014 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0437\u0432\u0443\u043a\u0430 (\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0442\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 <code>autoplay<\/code>)<\/li>\n<li><code>preload<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u0430\u0443\u0434\u0438\u043e-\u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>auto<\/code>, <code>metadata<\/code>, <code>none<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>none<\/code> \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u0443\u0434\u0438\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>JavaScript<\/code><\/li>\n<li><code>src<\/code> \u2014 \u043f\u0443\u0442\u044c \u043a \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u0443<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;audio controls&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"plaintext\">  \u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &quot;audio&quot;. &lt;\/audio&gt;  &lt;!-- \u0438\u043b\u0438 --&gt; &lt;audio src=&quot;music.mp3&quot; preload=&quot;metadata&quot; controls muted loop&gt;\u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &quot;audio&quot;.&lt;\/audio&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"video\"><code>video<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>video<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u0432\u0438\u0434\u0435\u043e\u043a\u043b\u0438\u043f \u0438 \u0434\u0440.) \u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e-\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>src<\/code>, \u043b\u0438\u0431\u043e \u0442\u0435\u0433 <code>source<\/code>. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 (\u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u0430 \u0432\u0438\u0434\u0435\u043e-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>type<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 <code>&lt;video&gt;<\/code> \u0438 <code>&lt;\/video&gt;<\/code> \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>video<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0432\u0438\u0434\u0435\u043e: <code>MP4<\/code>, <code>WebM<\/code> \u0438 <code>OGG<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>autoplay<\/code> \u2014 \u0430\u0432\u0442\u043e\u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 (\u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432)<\/li>\n<li><code>controls<\/code> \u2014 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/li>\n<li><code>loop<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f, \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430<\/li>\n<li><code>muted<\/code> \u2014 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0437\u0432\u0443\u043a\u0430 (\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0442\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 <code>autoplay<\/code>)<\/li>\n<li><code>preload<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u0432\u0438\u0434\u0435\u043e-\u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>auto<\/code>, <code>metadata<\/code>, <code>none<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>none<\/code> \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0432\u0438\u0434\u0435\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>JavaScript<\/code><\/li>\n<li><code>src<\/code> \u2014 \u043f\u0443\u0442\u044c \u043a \u0432\u0438\u0434\u0435\u043e\u0444\u0430\u0439\u043b\u0443<\/li>\n<li><code>poster<\/code> \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0435 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u0434\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/li>\n<li><code>width<\/code> \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/li>\n<li><code>height<\/code> \u2014 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;video width=&quot;320&quot; height=&quot;240&quot; controls&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"plaintext\">  \u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &quot;\u0432\u0438\u0434\u0435\u043e&quot;. &lt;\/video&gt;  &lt;!-- \u0438\u043b\u0438 --&gt; &lt;!-- \u0422\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b --&gt; &lt;video src=&quot;movie.mp4&quot; autoplay muted loop&gt;\u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &quot;\u0432\u0438\u0434\u0435\u043e&quot;.&lt;\/video&gt;<\/code><\/pre>\n<p>  <\/p>\n<p><code>DOM API<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e <a href=\"https:\/\/www.w3schools.com\/TAGS\/ref_av_dom.asp\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/a> \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <code>audio<\/code> \u0438 <code>video<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"base\"><code>base<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>base<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0443\u0442\u044c (<code>URL<\/code>) \u0438\/\u0438\u043b\u0438 \u0446\u0435\u043b\u044c (<code>target<\/code>) \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u0433\u0435 <code>head<\/code> \u0438 \u0438\u043c\u0435\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>href<\/code> \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0443\u0442\u044c<\/li>\n<li><code>target<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>target<\/code> \u0432\u0441\u0435\u0445 \u0433\u0438\u043f\u0435\u0440\u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u0444\u043e\u0440\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>_blank<\/code>, <code>_parent<\/code>, <code>_self<\/code> \u0438 <code>_top<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;head&gt;   &lt;base href=&quot;http:\/\/example.com\/&quot; target=&quot;_blank&quot;&gt; &lt;\/head&gt;  &lt;body&gt;   &lt;header&gt;     &lt;nav&gt;       &lt;!-- http:\/\/example.com\/product.html --&gt;       &lt;a href=&quot;product.html&quot;&gt;\u041f\u0440\u043e\u0434\u0443\u043a\u0442&lt;\/a&gt;     &lt;\/nav&gt;   &lt;\/header&gt;   &lt;main&gt;     &lt;!-- http:\/\/example.com\/images\/happy_face.png --&gt;     &lt;img src=&quot;images\/happy_face.png&quot; alt=&quot;&quot; \/&gt;   &lt;\/main&gt;   &lt;footer&gt;     &lt;nav&gt;       &lt;!-- http:\/\/example.com\/contacts.html --&gt;       &lt;a href=&quot;contacts.html&quot;&gt;\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b&lt;\/a&gt;     &lt;\/nav&gt;   &lt;\/footer&gt; &lt;\/body&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"blockquote-i-cite\"><code>blockquote<\/code> \u0438 <code>cite<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>blockquote<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430. \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>cite<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;blockquote cite=&quot;https:\/\/ru.wikipedia.org\/wiki\/JavaScript&quot;&gt; JavaScript - \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0435\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439, \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u0438. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 ECMAScript (\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 ECMA-262). &lt;\/blockquote&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>cite<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0440\u0430\u0431\u043e\u0442\u044b (\u043a\u043d\u0438\u0433\u0438, \u0441\u0442\u0438\u0445\u043e\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f, \u043f\u0435\u0441\u043d\u0438, \u0444\u0438\u043b\u044c\u043c\u0430, \u043a\u0430\u0440\u0442\u0438\u043d\u044b, \u0441\u043a\u0443\u043b\u044c\u043f\u0442\u0443\u0440\u044b \u0438 \u0442.\u0434.). \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0437 \u0441\u0435\u0431\u044f \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0446\u0438\u0442\u0430\u0442\u044b.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;p&gt;\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f JavaScript \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 &lt;cite&gt;&quot;\u0412\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 JS&quot;&lt;\/cite&gt; \u041a\u0430\u0439\u043b\u0430 \u0421\u0438\u043c\u043f\u0441\u043e\u043d\u0430.&lt;\/p&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"code\"><code>code<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>code<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;p&gt;HTML-\u0442\u0435\u0433 `button` \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443.&lt;\/p&gt;  &lt;p&gt;CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e `background-color` \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.&lt;\/p&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u0430 \u043a\u043e\u0434\u0430 <code>code<\/code> \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0442\u0435\u0433\u043e\u043c <code>pre<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;pre&gt;   `     const name = prompt('\u041a\u0430\u043a \u0412\u0430\u0441 \u0437\u043e\u0432\u0443\u0442?')     if (name?.trim()) alert(`\u041f\u0440\u0438\u0432\u0435\u0442, ${name}!`)     else console.info('\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0436\u0435\u043b\u0430\u043b \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c')   ` &lt;\/pre&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"datalist\"><code>datalist<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>datalist<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c &quot;\u0430\u0432\u0442\u043e\u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435&quot; \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>input<\/code>: \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0430 \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u043b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a.<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>id<\/code> \u0442\u0435\u0433\u0430 <code>datalist<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>list<\/code> \u0442\u0435\u0433\u0430 <code>input<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;!-- \u0410\u0442\u0440\u0438\u0431\u0443\u0442 `for` \u0442\u0435\u0433\u0430 `label` \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c `id` \u0442\u0435\u0433\u0430 `input` --&gt; &lt;label for=&quot;browser&quot;&gt;\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430:&lt;\/label&gt; &lt;input list=&quot;browsers&quot; id=&quot;browser&quot;&gt;  &lt;datalist id=&quot;browsers&quot;&gt;   &lt;option value=&quot;Edge&quot;&gt;   &lt;option value=&quot;Firefox&quot;&gt;   &lt;option value=&quot;Chrome&quot;&gt;   &lt;option value=&quot;Opera&quot;&gt;   &lt;option value=&quot;Safari&quot;&gt; &lt;\/datalist&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>options<\/code> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Datalist<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"dl-dt-i-dd\"><code>dl<\/code>, <code>dt<\/code> \u0438 <code>dd<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>dl<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0439 (\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0439, \u0438\u0437\u0432\u0438\u043d\u044f\u044e\u0441\u044c \u0437\u0430 \u0442\u0430\u0432\u0442\u043e\u043b\u043e\u0433\u0438\u044e). \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0442\u0435\u0433\u0430\u043c\u0438 <code>dt<\/code>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0438\u043b\u0438 \u0442\u0435\u0440\u043c\u0438\u043d, \u0438 <code>dd<\/code>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 <code>dd<\/code> \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u044b, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0441\u0441\u044b\u043b\u043a\u0438, \u0441\u043f\u0438\u0441\u043a\u0438 \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;dl&gt;   &lt;dt&gt;\u041a\u043e\u0444\u0435&lt;\/dt&gt;   &lt;dd&gt;\u0427\u0435\u0440\u043d\u044b\u0439 \u0433\u043e\u0440\u044f\u0447\u0438\u0439 \u043d\u0430\u043f\u0438\u0442\u043e\u043a&lt;\/dd&gt;   &lt;dt&gt;\u041c\u043e\u043b\u043e\u043a\u043e&lt;\/dt&gt;   &lt;dd&gt;\u0411\u0435\u043b\u044b\u0439 \u0445\u043e\u043b\u043e\u0434\u043d\u044b\u0439 \u043d\u0430\u043f\u0438\u0442\u043e\u043a&lt;\/dd&gt; &lt;\/dl&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"details\"><code>details<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>details<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439. \u041e\u043d \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>JavaScript<\/code>. \u0412 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043e\u043d \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>details<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 <code>details<\/code> \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043b\u044e\u0431\u044b\u0435 \u0442\u0435\u0433\u0438.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <code>details<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u0433 <code>summary<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>details<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>open<\/code> (\u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u2014 <code>details[open]<\/code> \u0438\u043b\u0438 JavaScript-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u2014 <code>document.querySelector('[open]')<\/code>).<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;details&gt;   &lt;summary&gt;\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a - \u0432\u0438\u0434\u0438\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &quot;details&quot;&lt;\/summary&gt;   &lt;p&gt;\u0421\u043a\u0440\u044b\u0442\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 - \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f&lt;\/p&gt; &lt;\/details&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"dialog\"><code>dialog<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>dialog<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f &quot;\u043f\u043e\u043f\u0430\u043f\u043e\u0432&quot; \u0438 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>dialog<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>dialog<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>open<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;dialog open&gt;\u041e\u0442\u043a\u0440\u044b\u0442\u043e\u0435 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e&lt;\/dialog&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c <code>Dialog<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>JavaScript<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u0430\u043a <code>show()<\/code>, <code>close()<\/code> \u0438 <code>showModal()<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>open<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"figure\"><code>figure<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>figure<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u044b\u0439 (\u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u044b\u0439) \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b, \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>figure<\/code> \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043f\u043e\u0442\u043e\u043a\u0443 (main flow), \u0435\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u044f (\u043c\u0435\u0441\u0442\u043e\u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435) \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>figure<\/code> \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u043e\u0442\u043e\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u043a <code>figure<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u0433 <code>figcaption<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;figure&gt;   &lt;img src=&quot;v8-compiler-pipeline.png&quot; alt=&quot;V8 compiler pipeline&quot; style=&quot;width:100%&quot;&gt;   &lt;figcaption&gt;\u0420\u0438\u0441. 1 - \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 &quot;\u0434\u0432\u0438\u0436\u043a\u043e\u043c&quot; JavaScript V8.&lt;\/figcaption&gt; &lt;\/figure&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"meter\"><code>meter<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>meter<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043a\u0430\u043b\u044f\u0440\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0438\u043b\u0438 \u0434\u0440\u043e\u0431\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, <code>meter<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u0435\u0440\u0443 \u0447\u0435\u0433\u043e-\u043b\u0438\u0431\u043e (gauge).<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u0442\u0435\u0433 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 <code>meter<\/code> \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433 <code>label<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>value<\/code> \u2014 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 <code>min<\/code> \u0438 <code>max<\/code><\/li>\n<li><code>min<\/code> \u2014 \u043d\u0438\u0436\u043d\u044f\u044f \u0447\u0438\u0441\u043b\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430<\/li>\n<li><code>max<\/code> \u2014 \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0447\u0438\u0441\u043b\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430<\/li>\n<li><code>low<\/code> \u2014 \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0447\u0438\u0441\u043b\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430. \u0414\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 <code>min<\/code>, \u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 <code>high<\/code> \u0438 <code>max<\/code><\/li>\n<li><code>high<\/code> \u2014 \u043d\u0438\u0436\u043d\u044f\u044f \u0447\u0438\u0441\u043b\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430<\/li>\n<li><code>optimum<\/code> \u2014 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 <code>min<\/code> \u0438 <code>max<\/code>. \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 <code>optimum<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 <code>min<\/code> \u0438 <code>low<\/code>, \u0437\u043d\u0430\u0447\u0438\u0442, \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0438\u0436\u043d\u0438\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d<\/li>\n<li><code>form<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>form<\/code>, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u0432\u044f\u0437\u0430\u043d <code>meter<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;label for=&quot;disk_d&quot;&gt;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0441\u043a\u0430 &quot;D&quot;:&lt;\/label&gt; &lt;meter id=&quot;disk_d&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;60&quot;&gt;60%&lt;\/meter&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0437\u0430\u0440\u044f\u0434\u0430 \u0431\u0430\u0442\u0430\u0440\u0435\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>meter<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ &lt;meter id=&quot;meter&quot; max=&quot;100&quot;&gt;&lt;\/meter&gt; if ('getBattery' in navigator) {   navigator.getBattery()     .then(({ level }) =&gt; {       meter.value = level * 100     }) }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"progress\"><code>progress<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>progress<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u0442\u0435\u0433 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0440\u044b \u0447\u0435\u0433\u043e-\u043b\u0438\u0431\u043e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 <code>progress<\/code> \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433 <code>label<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>max<\/code> \u2014 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f <code>1<\/code><\/li>\n<li><code>value<\/code> \u2014 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;label for=&quot;file&quot;&gt;\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438:&lt;\/label&gt; &lt;progress id=&quot;file&quot; max=&quot;100&quot; value=&quot;32&quot;&gt;32%&lt;\/progress&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u0439 \u0442\u0430\u0439\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ &lt;progress id=&quot;progress&quot; value=&quot;0&quot; max=&quot;10&quot;&gt;&lt;\/progress&gt; const timerId = setInterval(() =&gt; {   progress.value += 1   if (progress.value === progress.max) {     progress.remove()     clearInterval(timerId)   } }, 1000)<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"output\"><code>output<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>output<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>for<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c\u0438 \u0434\u043b\u044f \u0435\u0433\u043e \u0432\u044b\u0438\u0447\u0441\u043b\u0435\u043d\u0438\u044f<\/li>\n<li><code>form<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>form<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 <code>output<\/code><\/li>\n<li><code>name<\/code> \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>output<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;form oninput=&quot;x.value=parseInt(a.value)+parseInt(b.value)&quot;&gt;   &lt;input type=&quot;number&quot; id=&quot;a&quot; value=&quot;25&quot; \/&gt;   +   &lt;input type=&quot;number&quot; id=&quot;b&quot; value=&quot;50&quot; \/&gt;   =   &lt;output name=&quot;x&quot; for=&quot;a b&quot;&gt;75&lt;\/output&gt; &lt;\/form&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"picture\"><code>picture<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>picture<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439).<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u0442\u0435\u0433 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (viewport width) \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>picture<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0432\u0430 \u0442\u0435\u0433\u0430: \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 <code>source<\/code> \u0438 \u043e\u0434\u0438\u043d <code>img<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>source<\/code> \u0441 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u043c \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>img<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u0441 <code>source<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>srcset<\/code>, \u0430 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 \u2014 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>media<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;picture&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"plaintext\">  &lt;img src=&quot;default.jpg&quot; alt=&quot;&quot; style=&quot;width:auto;&quot;&gt; &lt;\/picture&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"template\"><code>template<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>template<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u0442\u0435\u0433 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043e, \u043d\u043e \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 (\u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443).<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 <code>template<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>JavaScript<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;h1&gt;\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a&lt;\/h1&gt;   &lt;p&gt;\u0418 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0442\u0435\u043a\u0441\u0442&lt;\/p&gt; &lt;\/template&gt;  &lt;button id=&quot;button&quot;&gt;\u042d\u0442\u043e \u043d\u0435 \u043a\u043d\u043e\u043f\u043a\u0430&lt;\/button&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"plaintext\">((body, { content }) =&gt; {   button.onclick = () =&gt; {     body.append(content.cloneNode(true))   } })(document.body, document.querySelector('template'))<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"time\"><code>time<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>time<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (\u0438\u043b\u0438 \u0434\u0430\u0442\u0443 \u0438 \u0432\u0440\u0435\u043c\u044f).<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>datetime<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u043c\u0430\u0448\u0438\u043d\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;p&gt;\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u044e\u0434\u0438 \u0438\u0441\u043a\u0440\u0435\u043d\u043d\u0435 \u0432\u0435\u0440\u0438\u043b\u0438 \u0432 \u0442\u043e, \u0447\u0442\u043e \u0432 &lt;time datetime=&quot;2000-01-01 00:01&quot;&gt;\u043f\u043e\u043b\u043d\u043e\u0447\u044c 2000 \u0433\u043e\u0434\u0430&lt;\/time&gt; \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u0442 \u043a\u043e\u043d\u0435\u0446 \u0441\u0432\u0435\u0442\u0430, \u043d\u043e, \u043a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0441\u0432\u0435\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0441\u044f. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043e\u043d \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f \u0432 &lt;time datetime=&quot;3000-01-01 00:01&quot;&gt;\u043f\u043e\u043b\u043d\u043e\u0447\u044c 3000 \u0433\u043e\u0434\u0430&lt;\/time&gt;, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e\u0447\u043d\u043e&lt;\/p&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"noscript\"><code>noscript<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>noscript<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d <code>JavaScript<\/code>. \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0432 \u0442\u0435\u0433\u0435 <code>head<\/code>, \u0442\u0430\u043a \u0438 \u0432 \u0442\u0435\u0433\u0435 <code>body<\/code>. \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>noscript<\/code> \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0435 \u0442\u0435\u0433\u0438 \u043a\u0430\u043a <code>link<\/code>, <code>style<\/code> \u0438 <code>meta<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script&gt; document.write('\u041e\u0434\u043d\u0438 \u0434\u0438\u0432\u044b \u0434\u0430 \u0441\u043f\u0430\u043d\u044b... \u0413\u0434\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430?') &lt;\/script&gt; &lt;noscript&gt;\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 JavaScript&lt;\/noscript&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"drugie-tegi-v-forme-shpagralok\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0433\u0438 \u0432 \u0444\u043e\u0440\u043c\u0435 \u0448\u043f\u0430\u0433\u0440\u0430\u043b\u043e\u043a<\/h2>\n<p>  <\/p>\n<h3 id=\"semanticheskoe-sekcionirovanie-stranicy\">\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 &quot;\u0441\u0435\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435&quot; \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;body&gt;   &lt;header&gt;     &lt;h1&gt;Page Title&lt;\/h1&gt;     &lt;nav&gt;       &lt;ul&gt;         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link1&lt;\/a&gt;&lt;\/li&gt;         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link2&lt;\/a&gt;&lt;\/li&gt;       &lt;\/ul&gt;     &lt;\/nav&gt;     &lt;img src=&quot;images\/logo.png&quot; alt=&quot;&quot; \/&gt;   &lt;\/header&gt;    &lt;aside&gt;     &lt;h2&gt;Aside Title&lt;\/h2&gt;     &lt;p&gt;Aside Content&lt;\/p&gt;   &lt;\/aside&gt;    &lt;main&gt;     &lt;article&gt;       &lt;h2&gt;Atricle Title&lt;\/h2&gt;       &lt;section&gt;         &lt;h3&gt;Section Title&lt;\/h3&gt;         &lt;p&gt;Section Content&lt;\/p&gt;       &lt;\/section&gt;     &lt;\/article&gt;      &lt;div&gt;       &lt;section&gt;         &lt;h2&gt;Section2 Title&lt;\/h2&gt;         &lt;p&gt;Section2 Content&lt;\/p&gt;       &lt;\/section&gt;       &lt;section&gt;         &lt;p&gt;Section3 Content&lt;\/p&gt;       &lt;\/section&gt;     &lt;\/div&gt;   &lt;\/main&gt;    &lt;footer&gt;     &lt;nav&gt;       &lt;ol&gt;         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link3&lt;\/a&gt;&lt;\/li&gt;         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link4&lt;\/a&gt;&lt;\/li&gt;       &lt;\/ol&gt;     &lt;\/nav&gt;     &lt;div&gt;       &lt;p&gt;Block text &amp;amp; &lt;span&gt;inline text&lt;\/span&gt;&lt;\/p&gt;     &lt;\/div&gt;   &lt;\/footer&gt; &lt;\/body&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"stilizaciya-teksta\">\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430<\/h3>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;p&gt;   \u0422\u0435\u043a\u0441\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c     &lt;b&gt;\u043f\u043e\u043b\u0443\u0436\u0438\u0440\u043d\u044b\u043c&lt;\/b&gt;,     &lt;strong&gt;\u043f\u043e\u043b\u0443\u0436\u0438\u0440\u043d\u044b\u043c \u0438 &quot;\u0432\u0430\u0436\u043d\u044b\u043c&quot;&lt;\/strong&gt;,     &lt;i&gt;&quot;\u043d\u0430\u043a\u043b\u043e\u043d\u043d\u044b\u043c&quot;&lt;\/i&gt;,     &lt;em&gt;\u043d\u0430\u043a\u043b\u043e\u043d\u043d\u044b\u043c \u0438 \u0432\u0430\u0436\u043d\u044b\u043c&lt;\/em&gt;,     &lt;small&gt;\u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c&lt;\/small&gt;,     &lt;del&gt;\u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430&lt;\/del&gt;,     &lt;ins&gt;\u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442&lt;\/ins&gt;,     &lt;u&gt;\u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044b\u043c&lt;\/u&gt;     &lt;s&gt;\u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c&lt;\/s&gt;.    \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439     &lt;q&gt;\u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0446\u0438\u0442\u0430\u0442\u0443&lt;\/q&gt;,     &lt;kbd&gt;\u0432\u0432\u043e\u0434 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b&lt;\/kbd&gt;,     &lt;samp&gt;\u0432\u044b\u0432\u043e\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b&lt;\/samp&gt;.    \u0422\u0435\u043a\u0441\u0442 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f     &lt;sup&gt;\u043d\u0430\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0439&lt;\/sup&gt; \u0438     &lt;sub&gt;\u043f\u043e\u0434 \u043d\u0435\u0439&lt;\/sub&gt;.    \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c &lt;mark&gt;\u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u043c&lt;\/mark&gt;.    \u0414\u043b\u0438\u043d\u043d\u044b\u0439\u0442\u0435\u043a\u0441\u0442\u043c\u043e\u0436\u043d\u043e\u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c&lt;wbr \/&gt;\u0432\u043d\u0443\u0436\u043d\u043e\u043c\u043c\u0435\u0441\u0442\u0435.    \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c&lt;br \/&gt;\u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c&lt;hr \/&gt;\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0435\u0440\u0442\u043e\u0439. &lt;\/p&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"forma\">\u0424\u043e\u0440\u043c\u0430<\/h3>\n<p>  <\/p>\n<p>\u0421\u0438\u043c\u0432\u043e\u043b <code>\/<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 <code>\u0438\u043b\u0438<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;form   action=&quot;URL&quot;   autocomplete=&quot;on \/ off&quot;   enctype=&quot;&quot;   id=&quot;form&quot;   method=&quot;GET \/ POST&quot;   name=&quot;form&quot;   novalidate &gt;   &lt;fieldset&gt;     &lt;legend&gt;Title&lt;\/legend&gt;      &lt;label for=&quot;first_name&quot;&gt;\u0418\u043c\u044f:&lt;\/label&gt;     &lt;input type=&quot;text&quot; id=&quot;first_name&quot;&gt;      &lt;label&gt;\u0424\u0430\u043c\u0438\u043b\u0438\u044f:       &lt;input type=&quot;text&quot;&gt;     &lt;\/label&gt;   &lt;\/fieldset&gt;    &lt;select     autofocus     disabled     form=&quot;form&quot;     multiple     name=&quot;select&quot;     required     size=&quot;10&quot;   &gt;     &lt;optgroup label=&quot;Group1&quot;&gt;       &lt;option         value=&quot;option1&quot;         disabled         label=&quot;option1&quot;       &gt;&lt;\/option&gt;       &lt;option value=&quot;option2&quot; selected&gt;&lt;\/option&gt;     &lt;\/optgroup&gt;      &lt;optgroup label=&quot;Group2&quot; disabled&gt;       &lt;option value=&quot;option3&quot;&gt;&lt;\/option&gt;     &lt;\/optgroup&gt;      &lt;option value=&quot;option4&quot;&gt;&lt;\/option&gt;   &lt;\/select&gt;    &lt;textarea     autofocus     cols=&quot;30&quot;     disabled     form=&quot;form&quot;     maxlength=&quot;50&quot;     name=&quot;textarea&quot;     placeholder=&quot;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442...&quot;     readonly     required     rows=&quot;10&quot;     wrap=&quot;hard \/ soft&quot;   &gt;&lt;\/textarea&gt;    &lt;button     type=&quot;submit&quot;     autofocus     disabled     form=&quot;form&quot;     formaction=&quot;URL&quot;     formenctype=&quot;&quot;     formmethod=&quot;GET \/ POST&quot;     formnovalidate     name=&quot;submit&quot;   &gt;     \u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b   &lt;\/button&gt;   &lt;button type=&quot;reset&quot;&gt;\u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0444\u043e\u0440\u043c\u044b (\u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043f\u043e\u043b\u0435\u0439 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445)&lt;\/button&gt;   &lt;button type=&quot;button&quot;&gt;\u041f\u0440\u043e\u0441\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430&lt;\/button&gt; &lt;\/form&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"polya-dlya-vvoda-dannyh\">\u041f\u043e\u043b\u044f \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/h3>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;input type=&quot;button&quot;&gt; &lt;input type=&quot;checkbox&quot;&gt; &lt;input type=&quot;color&quot;&gt; &lt;input type=&quot;date&quot;&gt; &lt;input type=&quot;datetime-local&quot;&gt; &lt;input type=&quot;email&quot;&gt; &lt;input type=&quot;file&quot;&gt; &lt;input type=&quot;hidden&quot;&gt; &lt;input type=&quot;image&quot;&gt; &lt;input type=&quot;month&quot;&gt; &lt;input type=&quot;number&quot;&gt; &lt;input type=&quot;password&quot;&gt; &lt;input type=&quot;radio&quot;&gt; &lt;input type=&quot;range&quot;&gt; &lt;input type=&quot;reset&quot;&gt; &lt;input type=&quot;search&quot;&gt; &lt;input type=&quot;submit&quot;&gt; &lt;input type=&quot;tel&quot;&gt; &lt;input type=&quot;text&quot;&gt; (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) &lt;input type=&quot;time&quot;&gt; &lt;input type=&quot;url&quot;&gt; &lt;input type=&quot;week&quot;&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>accept<\/code> \u2014 MIME-\u0442\u0438\u043f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;file&quot;<\/code>). \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, .png<\/code>, <code>audio\/*<\/code>, <code>video\/*<\/code>, <code>image\/*<\/code>, <code>\u043c\u0435\u0434\u0438\u0430 \u0442\u0438\u043f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, json<\/code><\/li>\n<li><code>alt<\/code> \u2014 \u043f\u043e\u0434\u043f\u0438\u0441\u044c<\/li>\n<li><code>autocomplete<\/code> \u2014 <code>on \/ off<\/code><\/li>\n<li><code>autofocus<\/code><\/li>\n<li><code>checked<\/code> \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;checked&quot;<\/code> \u0438\u043b\u0438 <code>type=&quot;radio&quot;<\/code><\/li>\n<li><code>disabled<\/code><\/li>\n<li><code>form<\/code><\/li>\n<li><code>formaction<\/code> \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;submit&quot;<\/code> \u0438\u043b\u0438 <code>type=&quot;image&quot;<\/code><\/li>\n<li><code>formenctype<\/code> \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;submit&quot;<\/code> \u0438\u043b\u0438 <code>type=&quot;image&quot;<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>application\/x-www-form-urlencoded<\/code>, <code>multipart\/form-data<\/code>, <code>text\/plain<\/code><\/li>\n<li><code>formmethod<\/code> \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;submit&quot;<\/code> \u0438\u043b\u0438 <code>type=&quot;image&quot;<\/code> (<code>get \/ post<\/code>)<\/li>\n<li><code>formnovalidate<\/code> \u2014 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u043e\u0440\u043c\u044b<\/li>\n<li><code>formtarget<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0433\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;submit&quot;<\/code> \u0438\u043b\u0438 <code>type=&quot;image&quot;<\/code>). \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>_blank<\/code>, <code>_self<\/code>, <code>_parent<\/code>, <code>_top<\/code>, <code>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0430<\/code><\/li>\n<li><code>height<\/code> \u2014 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;image&quot;<\/code>)<\/li>\n<li><code>list<\/code><\/li>\n<li><code>max<\/code> \u2014 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0447\u0438\u0441\u043b\u043e \u0438\u043b\u0438 \u0434\u0430\u0442\u0430)<\/li>\n<li><code>maxlength<\/code> \u2014 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 (\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432)<\/li>\n<li><code>min<\/code> \u2014 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0447\u0438\u0441\u043b\u043e \u0438\u043b\u0438 \u0434\u0430\u0442\u0430)<\/li>\n<li><code>minlength<\/code> \u2014 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 (\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432)<\/li>\n<li><code>multiple<\/code> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432<\/li>\n<li><code>name<\/code><\/li>\n<li><code>pattern<\/code> \u2014 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f<\/li>\n<li><code>placeholder<\/code><\/li>\n<li><code>readonly<\/code><\/li>\n<li><code>required<\/code><\/li>\n<li><code>size<\/code> \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 \u043f\u043e\u043b\u044f<\/li>\n<li><code>src<\/code> \u2014 \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;image&quot;<\/code>)<\/li>\n<li><code>step<\/code> \u2014 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b (\u0448\u0430\u0433) \u043c\u0435\u0436\u0434\u0443 <code>min<\/code> \u0438 <code>max<\/code><\/li>\n<li><code>type<\/code><\/li>\n<li><code>value<\/code><\/li>\n<li><code>width<\/code> \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u043f\u043e\u043b\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>type=&quot;image&quot;<\/code>)<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0430\u0434\u0440\u0435\u0441\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u044b \u0438 \u043f\u0430\u0440\u043e\u043b\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;form&gt;   &lt;input     type=&quot;email&quot;     id=&quot;email&quot;     name=&quot;email&quot;     pattern=&quot;[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$&quot;     required   \/&gt;    &lt;input     type=&quot;password&quot;     id=&quot;password&quot;     name=&quot;password&quot;     pattern=&quot;(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}&quot;     title=&quot;\u041f\u0430\u0440\u043e\u043b\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 8 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0446\u0438\u0444\u0440\u0443, \u043e\u0434\u043d\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u043d\u0443\u044e (\u0437\u0430\u0433\u043b\u0430\u0432\u043d\u0443\u044e) \u0431\u0443\u043a\u0432\u0443 \u0438 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u0447\u043a\u0443\u044e \u0431\u0443\u043a\u0432\u0443&quot;     required   \/&gt;   &lt;input type=&quot;submit&quot; \/&gt; &lt;\/form&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"tablica\">\u0422\u0430\u0431\u043b\u0438\u0446\u0430<\/h3>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;table&gt;   &lt;caption&gt;     Table Title   &lt;\/caption&gt;   &lt;colgroup&gt;     &lt;col span=&quot;2&quot; \/&gt;     &lt;col \/&gt;   &lt;\/colgroup&gt;   &lt;thead&gt;     &lt;tr&gt;       &lt;th         abbr=&quot;H1&quot;         colspan=&quot;2&quot;         rowspan=&quot;2&quot;         scope=&quot;col \/ colgroup \/ row \/ rowgroup&quot;       &gt;         Heading1       &lt;\/th&gt;       &lt;th&gt;Heading2&lt;\/th&gt;     &lt;\/tr&gt;   &lt;\/thead&gt;   &lt;tbody&gt;     &lt;tr&gt;       &lt;td colspan=&quot;2&quot; rowspan=&quot;2&quot;&gt;1-1&lt;\/td&gt;       &lt;td&gt;1-2&lt;\/td&gt;     &lt;\/tr&gt;     &lt;tr&gt;       &lt;td&gt;2-1&lt;\/td&gt;       &lt;td&gt;2-2&lt;\/td&gt;     &lt;\/tr&gt;   &lt;\/tbody&gt;   &lt;tfoot&gt;     &lt;tr&gt;       &lt;td&gt;3-1&lt;\/td&gt;       &lt;td&gt;3-2&lt;\/td&gt;     &lt;\/tr&gt;   &lt;\/tfoot&gt; &lt;\/table&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u0433\u0438 <code>colgroup<\/code> \u0438 <code>col<\/code> \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"posleslovie\">\u041f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 HTML-\u0442\u0435\u0433\u0438. \u0421 \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/www.w3schools.com\/TAGS\/default.ASP\">\u0437\u0434\u0435\u0441\u044c<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTML\/Element\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0412\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f\u0445 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u0433\u0438 <code>map<\/code> \u0438 <code>area<\/code>, \u043d\u043e \u0441 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u043f\u0440\u044f\u0436\u0435\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c (\u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0440\u0442\u044b, \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439 \u043e\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0442.\u0434.), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0438\u0445 \u0431\u0435\u0437 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u0422\u0430\u043a\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0442\u0435\u0433\u0438, \u043a\u0430\u043a <code>svg<\/code> \u0438 <code>canvas<\/code>, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439, \u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430 \u043e \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f (\u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043e\u0434\u043d\u0430).<\/p>\n<p>  <\/p>\n<hr>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0438 <a href=\"https:\/\/macloud.ru\/?partner=4189mjxpzx\">\u0432\u0438\u0440\u0442\u0443\u0430\u043b\u043a\u0438<\/a> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u044b\u0448\u0435 \u0438\u043b\u0438 \u043a\u043b\u0438\u043a\u043d\u0443\u0432 \u043d\u0430 \u0431\u0430\u043d\u043d\u0435\u0440 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 10% \u0441\u043a\u0438\u0434\u043a\u0443 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0441\u044f\u0446 \u0430\u0440\u0435\u043d\u0434\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438!<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/macloud.ru\/?partner=4189mjxpzx&amp;utm_source=habr&amp;utm_medium=original&amp;utm_campaign=igor\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/et\/1a\/yp\/et1aypandyuamqprsz3m2ntm4ky.png\"><\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/macloud\/blog\/555400\/\"> https:\/\/habr.com\/ru\/company\/macloud\/blog\/555400\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ft\/u3\/fi\/ftu3fi_ohwwkcssmndmvwt4p-me.png\" alt=\"image\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e HTML-\u0442\u0435\u0433\u0430\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0433\u043b\u0430\u0433\u043e\u043b\u044c\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c, \u0441\u0440\u0430\u0437\u0443 \u043a \u0434\u0435\u043b\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"abbr\"><code>abbr<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>abbr<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D0%B0\">\u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0443<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%90%D0%BA%D1%80%D0%BE%D0%BD%D0%B8%D0%BC\">\u0430\u043a\u0440\u043e\u043d\u0438\u043c<\/a>. \u0410\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u0438\u043b\u0438 \u0430\u043a\u0440\u043e\u043d\u0438\u043c \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>title<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;\/abbr&gt; \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0431\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0438\u043c \u0443\u0447\u0435\u043d\u044b\u043c \u0422\u0438\u043c\u043e\u043c \u0411\u0435\u0440\u043d\u0435\u0440\u0441\u043e\u043c-\u041b\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432 1986\u20141991 \u0433\u043e\u0434\u0430\u0445.<\/code><\/pre>\n<p>  <\/p>\n<p><code>abbr<\/code> \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0442\u0435\u0433\u043e\u043c <code>dfn<\/code>, \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0438\u043b\u0438 \u0442\u0435\u0440\u043c\u0438\u043d:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;p&gt;&lt;dfn&gt;&lt;abbr title=&quot;Cascading Style Sheets&quot;&gt;CSS&lt;\/abbr&gt;&lt;\/dfn&gt; - \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (\u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b).&lt;\/p&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"address\"><code>address<\/code><\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>address<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435 \u0438\u043b\u0438 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u0438. \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0430\u0434\u0440\u0435\u0441 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u044b, \u0430\u0434\u0440\u0435\u0441 \u0441\u0430\u0439\u0442\u0430, \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u0434\u0440\u0435\u0441, \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u044b \u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u044f\u0445 \u0438 \u0442.\u0434.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-322450","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322450"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322450\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}