{"id":391843,"date":"2024-06-29T10:03:37","date_gmt":"2024-06-29T10:03:37","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=391843"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=391843","title":{"rendered":"<span>CSS \u0438 XPath \u0434\u043b\u044f QA: \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438, \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c\u2026<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/3b4\/9a7\/457\/3b49a7457510c2c9ccd4f41ed7ef926d.jpg\" width=\"2928\" height=\"1632\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3b4\/9a7\/457\/3b49a7457510c2c9ccd4f41ed7ef926d.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u0432\u0430\u043d, \u044f \u0440\u0443\u043a\u043e\u0432\u043e\u0436\u0443 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 Skyeng. \u0427\u0430\u0441\u0442\u044c \u043c\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u2014 \u043e\u0431\u0443\u0447\u0430\u0442\u044c \u0440\u0443\u0447\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432 \u0440\u0435\u043c\u0435\u0441\u043b\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438. \u0418 \u0442\u0435\u043c\u0430 \u0441 \u043f\u043e\u0438\u0441\u043a\u043e\u043c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432, \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u043e\u043f\u044b\u0442\u0443, \u0441\u0430\u043c\u0430\u044f \u0442\u044f\u0436\u043a\u0430\u044f \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043a\u0443\u0447\u0430 \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c. \u041d\u043e \u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0431\u0440\u043e\u0441\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 \u0441\u0430\u043c\u0438. \u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043a\u0440\u0430\u0442\u043a\u0438\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041e\u0431 \u044d\u0442\u043e\u043c \u0438 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043d\u0438\u0436\u0435. <\/p>\n<p>\u041d\u0430\u043b\u0438\u0432\u0430\u0435\u043c \u0447\u0430\u0439-\u043a\u043e\u0444\u0435 \u0438 \u043f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440<\/h2>\n<p>\u041b\u043e\u043a\u0430\u0442\u043e\u0440 \u2014 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM\u2019\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u043e\u0441\u0442\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c: \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 CSS \u2014 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043d\u0430\u0431\u043e\u0440 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 XPath \u2014 \u044d\u0442\u043e \u043f\u0443\u0442\u044c \u043f\u043e DOM\u2019\u0443 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u0443\u0447\u0430\u043b\u0438 CSS \u0440\u0430\u043d\u0435\u0435, \u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043d\u0438\u0436\u0435 <strong>p<\/strong> \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0442\u0430\u043a\u0436\u0435 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <strong>color: red<\/strong> \u043c\u043e\u0436\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0435\u0433\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u043c. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u0438\u0434\u0451\u0442 \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0442\u0435\u0433\u0435 <strong>&lt;p class=\u201delement\u201d id=\u201dvalue\u201d><\/strong> \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f class \u0438 id.<\/p>\n<pre><code class=\"css\">p: {  color: red; }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430 \u043f\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043b\u043e\u043a\u0430\u0442\u043e\u0440 = \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440.<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041b\u043e\u043a\u0430\u0442\u043e\u0440 \u2014 \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c. \u0418\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435, \u0447\u0442\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a CSS, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u0430\u043a. XPath-\u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u043d \u043f\u0443\u0442\u044c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 DOM\u2019\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0445\u043e\u043b\u0438\u0432\u0430\u0440\u0438\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0445, \u0447\u0435\u043c \u0436\u0435 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u00a0 \ud83d\ude09<\/p>\n<\/div>\n<\/details>\n<p>DOM \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u044d\u0442\u043e HTML-\u043a\u043e\u0434, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c \u0438\u043b\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0432 DOM. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 \u044d\u0442\u043e HTML-\u0442\u0435\u0433.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/da7\/b53\/9b0\/da7b539b02f014d11c24a7c3026d722a.jpg\" width=\"834\" height=\"426\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/da7\/b53\/9b0\/da7b539b02f014d11c24a7c3026d722a.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u043e\u0432 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432, \u043d\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0432\u0438\u0434\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u0438\u043c\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>id<\/p>\n<\/li>\n<li>\n<p>\u043a\u043b\u0430\u0441\u0441\u044b<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0438 \u0438 \u0434\u0435\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0441\u0441\u044b\u043b\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u043b\u043d\u043e\u0435 \u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h2>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0438\u043c\u0435\u043d\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0430\u043c\u043e\u0433\u043e HTML-\u0442\u0435\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, div, span, input, button \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/38c\/082\/699\/38c08269963276d2d9977b2993f148ed.jpg\" width=\"834\" height=\"426\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/38c\/082\/699\/38c08269963276d2d9977b2993f148ed.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0423 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0438 \u0440\u0435\u0431\u0451\u043d\u043e\u043a. \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d, \u0430 \u0434\u0435\u0442\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u0415\u0441\u043b\u0438 \u0434\u0435\u0442\u0435\u0439 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0442\u043e \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u0441\u0435\u0434\u044f\u043c\u0438 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0441\u0432\u043e\u044e \u043e\u0441\u044c. 1 \u0440\u0435\u0431\u0451\u043d\u043e\u043a = 1 \u043e\u0441\u044c \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0410 \u2014 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c, B D E F W X Y \u2014 \u0434\u0435\u0442\u0438 A. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0435\u0442\u0438, \u0441\u0432\u043e\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0432\u0435\u0442\u043a\u0438, \u044d\u0442\u043e \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/7b7\/ac7\/f31\/7b7ac7f31647994452b7bc356dee3460.jpg\" width=\"1088\" height=\"862\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7b7\/ac7\/f31\/7b7ac7f31647994452b7bc356dee3460.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u041f\u043e\u0438\u0441\u043a \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/h2>\n<p>\u0414\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 DOM\u2019\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0443\u0436\u043d\u044b \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Chrome. \u041e\u043d\u0438 \u0436\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f DevTools (F12). \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 Elements, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0432 \u043f\u043e\u043b\u0435 Elements, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c Ctrl+F. \u0412\u043d\u0438\u0437\u0443 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430, \u0441 \u043d\u0438\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e HTML-\u0442\u0435\u0433\u0430. \u0418\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e: \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u0433\u0430. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0442 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u043f\u043e \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043d\u0430\u0439\u0434\u0443\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0415\u0441\u043b\u0438 \u043e\u0434\u043d\u043e\u043c\u0443 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0443 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u0442\u0435\u0441\u0442 \u0438\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u0438\u0437 \u043d\u0438\u0445, \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043f\u0430\u0434\u0451\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u043e\u0432 (p, span, div \u0438 \u0442.\u0434.), \u043d\u043e \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0442\u0435\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>color=\u201dred\u201d<\/strong> \u0438 <strong>class=\u201dbutton\u201d<\/strong>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d98\/54b\/2ba\/d9854b2bac03ce46dfa44fa5f606d4fb.png\" alt=\"\u041c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u0433\u0443 button, \u043d\u0430\u043c \u0432\u0435\u0440\u043d\u0443\u043b\u043e\u0441\u044c 269 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432.\" title=\"\u041c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u0433\u0443 button, \u043d\u0430\u043c \u0432\u0435\u0440\u043d\u0443\u043b\u043e\u0441\u044c 269 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432.\" width=\"552\" height=\"353\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d98\/54b\/2ba\/d9854b2bac03ce46dfa44fa5f606d4fb.png\"\/><figcaption>\u041c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u0433\u0443 button, \u043d\u0430\u043c \u0432\u0435\u0440\u043d\u0443\u043b\u043e\u0441\u044c 269 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432.<\/figcaption><\/figure>\n<p><strong>\u041c\u0438\u043a\u0440\u043e-\u0437\u0430\u0434\u0430\u043d\u0438\u0435<\/strong>: \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools \u043d\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 (F12) \u0438 \u043d\u0430\u0439\u0442\u0438 (Ctrl + F) \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0442\u0435\u0433\u043e\u043c button.\u00a0<\/p>\n<p><em>P.S. \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0442\u044b \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440! \u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0431\u043e\u043b\u044c\u0448\u0435 \ud83d\ude42<\/em><\/p>\n<h2>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b<\/h2>\n<p>\u0413\u0434\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f? <a href=\"https:\/\/eu.battle.net\/login\/ru\/\"><u>https:\/\/eu.battle.net\/login\/ru\/<\/u><\/a> \u2014 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f13\/016\/836\/f13016836f3bd2b01fb5994ba11e09f6.png\" width=\"1527\" height=\"605\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f13\/016\/836\/f13016836f3bd2b01fb5994ba11e09f6.png\"\/><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/108\/c33\/536\/108c335361dc04e2d40fc01075fbba81.png\" width=\"1500\" height=\"382\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/108\/c33\/536\/108c335361dc04e2d40fc01075fbba81.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0438\u0441\u043a \u043d\u0430\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u043e\u0440\u043c\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u00a0\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. \u0412\u00a0\u043a\u043e\u0434\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0435\u0441\u0442\u044c 2\u00a0\u043f\u043e\u043b\u044f (<strong>\u00ab\u041f\u043e\u0447\u0442\u0430\u00bb<\/strong> \u0438\u00a0\u00ab<strong>\u041f\u0430\u0440\u043e\u043b\u044c\u00bb)<\/strong> \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 <strong>\u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb<\/strong>. \u0421\u0440\u0430\u0432\u043d\u0438\u043c, \u043f\u043e \u043a\u0430\u043a\u0438\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/dc7\/5d1\/583\/dc75d158314434a2ff854d774d109154.jpg\" width=\"1464\" height=\"644\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dc7\/5d1\/583\/dc75d158314434a2ff854d774d109154.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044f <strong>\u041f\u043e\u0447\u0442\u0430<\/strong>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/dda\/0fe\/c92\/dda0fec92a78270adcc89bc2ca95c452.jpg\" alt=\"\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u043b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435, \u0438\u043b\u0438 \u043d\u0435 \u043d\u0435\u0441\u0443\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0441\u043c\u044b\u0441\u043b\u0430.\" title=\"\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u043b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435, \u0438\u043b\u0438 \u043d\u0435 \u043d\u0435\u0441\u0443\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0441\u043c\u044b\u0441\u043b\u0430.\" width=\"1464\" height=\"776\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dda\/0fe\/c92\/dda0fec92a78270adcc89bc2ca95c452.jpg\" data-blurred=\"true\"\/><figcaption>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u043b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435, \u0438\u043b\u0438 \u043d\u0435 \u043d\u0435\u0441\u0443\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0441\u043c\u044b\u0441\u043b\u0430.<\/figcaption><\/figure>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044f <strong>\u041f\u0430\u0440\u043e\u043b\u044c<\/strong>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/038\/dd3\/c7c\/038dd3c7c2963a0e7af0fb8b8f4e0240.png\" alt=\"\u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c: \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435.\" title=\"\u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c: \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435.\" width=\"1464\" height=\"790\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/038\/dd3\/c7c\/038dd3c7c2963a0e7af0fb8b8f4e0240.png\"\/><figcaption>\u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c: \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435.<\/figcaption><\/figure>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044f <strong>\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/4b4\/7ee\/628\/4b47ee6287aa12f120698b10e860c535.jpg\" width=\"1464\" height=\"685\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4b4\/7ee\/628\/4b47ee6287aa12f120698b10e860c535.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p><strong>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u043d\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432.<\/strong> \u0415\u0441\u043b\u0438 \u043f\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0443 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f 2 \u0438 \u0431\u043e\u043b\u0435\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u0430\u043a\u043e\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043d\u0435\u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c. \u0422\u0435\u0441\u0442 \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0443 \u0443\u043f\u0430\u0434\u0451\u0442 \u0438\u043b\u0438 \u0432\u043e\u0437\u044c\u043c\u0451\u0442 \u043f\u0435\u0440\u0432\u044b\u0439. \u041d\u0435\u043d\u0430\u0434\u0435\u0436\u043d\u043e, \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043d\u0430\u0448 \u0431\u0440\u043e.<\/p>\n<p><strong>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439, \u043d\u043e non-suitable \u043b\u043e\u043a\u0430\u0442\u043e\u0440<\/strong>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0432 DevTools \u0432\u0432\u0435\u0434\u0435\u043c \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u0442\u043e \u043d\u0430\u0439\u0434\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0418 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u0441\u044f \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u2014 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0441\u0442\u0438, \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430.<\/p>\n<ul>\n<li>\n<p><em>title=&#187;\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430 \u0438\u043b\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d&#187;<\/em> \u2014 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u0438\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u0441 \u0440\u0443\u0441\u0441\u043a\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432 title \u0435\u0449\u0435 \u0438 \u0434\u043b\u0438\u043d\u043d\u044b\u0439, \u044d\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e. \u041d\u0430 \u0442\u0435\u043a\u0441\u0442 \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u044b \u0447\u0430\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u043b\u044e\u0431\u0430\u044f \u043f\u0440\u0430\u0432\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p><em>title=&#187;\u041f\u0430\u0440\u043e\u043b\u044c&#187;<\/em> \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e <strong>^<\/strong><\/p>\n<\/li>\n<li>\n<p><em>type=&#187;text&#187;<\/em> \u2014 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c, \u0442\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0448\u044c \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0432\u0438\u0434\u0438\u0448\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u201c\u0442\u0438\u043f=\u0442\u0435\u043a\u0441\u0442\u201d. \u0421\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u044f\u0441\u043d\u043e, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u0442\u043e\u0440. \u0421\u043e \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, \u044d\u0442\u043e \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0441\u043c\u044b\u0441\u043b \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p><em>type=&#187;password&#187; \u2014 <\/em>\u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043f\u043e\u043b\u044f \u0442\u0438\u043f \u00abpassword\u00bb \u0438 \u0432\u0441\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0432\u0432\u043e\u0434\u0438\u043c \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438\/\u0442\u043e\u0447\u043a\u0438. \u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0441 type=\u201dpassword\u201d<em> <\/em>(\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0435 \u00ab\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c\u00bb) \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0441\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c. \u0421\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u043f\u0435\u0440\u0451\u0434.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b. <\/strong>\u041e\u043d\u0438 \u043d\u0430\u0439\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043e\u043d\u0438 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0435, \u0438\u043d\u043e\u0433\u0434\u0430 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043a\u0440\u0430\u0442\u043a\u0438\u0435. \u041a\u0430\u043a \u0440\u0430\u0437 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u2014 \u044d\u0442\u043e class, id, name \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435. \u041e\u043d\u0438 \u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0448\u0438 \u0431\u0440\u043e!<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u0442\u043e\u0433<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u00a0\u2014 \u043a\u0440\u0430\u0442\u043a\u0438\u0439, \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u00a0\u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u00a0\u043f\u043e\u043b\u044f \u00ab\u041f\u0430\u0440\u043e\u043b\u044c\u00bb \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u00a0\u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0435 \u0441\u043b\u043e\u0432\u043e password.<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0447\u0435\u043c\u0443 <strong>class=&#187;btn-block btn btn-primary submit-button btn-block&#187;<\/strong> \u0431\u044b\u043b \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0432 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445? \u0422\u0430\u043a\u0438\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0445 \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u043a \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u043c\u0443 \u0432\u0438\u0434\u0443.<\/p>\n<h2>\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS<\/h2>\n<p>id \u0438 class \u2014 \u0441\u0430\u043c\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u0431\u00f3\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0415\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0438\u043c\u0438, \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u0438\u0437 \u043d\u0438\u0445.\u00a0<\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u0438\u043c\u0435\u0435\u0442 <strong><em>\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e<\/em><\/strong> \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u00a0\u043e\u0434\u043d\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>btn-block<\/p>\n<\/li>\n<li>\n<p>btn<\/p>\n<\/li>\n<li>\n<p>btn-primary<\/p>\n<\/li>\n<li>\n<p>submit-button<\/p>\n<\/li>\n<li>\n<p>btn-block<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>btn-primary<\/strong> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, <strong>submit-button<\/strong> \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0451 \u0440\u0430\u0437\u043c\u0435\u0440 (\u044d\u0442\u043e \u043b\u0438\u0448\u044c \u0434\u043e\u0433\u0430\u0434\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e Blizzard). \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 class \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u043c.<\/p>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439. \u0411\u044b\u0432\u0430\u044e\u0442 \u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043a\u0440\u043e\u043c\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041d\u043e \u043a\u043b\u0430\u0441\u0441\u044b \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u0442\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:\u00a0<\/p>\n<p><code>class=\"btn-block btn btn-primary submit-button btn-block\"<\/code><\/p>\n<p>\u041d\u043e\u00a0\u0435\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u00bb, \u0442\u043e\u00a0\u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d\u00a0\u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><code>class=\"btn-block btn btn-primary registration-button btn-block\"<\/code><\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u0447\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 \u2014 <strong>submit-button<\/strong> \u0441\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u043d\u0430 <strong>registration-button<\/strong>. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<h2>\u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430<\/h2>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b\u00a0\u0438\u0449\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u00a0\u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0438\u00a0\u0434\u0435\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431. \u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c, \u043d\u043e\u00a0\u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u0438\u00a0\u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c, \u043a\u0430\u043a \u0432\u00a0\u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u00a0\u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb.<\/p>\n<p><strong>class \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/strong><\/p>\n<ul>\n<li>\n<p>.locator (\u0442\u043e\u0447\u043a\u0430 \u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c class\u2019\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0438\u043b\u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043e\u0447\u043a\u0438: [class=\u201dvalue\u201d]<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 5 \u043a\u043b\u0430\u0441\u0441\u043e\u0432: btn-block btn btn-primary submit-button btn-block, \u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a:<\/p>\n<p><code>[class=\u201dbtn-block btn btn-primary submit-button btn-block\u201d]<\/code><\/p>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0431\u0435\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u0438. \u0414\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0435\u0433\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0447\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0442\u0430\u043a:<\/p>\n<p><code>btn-block.btn.btn-primary.submit-button.btn-block\u00a0<\/code><\/p>\n<p>\u0414\u0430, \u0441\u0442\u0430\u043b\u043e \u043a\u043e\u0440\u043e\u0447\u0435, \u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043a\u0430. \u0421\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0435. \u0417\u0430\u043f\u0438\u0441\u044c <strong>[class=\u201d\u043b\u043e\u043a\u0430\u0442\u043e\u0440\u201d]<\/strong> \u0438\u0449\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043a\u043b\u0430\u0441\u0441\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c <strong>[class=\u201dbtn-block\u201d]<\/strong> \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043b\u0430\u0441\u0441, \u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0439\u0434\u0435\u043d\u0430. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e <strong>[class=\u201dbtn-block btn btn-primary submit-button btn-block\u201d]<\/strong>, \u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0430\u0439\u0434\u0451\u0442\u0441\u044f.<\/p>\n<p>\u0418\u0437 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0432\u044b\u0445\u043e\u0434 \u0441\u0438\u043c\u0432\u043e\u043b \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438. \u041e\u043d \u0438\u0449\u0435\u0442 \u041f\u041e\u0414\u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. <\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430<\/h2>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0443<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9F%D0%BE%D0%B4%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B0\"><u>\u0432\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438<\/u><\/a>, \u0442\u0430\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0435. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/includes\"><u>includes \u0438\u0437 JS<\/u><\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041b\u043e\u043a\u0430\u0442\u043e\u0440 \u043a\u043d\u043e\u043f\u043a\u0438\u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb <strong>[class=\u201dbtn-block btn btn-primary submit-button btn-block\u201d]<\/strong> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>[class*=\u201dbtn-block\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dsubmit-button\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dbtn-block btn\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dbtn btn-primary\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dprimary submit\u201d] (\u043a\u043e\u043d\u0435\u0446 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u043e\u0434\u0440\u044f\u0434, \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c)<\/p>\n<\/li>\n<li>\n<p>\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u0430: \u043d\u0435 \u0434\u043b\u0438\u043d\u043d\u043e\u0435 submit-button, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e submit, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, [class*=\u201dsubmit\u201d]. \u041c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e submit \u2014 [class*=\u201dsub\u201d].<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c<strong> <\/strong>[class*=\u201dbtn-block submit-button\u201d], \u0442\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 <strong>btn-block<\/strong> \u0438 <strong>submit-button<\/strong> \u0438\u0434\u0443\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432: <strong>btn <\/strong>\u0438<strong> btn-primary<\/strong>. \u041d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438, \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0432 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043d\u0430 2 \u0440\u0430\u0437\u043d\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 2 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043b\u0438\u0442\u043d\u043e \u2014 <strong>[class*=\u201dbtn-block\u201d][class*=\u201dsubmit-button\u201d]<\/strong>. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043c\u044b \u0438\u0449\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u043e\u0447\u043a\u0438 \u0438 \u0442\u0435\u0433\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>.submit-button = [class*=\u201dsubmit-button\u201d]<\/p>\n<\/li>\n<li>\n<p>.btn = [class*=\u201dbtn\u201d]<\/p>\n<\/li>\n<li>\n<p>.btn-block = [class*=\u201dbtn-block\u201d]<\/p>\n<\/li>\n<li>\n<p>button[class*=\u201dsubmit-button\u201d] = button.submit-button<\/p>\n<\/li>\n<li>\n<p>button[class*=\u201dbtn\u201d] = button.btn<\/p>\n<\/li>\n<li>\n<p>button[class*=\u201dbtn\u201d][class*=\u201csubmit-button\u201d] = button.btn.submit-button<\/p>\n<\/li>\n<li>\n<p>button[class*=\u201dsubmit\u201d]<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0440\u0430\u0442\u043a\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c (\u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u043a\u0443) \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0435\u043c \u043f\u043e\u043b\u043d\u0443\u044e (\u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445).\u00a0<\/p>\n<h2>\u041b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430<\/h2>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0443 submit-button. \u042d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c\u044b\u0439 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440, \u043d\u043e \u0434\u043e\u0441\u043b\u043e\u0432\u043d\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u0444\u043e\u0440\u043c\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u0430\u0441\u0441\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: [class=\u201dbtn-block btn btn-primary btn-block\u201d]. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u0437 \u0441\u043b\u043e\u0432\u0430 <strong>submit <\/strong>(\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430), \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c\u0441\u044f \u0438 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435 \u044f\u0441\u043d\u043e, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u044d\u0442\u043e\u0442 \u043b\u043e\u043a\u0430\u0442\u043e\u0440. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0435\u0441\u044c \u0431\u043b\u043e\u043a \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb.<\/p>\n<p>\u041a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u043a \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0443 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u043c \u0442\u0435\u0433 button. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>button[class*=\u201dbtn\u201d]<\/strong> (\u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438). \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0442\u0435\u0433 \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e <strong>div <\/strong>\u0438\u043b\u0438<strong> [class=&#187;control-group submit no-cancel&#187;]<\/strong>. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0442\u043e \u044d\u0442\u0430 \u0441\u0432\u044f\u0437\u044c \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b. \u0427\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437 <strong>form <\/strong>\u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u044b\u0433\u043d\u0443\u0442\u044c \u043a <strong>button<\/strong>. \u041f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: <strong>form div button<\/strong>.<\/p>\n<p>\u0421 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043f\u0443\u043b \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432:\u00a0\u00a0<\/p>\n<ul>\n<li>\n<p>form button<\/p>\n<\/li>\n<li>\n<p>form [type=\u201dsubmit\u201d]<\/p>\n<\/li>\n<li>\n<p>#password-form #submit (\u0440\u0435\u0448\u0451\u0442\u043a\u0430 \u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 id, \u0442\u043e\u0447\u043a\u0430 \u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 class)<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e-\u043c\u043d\u043e\u0433\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440\u0438\u043a\u043e\u0439, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u0438\u0442\u043e\u0433\u0443 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043a\u0440\u0430\u0442\u043a\u043e \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b \u0441\u0443\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u0410 \u043a\u0430\u043a \u0441 ID<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0421 ID \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0441\u0451 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0430\u0442\u043a\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c ID \u2014 \u044d\u0442\u043e \u0440\u0435\u0448\u0451\u0442\u043a\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>&lt;form id=\u201dpassword-form\u201d><\/strong> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a <strong>form#password-form<\/strong>, \u043f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443, \u043a\u0430\u043a \u0438 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c<\/p>\n<\/div>\n<\/details>\n<h2>\u041f\u043e\u0438\u0441\u043a \u043f\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c<\/h2>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0442\u043e\u0436\u0435 \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u044e\u0442 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f. \u0423 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0430\u0439\u0434\u0438\u0448\u043d\u0438\u043a\u0438, \u043d\u043e \u0438 \u0435\u0449\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0412 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u044d\u0442\u0438\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0445 \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u0435\u0451 \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<ul>\n<li>\n<p>data-loading-text<\/p>\n<\/li>\n<li>\n<p>tabindex=&#187;0&#8243;<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <strong>data-qa<\/strong> \u0438\u043b\u0438 <strong>data-qa-id<\/strong>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>&lt;button id=\u201dcss-1232\u201d data-qa=\u201dlogin-button\u201d><\/strong>. \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u044e\u0442 \u043b\u043e\u043a\u0430\u0442\u043e\u0440, \u0442\u043e \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0438 \u0442\u0435\u0441\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u044b, \u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u0434\u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0443\u0448\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043f\u0440\u0430\u0432\u043a\u0438.<\/p>\n<p>\u041b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0438 \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c! \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0430\u0439\u0434\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u043b\u043e\u043a\u0430\u0442\u043e\u0440. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u044b\u0448\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb: <strong>form#password-form[method=\u201dpost\u201d][class*=\u201dusername\u201d]<\/strong><\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS<\/h2>\n<ul>\n<li>\n<p>\u043a\u043b\u0430\u0441\u0441\u044b \u0438 id \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u043e\u0447\u043a\u0438 \u0438 \u0440\u0435\u0448\u0435\u0442\u043a\u0438<\/p>\n<\/li>\n<li>\n<p><strong>&lt;button class=\u201dlogin\u201d><\/strong>: .login = [class=\u201dlogin\u201d] = [class*=\u201dlog\u201d] = button.login = button[class=\u201dlogin\u201d]<\/p>\n<\/li>\n<li>\n<p><strong>&lt;button id=\u201dsize\u201d><\/strong>: #size = [id=\u201dsize\u201d] = [id*=\u201dze\u201d] = button#size = button[id=\u201dsize\u201d]<\/p>\n<\/li>\n<li>\n<p>\u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0435 <strong>class<\/strong>, \u0438 \u043d\u0435 <strong>id<\/strong> \u0432 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043f\u0438\u0448\u0435\u043c \u0432 [] (\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445), \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>[name=\u201dphone\u201d]<\/strong>, <strong>[data-qa-id=\u201dregButton\u201d]<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0435\u0441\u043b\u0438 \u0442\u0435\u0433 \u043b\u0435\u0436\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0442\u0435\u0433\u0430, \u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043d\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b (\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438), \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>&lt;span><\/strong> -> <strong>&lt;button><\/strong> -> <strong>&lt;a><\/strong> = <strong>span a<\/strong> = <strong>button a<\/strong> = <strong>span button a<\/strong><\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e XPath<\/h2>\n<p>XPath \u0432 \u043a\u043e\u0440\u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 CSS \u043a\u0430\u043a \u0438\u0434\u0435\u0435\u0439, \u0442\u0430\u043a \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439. XPath \u2014 \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435, \u043f\u0440\u0438\u0447\u0451\u043c \u043d\u0435\u0432\u0430\u0436\u043d\u043e \u043a\u0430\u043a\u043e\u043c, \u0431\u0443\u0434\u044c \u044d\u0442\u043e XML \u0438\u043b\u0438 XHTML. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c XPath \u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445.\u00a0<\/p>\n<p>\u042f \u0438\u0437\u0443\u0447\u0430\u043b XPath \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0435\u0441\u044f\u0446\u0430 \u0441 \u043d\u0443\u043b\u044f. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u2014 \u043c\u044b \u0445\u043e\u0434\u0438\u043c \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043d\u043e \u043d\u0435 \u044f\u0441\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u043f\u0443\u0442\u0438, \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0443 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u041d\u0435\u0434\u0435\u043b\u044f\u043c\u0438 \u0438\u0437\u0443\u0447\u0430\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u0431\u043b\u043e\u0433\u0430\u0445 (\u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0442\u043e\u0433\u0434\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435) \u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u044e\u0442\u0443\u0431\u0435. \u041c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u043e\u0434\u043d\u043e \u0432\u0438\u0434\u0435\u043e, \u0433\u0434\u0435 \u0430\u0432\u0442\u043e\u0440 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u043b \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b XPath, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043c\u0435\u043d\u044f \u043e\u0441\u0435\u043d\u0438\u043b\u043e \u0438 \u0432 \u0433\u043e\u043b\u043e\u0432\u0435 \u0441\u043b\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043d\u043d\u044b \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430. \u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 XPath \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043d\u043e \u044f \u0431\u044b \u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u043c\u0435\u0441\u044f\u0446\u0430 \u043d\u0430 \u0432\u0435\u0449\u0438 \u043f\u043e\u0432\u0430\u0436\u043d\u0435\u0435.<\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"popup\"> &lt;div id=\"payment-popup\"> &lt;button name=\"regButton\"> &lt;span href=\"\/doReg\">\u041a\u043d\u043e\u043f\u043a\u0430&lt;\/span> &lt;\/button> &lt;\/div> &lt;\/div><\/code><\/pre>\n<p>XPath \u2014 \u044d\u0442\u043e \u043f\u0443\u0442\u044c \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0435\u0433\u043e\u0432 \u2014 \u044d\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432, \u043a\u0430\u043a \u0432 \u043b\u044e\u0431\u043e\u0439 \u041e\u0421. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0435\u0433\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u043f\u0430\u043f\u043e\u043a: <strong>div -> div -> button -> span<\/strong>. \u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043f\u043e \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <strong>cd<\/strong>, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e: <strong>cd div\/div\/button\/span<\/strong><\/p>\n<p><strong>div\/div\/button\/span<\/strong> \u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e XPath, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0449\u0443\u0442 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u0434\u0435\u0440\u0435\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0438\u0448\u0443\u0442 <strong>\/\/<\/strong> \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: <strong>\/\/div\/div\/button\/span<\/strong>. 2 \u0441\u043b\u044d\u0448\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u2014 \u043e\u043d\u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0438\u0449\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0433\u0434\u0435-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>\/\/div\/\/span<\/strong> \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0439\u0434\u0435\u043d, \u043c\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 <strong>div <\/strong>\u0438 <strong>button<\/strong>.\u00a0<\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0442\u043b\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c XPath \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043a \u0434\u0435\u0442\u044f\u043c, \u043d\u043e \u0438 \u043e\u0442 \u0434\u0435\u0442\u0435\u0439 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430:<\/p>\n<pre><code>&lt;div class=\u201dpopup\u201d> &lt;div id=\u201dpayment-popup\u201d> &lt;button name=\u201dregButton\u201d> &lt;span href=\u201d\/doReg\u201d \/> &lt;\/button> &lt;button name=\u201dloginButton\u201d> &lt;span href=\u201d\/doLogin\u201d \/> &lt;\/button> &lt;\/div> &lt;\/div> <\/code><\/pre>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043e\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 doLogin \u0432 \u043a\u043d\u043e\u043f\u043a\u0443 <strong>doReg<\/strong> \u0432\u043e\u0442 \u0442\u0430\u043a: <\/p>\n<p><code>\/\/*[@href=\u201d\/doLogin\u201d]\/..\/..\/\/*[@href=\u201d\/doReg\u201d] <\/code><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435, \u043a\u0430\u043a \u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u041e\u0421, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c 2 \u0442\u043e\u0447\u043a\u0438, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e 2 \u0442\u043e\u0447\u0435\u043a \u043c\u044b \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f \u0441 \u0443\u0440\u043e\u0432\u043d\u044f <strong>span <\/strong>\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e <strong>button<\/strong>, \u0430 \u0441 <strong>button <\/strong>\u0434\u043e \u043e\u0431\u0449\u0435\u0433\u043e <strong>div<\/strong>.\u00a0<\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c, \u0430 \u0433\u0434\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f? \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u044e\u0434\u0443, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443-\u0442\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u0443. \u0412\u043e\u0437\u044c\u043c\u0435\u043c <a href=\"https:\/\/www.epicgames.com\/store\/ru\/p\/red-dead-redemption-2\">\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/a> RDR2 \u0432 Epic Games.\u00a0\u041d\u0430 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b 3 \u0438\u0437\u0434\u0430\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/72f\/501\/a2e\/72f501a2e05f6ce1315a044ada17d6ee.png\" width=\"1096\" height=\"762\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/72f\/501\/a2e\/72f501a2e05f6ce1315a044ada17d6ee.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 DevTools \u043e\u0442\u0447\u0451\u0442\u043b\u0438\u0432\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0431\u043b\u043e\u043a\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0435. \u041e\u0442\u043b\u0438\u0447\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438 \u0438\u0437\u0434\u0430\u043d\u0438\u044f, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0438 \u0446\u0435\u043d\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/51f\/6c3\/829\/51f6c3829aabfe663de431171df6d450.png\" width=\"1600\" height=\"687\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/51f\/6c3\/829\/51f6c3829aabfe663de431171df6d450.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0430: \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430\u00a0\u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041a\u0443\u043f\u0438\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441\u00bb \u0443\u00a0\u0438\u0437\u0434\u0430\u043d\u0438\u044f Red Dead Online. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0437\u0430\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u00a0\u0442\u0435\u043a\u0441\u0442 \u0438\u0437\u0434\u0430\u043d\u0438\u044f, \u043f\u043e\u0434\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043e\u00a0\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u0431\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u00a0\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u00a0\u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u00a0\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0434\u043e\u00a0\u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041a\u0443\u043f\u0438\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441\u00bb.<\/p>\n<p><code>\/\/*[contains(text(), \u201cRed Dead Online\u201d)]\/ancestor::*[contains(@data-component, \"OfferCard\")]\/\/*[contains(@data-component, \"Purchase\")]<\/code><\/p>\n<details class=\"spoiler\">\n<summary> \u041b\u0430\u0439\u0444\u0445\u0430\u043a: \u043a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u043e\u0431\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443 \u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432? <\/summary>\n<div class=\"spoiler__content\">\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430\u00a0\u043b\u044e\u0431\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u041f\u041a\u041c -> \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0430 Elements. \u041d\u0430\u0432\u043e\u0434\u0438\u043c \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u043d\u0430\u00a0\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u00a0\u043e\u043d\u00a0\u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u041f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u0449\u0438\u043c \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430\u0432\u0435\u0440\u0445, \u043f\u043e\u043a\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u00a0\u043d\u0430\u0439\u0434\u0451\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 2\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u00a0\u2014 \u0432\u00a0\u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0435\u043a\u0441\u0442 \u0438\u00a0\u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041a\u0443\u043f\u0438\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441\u00bb.<\/p>\n<\/div>\n<\/details>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/601\/070\/a2c\/601070a2c7b5df4a8a68afcf53503e03.png\" width=\"1600\" height=\"333\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/601\/070\/a2c\/601070a2c7b5df4a8a68afcf53503e03.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 XPath, \u043a\u0430\u043a \u0438 \u0432 CSS, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438 \u043f\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:\u00a0<\/p>\n<pre><code class=\"xml\">&lt;div class=\u201dpopup\u201d> &lt;div id=\u201dpayment-popup\u201d> &lt;button name=\u201dregButton\u201d> &lt;span href=\u201d\/doReg\u201d \/> &lt;\/button>          &lt;button name=\u201dloginButton\u201d> &lt;span href=\u201d\/doLogin\u201d \/> &lt;\/button> &lt;\/div> &lt;\/div><\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438:\u00a0<\/p>\n<ul>\n<li>\n<p><code>\/\/*[@href=\u201d\/doReg\u201d] \u0438\u043b\u0438 \/\/span[@href=\u201d\/doReg\u201d]<\/code><\/p>\n<\/li>\n<li>\n<p><code>\/\/*[@name=\u201dregButton\u201d] \u0438\u043b\u0438 \/\/button[@name=\u201dregButton\u201d]<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u2014 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0413\u0434\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430, \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e. \u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0431\u044b\u043b \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442. \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0443\u0442\u044c <strong>\/\/span[@href=\u201d\/doReg\u201d]<\/strong> \u2014 \u0441\u0440\u0430\u0437\u0443 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <strong>span <\/strong>\u043c\u044b \u0438\u0449\u0435\u043c <strong>@href=\u201d\/doReg\u201d<\/strong>, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0435 \u0432\u0430\u0436\u0435\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 <strong>span <\/strong>\u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0443 <strong>\/\/*[@href=\u201d\/doReg\u201d]<\/strong>.<\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0441\u043e \u0437\u043d\u0430\u043a\u043e\u043c <strong>@<\/strong> \u0432 \u043d\u0430\u0447\u0430\u043b\u0435, \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u044f\u0437\u044b\u043a\u0430.<\/p>\n<p>\u0415\u0449\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043f\u043e \u0441\u043c\u0435\u0436\u043d\u044b\u043c \u043e\u0441\u044f\u043c. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0435\u0441\u0442\u044c 2 \u0440\u0430\u0437\u043d\u044b\u0435 \u043e\u0441\u0438 \u2014 <strong>2<\/strong> <strong>button<\/strong>: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u0432: <strong>following-sibling<\/strong> \u0438 <strong>preceding-sibling<\/strong>. <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0412\u043e\u0439\u0442\u0438, \u0437\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0443 \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f: <strong>\/\/*[@name=\u201dregButton\u201d]\/following-sibling::*[@name=\u201dloginButton\u201d]<\/strong>. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0437\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0443 \u0412\u043e\u0439\u0442\u0438, \u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0449\u0435\u043c \u0432 \u043e\u0441\u044f\u0445, \u0438\u0434\u0443\u0449\u0438\u0445 \u0434\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438: <strong>\/\/*[@name=\u201dloginButton\u201d]\/preceding-sibling::*[@name=\u201dregButton\u201d]<\/strong>. \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u043e\u0441\u044f\u043c\u0438 \u0438\u043b\u0438 \u0434\u0435\u0440\u0435\u0432\u0443 (\u0432\u0432\u0435\u0440\u0445-\u0432\u043d\u0438\u0437) \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 2 \u0442\u043e\u0447\u043a\u0438, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>following-sibling::<\/strong>,<strong> ancestor::<\/strong><\/p>\n<p>\u041d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u043a\u043b\u0430\u0441\u0441\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0438 \u043d\u0435\u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c. \u0412 CSS \u043c\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438. \u0417\u0434\u0435\u0441\u044c \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0443 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043b\u043e\u0432\u043e contains \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 CSS. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0449\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0412\u043e\u0439\u0442\u0438: <strong>\/\/*[contains(@name, \u201cLogin\u201d)]<\/strong>. \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, <strong>contains <\/strong>\u2014 \u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 XPath. 1 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u2014 \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0449\u0435\u043c \u0447\u0430\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0430, 2 \u2014 \u0441\u0430\u043c \u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0431\u0443\u0434\u0435\u0442 <strong>text()<\/strong>. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043d\u0451\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/p>\n<pre><code class=\"xml\">&lt;button> &lt;span>\u041a\u043d\u043e\u043f\u043a\u0430 \u0412\u043e\u0439\u0442\u0438&lt;\/span> &lt;\/button> &lt;button> &lt;span>\u041a\u043d\u043e\u043f\u043a\u0430 \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f&lt;\/span> &lt;\/button><\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0442\u0435\u043a\u0441\u0442 \u043f\u043e \u0442\u043e\u0447\u043d\u043e\u043c\u0443 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044e, \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0443\u0442\u044c: <strong>\/\/*[text()=\u201d\u041a\u043d\u043e\u043f\u043a\u0430 \u0412\u043e\u0439\u0442\u0438\u201d]<\/strong><em>. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u043e 1 \u0441\u043b\u043e\u0432\u0443, \u0442\u043e \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u043b\u043e\u0432\u043e\u043c <\/em><strong><em>contains<\/em><\/strong><em>, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/em> <strong>\/\/<em>*<\/em>[contains(text(), \u201c\u0412\u043e\u0439\u0442\u0438\u201d)].<\/strong><\/p>\n<h2>\u041a\u043e\u0440\u043e\u0442\u043a\u043e \u043f\u0440\u043e \u00ab\u0413\u0438\u0431\u043a\u0438\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b\u00bb<\/h2>\n<p>\u0422\u0435\u0440\u043c\u0438\u043d \u00ab\u0433\u0438\u0431\u043a\u0438\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u00bb \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u043f\u043e\u0438\u0441\u043a\u0443 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 CSS \u0438 \u0441 XPath. \u041d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043d \u0433\u0438\u0431\u043a\u0438\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u2014 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0437\u044c\u043c\u0451\u043c <a href=\"https:\/\/www.epicgames.com\/store\/ru\/p\/red-dead-redemption-2\"><u>\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0441 \u0438\u0433\u0440\u043e\u0439 RDR2<\/u><\/a>. \u041d\u0430 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c 3 \u0438\u0437\u0434\u0430\u043d\u0438\u044f. \u0421\u0430\u043c\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0441\u0442 (\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0446\u0435\u043d\u0430). \u041e\u0431\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: <strong>\/\/*[contains(text(), \u201c<em>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u0434\u0430\u043d\u0438\u044f<\/em>\u201d)]\/ancestor::*[contains(@data-component, &#171;OfferCard&#187;)]\/\/*[contains(@data-component, &#171;Purchase&#187;)]<\/strong>. \u0422\u0435\u043a\u0441\u0442 \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439, \u043a\u0430\u043a\u043e\u0439 \u0437\u0430\u0445\u043e\u0442\u0438\u043c. \u0422\u0430\u043a \u0432\u043e\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0438\u0431\u043a\u0438\u043c \u2014 \u0435\u0433\u043e \u0442\u0435\u043b\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c, \u0430 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e. \u0412 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u044b \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u0438\u0431\u043a\u0438\u043c\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 2 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0438 XPath. \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"334\" width=\"334\">\n<p><strong>\u041f\u043b\u044e\u0441\u044b CSS<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b CSS<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"334\" width=\"334\">\n<p>&#8212; \u043a\u0440\u0430\u0442\u043a\u0438\u0439 <\/p>\n<p>&#8212; \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 <\/p>\n<p>&#8212; \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0434\u043b\u044f \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442 \u0441 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e CSS <\/p>\n<p>&#8212; \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u043c\u0438\u0444\u0430 \u2014 \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438\u0449\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u043d\u0430 \u0444\u043e\u043d\u0435 \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432 \u044d\u0442\u0430 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0435\u043e\u0449\u0443\u0442\u0438\u043c\u0430 \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0430\u0440\u0443 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434<\/p>\n<\/td>\n<td>\n<p>&#8212; \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043a \u0440\u0435\u0431\u0451\u043d\u043a\u0443, \u043d\u043e \u043d\u0435 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u2014 \u0432\u0432\u0435\u0440\u0445 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043b\u044c\u0437\u044f <\/p>\n<p>&#8212; \u0431\u043e\u043b\u0435\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043d\u0451\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f<\/p>\n<p>&#8212; CSS \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p><strong>\u041f\u043b\u044e\u0441\u044b XPath <\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b XPath<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>&#8212; \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u0435\u0431\u0435, \u043d\u043e \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0440\u0435\u0434\u0430\u0445 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0445 <\/p>\n<p>&#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u0432\u043d\u0438\u0437 \u0438 \u0432\u0432\u0435\u0440\u0445 <\/p>\n<p>&#8212; \u0433\u0438\u0431\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043e\u0441\u044f\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <\/p>\n<p>&#8212; \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0438\u0441\u043a\u0443 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0438\u043b\u0438 \u0430\u043d\u0430\u043b\u043e\u0433 normalize-space, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e \u0431\u043e\u043a\u0430\u043c<\/p>\n<\/td>\n<td>\n<p>&#8212; \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0439 <\/p>\n<p>&#8212; \u043d\u0435\u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 <\/p>\n<p>&#8212; \u0441\u043b\u043e\u0436\u0435\u043d \u0432 \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u0438 <\/p>\n<p>&#8212; \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043f\u043e\u0438\u0441\u043a \u043f\u043e CSS, \u0445\u043e\u0442\u044c \u0438 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u0442\u0435\u0441\u0442\u0430\u0445 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c XPath.<\/p>\n<h2>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p><strong>CSS:<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/flukeout.github.io\/\"><u>https:\/\/flukeout.github.io\/<\/u><\/a> \u2014 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432. <\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/code.tutsplus.com\/ru\/tutorials\/the-30-css-selectors-you-must-memorize--net-16048\"><u>https:\/\/code.tutsplus.com\/ru\/tutorials\/the-30-css-selectors-you-must-memorize&#8212;net-16048<\/u><\/a> \u2014 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0438\u0434\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0435 \u0432\u0441\u0435, \u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u0432\u0430\u0435\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437 \u0432 \u0436\u0438\u0437\u043d\u0438 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/appletree.or.kr\/quick_reference_cards\/CSS\/CSS%20selectors%20cheatsheet.pdf\"><u>https:\/\/appletree.or.kr\/quick_reference_cards\/CSS\/CSS%20selectors%20cheatsheet.pdf<\/u><\/a> \u2014 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/learn.javascript.ru\/css-selectors\"><u>https:\/\/learn.javascript.ru\/css-selectors<\/u><\/a> \u2014 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p><strong>XPath:<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/topswagcode.com\/xpath\/\"><u>https:\/\/topswagcode.com\/xpath\/<\/u><\/a> \u2014 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432. <\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.w3schools.com\/xml\/xpath_nodes.asp\"><u>https:\/\/www.w3schools.com\/xml\/xpath_nodes.asp<\/u><\/a> \u2014 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u043d\u043e\u0434\u044b.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.w3schools.com\/xml\/xpath_syntax.asp\"><u>https:\/\/www.w3schools.com\/xml\/xpath_syntax.asp<\/u><\/a> \u2014 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.w3schools.com\/xml\/xpath_axes.asp\"><u>https:\/\/www.w3schools.com\/xml\/xpath_axes.asp<\/u><\/a> \u2014 \u043e\u0441\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/soltau.ru\/index.php\/themes\/dev\/item\/413-kratkoe-rukovodstvo-po-xpath\"><u>https:\/\/soltau.ru\/index.php\/themes\/dev\/item\/413-kratkoe-rukovodstvo-po-xpath<\/u><\/a> \u2014 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/588282\/\"> https:\/\/habr.com\/ru\/articles\/588282\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u0432\u0430\u043d, \u044f \u0440\u0443\u043a\u043e\u0432\u043e\u0436\u0443 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 Skyeng. \u0427\u0430\u0441\u0442\u044c \u043c\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u2014 \u043e\u0431\u0443\u0447\u0430\u0442\u044c \u0440\u0443\u0447\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432 \u0440\u0435\u043c\u0435\u0441\u043b\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438. \u0418 \u0442\u0435\u043c\u0430 \u0441 \u043f\u043e\u0438\u0441\u043a\u043e\u043c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432, \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u043e\u043f\u044b\u0442\u0443, \u0441\u0430\u043c\u0430\u044f \u0442\u044f\u0436\u043a\u0430\u044f \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043a\u0443\u0447\u0430 \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c. \u041d\u043e \u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0431\u0440\u043e\u0441\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 \u0441\u0430\u043c\u0438. \u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043a\u0440\u0430\u0442\u043a\u0438\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041e\u0431 \u044d\u0442\u043e\u043c \u0438 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043d\u0438\u0436\u0435. <\/p>\n<p>\u041d\u0430\u043b\u0438\u0432\u0430\u0435\u043c \u0447\u0430\u0439-\u043a\u043e\u0444\u0435 \u0438 \u043f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440<\/h2>\n<p>\u041b\u043e\u043a\u0430\u0442\u043e\u0440 \u2014 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM\u2019\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u043e\u0441\u0442\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c: \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 CSS \u2014 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043d\u0430\u0431\u043e\u0440 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 XPath \u2014 \u044d\u0442\u043e \u043f\u0443\u0442\u044c \u043f\u043e DOM\u2019\u0443 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u0443\u0447\u0430\u043b\u0438 CSS \u0440\u0430\u043d\u0435\u0435, \u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043d\u0438\u0436\u0435 <strong>p<\/strong> \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0442\u0430\u043a\u0436\u0435 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <strong>color: red<\/strong> \u043c\u043e\u0436\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0435\u0433\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u043c. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u0438\u0434\u0451\u0442 \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0442\u0435\u0433\u0435 <strong>&lt;p class=\u201delement\u201d id=\u201dvalue\u201d><\/strong> \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f class \u0438 id.<\/p>\n<pre><code class=\"css\">p: {  color: red; }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430 \u043f\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043b\u043e\u043a\u0430\u0442\u043e\u0440 = \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440.<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041b\u043e\u043a\u0430\u0442\u043e\u0440 \u2014 \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c. \u0418\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435, \u0447\u0442\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a CSS, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u0430\u043a. XPath-\u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u043d \u043f\u0443\u0442\u044c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 DOM\u2019\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0445\u043e\u043b\u0438\u0432\u0430\u0440\u0438\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0445, \u0447\u0435\u043c \u0436\u0435 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u00a0 \ud83d\ude09<\/p>\n<\/div>\n<\/details>\n<p>DOM \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u044d\u0442\u043e HTML-\u043a\u043e\u0434, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c \u0438\u043b\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0432 DOM. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 \u044d\u0442\u043e HTML-\u0442\u0435\u0433.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u043e\u0432 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432, \u043d\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0432\u0438\u0434\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u0438\u043c\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>id<\/p>\n<\/li>\n<li>\n<p>\u043a\u043b\u0430\u0441\u0441\u044b<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0438 \u0438 \u0434\u0435\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0441\u0441\u044b\u043b\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u043b\u043d\u043e\u0435 \u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h2>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0438\u043c\u0435\u043d\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0430\u043c\u043e\u0433\u043e HTML-\u0442\u0435\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, div, span, input, button \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0423 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0438 \u0440\u0435\u0431\u0451\u043d\u043e\u043a. \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d, \u0430 \u0434\u0435\u0442\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u0415\u0441\u043b\u0438 \u0434\u0435\u0442\u0435\u0439 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0442\u043e \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u0441\u0435\u0434\u044f\u043c\u0438 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0441\u0432\u043e\u044e \u043e\u0441\u044c. 1 \u0440\u0435\u0431\u0451\u043d\u043e\u043a = 1 \u043e\u0441\u044c \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0410 \u2014 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c, B D E F W X Y \u2014 \u0434\u0435\u0442\u0438 A. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0435\u0442\u0438, \u0441\u0432\u043e\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0432\u0435\u0442\u043a\u0438, \u044d\u0442\u043e \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u0438.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u041f\u043e\u0438\u0441\u043a \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/h2>\n<p>\u0414\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 DOM\u2019\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0443\u0436\u043d\u044b \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Chrome. \u041e\u043d\u0438 \u0436\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f DevTools (F12). \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 Elements, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0432 \u043f\u043e\u043b\u0435 Elements, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c Ctrl+F. \u0412\u043d\u0438\u0437\u0443 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430, \u0441 \u043d\u0438\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e HTML-\u0442\u0435\u0433\u0430. \u0418\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e: \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u0433\u0430. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0442 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u043f\u043e \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043d\u0430\u0439\u0434\u0443\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0415\u0441\u043b\u0438 \u043e\u0434\u043d\u043e\u043c\u0443 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0443 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u0442\u0435\u0441\u0442 \u0438\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u0438\u0437 \u043d\u0438\u0445, \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043f\u0430\u0434\u0451\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u043e\u0432 (p, span, div \u0438 \u0442.\u0434.), \u043d\u043e \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0442\u0435\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>color=\u201dred\u201d<\/strong> \u0438 <strong>class=\u201dbutton\u201d<\/strong>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435.<\/p>\n<figure class=\"full-width\"><figcaption>\u041c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u0433\u0443 button, \u043d\u0430\u043c \u0432\u0435\u0440\u043d\u0443\u043b\u043e\u0441\u044c 269 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432.<\/figcaption><\/figure>\n<p><strong>\u041c\u0438\u043a\u0440\u043e-\u0437\u0430\u0434\u0430\u043d\u0438\u0435<\/strong>: \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools \u043d\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 (F12) \u0438 \u043d\u0430\u0439\u0442\u0438 (Ctrl + F) \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0442\u0435\u0433\u043e\u043c button.\u00a0<\/p>\n<p><em>P.S. \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0442\u044b \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440! \u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0431\u043e\u043b\u044c\u0448\u0435 \ud83d\ude42<\/em><\/p>\n<h2>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b<\/h2>\n<p>\u0413\u0434\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f? <a href=\"https:\/\/eu.battle.net\/login\/ru\/\"><u>https:\/\/eu.battle.net\/login\/ru\/<\/u><\/a> \u2014 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0438\u0441\u043a \u043d\u0430\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u043e\u0440\u043c\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u00a0\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. \u0412\u00a0\u043a\u043e\u0434\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0435\u0441\u0442\u044c 2\u00a0\u043f\u043e\u043b\u044f (<strong>\u00ab\u041f\u043e\u0447\u0442\u0430\u00bb<\/strong> \u0438\u00a0\u00ab<strong>\u041f\u0430\u0440\u043e\u043b\u044c\u00bb)<\/strong> \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 <strong>\u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb<\/strong>. \u0421\u0440\u0430\u0432\u043d\u0438\u043c, \u043f\u043e \u043a\u0430\u043a\u0438\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044f <strong>\u041f\u043e\u0447\u0442\u0430<\/strong>:<\/p>\n<figure class=\"full-width\"><figcaption>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u043b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435, \u0438\u043b\u0438 \u043d\u0435 \u043d\u0435\u0441\u0443\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0441\u043c\u044b\u0441\u043b\u0430.<\/figcaption><\/figure>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044f <strong>\u041f\u0430\u0440\u043e\u043b\u044c<\/strong>:<\/p>\n<figure class=\"full-width\"><figcaption>\u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c: \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435.<\/figcaption><\/figure>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044f <strong>\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u043d\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432.<\/strong> \u0415\u0441\u043b\u0438 \u043f\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0443 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f 2 \u0438 \u0431\u043e\u043b\u0435\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u0430\u043a\u043e\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043d\u0435\u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c. \u0422\u0435\u0441\u0442 \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0443 \u0443\u043f\u0430\u0434\u0451\u0442 \u0438\u043b\u0438 \u0432\u043e\u0437\u044c\u043c\u0451\u0442 \u043f\u0435\u0440\u0432\u044b\u0439. \u041d\u0435\u043d\u0430\u0434\u0435\u0436\u043d\u043e, \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043d\u0430\u0448 \u0431\u0440\u043e.<\/p>\n<p><strong>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439, \u043d\u043e non-suitable \u043b\u043e\u043a\u0430\u0442\u043e\u0440<\/strong>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0432 DevTools \u0432\u0432\u0435\u0434\u0435\u043c \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u0442\u043e \u043d\u0430\u0439\u0434\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0418 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u0441\u044f \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u2014 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0441\u0442\u0438, \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430.<\/p>\n<ul>\n<li>\n<p><em>title=&#187;\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430 \u0438\u043b\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d&#187;<\/em> \u2014 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u0438\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u0441 \u0440\u0443\u0441\u0441\u043a\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432 title \u0435\u0449\u0435 \u0438 \u0434\u043b\u0438\u043d\u043d\u044b\u0439, \u044d\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e. \u041d\u0430 \u0442\u0435\u043a\u0441\u0442 \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u044b \u0447\u0430\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u043b\u044e\u0431\u0430\u044f \u043f\u0440\u0430\u0432\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p><em>title=&#187;\u041f\u0430\u0440\u043e\u043b\u044c&#187;<\/em> \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e <strong>^<\/strong><\/p>\n<\/li>\n<li>\n<p><em>type=&#187;text&#187;<\/em> \u2014 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c, \u0442\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0448\u044c \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0432\u0438\u0434\u0438\u0448\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u201c\u0442\u0438\u043f=\u0442\u0435\u043a\u0441\u0442\u201d. \u0421\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u044f\u0441\u043d\u043e, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u0442\u043e\u0440. \u0421\u043e \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, \u044d\u0442\u043e \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0441\u043c\u044b\u0441\u043b \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p><em>type=&#187;password&#187; \u2014 <\/em>\u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043f\u043e\u043b\u044f \u0442\u0438\u043f \u00abpassword\u00bb \u0438 \u0432\u0441\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0432\u0432\u043e\u0434\u0438\u043c \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438\/\u0442\u043e\u0447\u043a\u0438. \u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0441 type=\u201dpassword\u201d<em> <\/em>(\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0435 \u00ab\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c\u00bb) \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0441\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c. \u0421\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u043f\u0435\u0440\u0451\u0434.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b. <\/strong>\u041e\u043d\u0438 \u043d\u0430\u0439\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043e\u043d\u0438 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0435, \u0438\u043d\u043e\u0433\u0434\u0430 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043a\u0440\u0430\u0442\u043a\u0438\u0435. \u041a\u0430\u043a \u0440\u0430\u0437 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u2014 \u044d\u0442\u043e class, id, name \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435. \u041e\u043d\u0438 \u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0448\u0438 \u0431\u0440\u043e!<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u0442\u043e\u0433<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u00a0\u2014 \u043a\u0440\u0430\u0442\u043a\u0438\u0439, \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u00a0\u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u00a0\u043f\u043e\u043b\u044f \u00ab\u041f\u0430\u0440\u043e\u043b\u044c\u00bb \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u00a0\u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0435 \u0441\u043b\u043e\u0432\u043e password.<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0447\u0435\u043c\u0443 <strong>class=&#187;btn-block btn btn-primary submit-button btn-block&#187;<\/strong> \u0431\u044b\u043b \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0432 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445? \u0422\u0430\u043a\u0438\u0435 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u044b \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0445 \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u043a \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u043c\u0443 \u0432\u0438\u0434\u0443.<\/p>\n<h2>\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS<\/h2>\n<p>id \u0438 class \u2014 \u0441\u0430\u043c\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u0431\u00f3\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0415\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0438\u043c\u0438, \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u0438\u0437 \u043d\u0438\u0445.\u00a0<\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u0438\u043c\u0435\u0435\u0442 <strong><em>\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e<\/em><\/strong> \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u00a0\u043e\u0434\u043d\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>btn-block<\/p>\n<\/li>\n<li>\n<p>btn<\/p>\n<\/li>\n<li>\n<p>btn-primary<\/p>\n<\/li>\n<li>\n<p>submit-button<\/p>\n<\/li>\n<li>\n<p>btn-block<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>btn-primary<\/strong> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, <strong>submit-button<\/strong> \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0451 \u0440\u0430\u0437\u043c\u0435\u0440 (\u044d\u0442\u043e \u043b\u0438\u0448\u044c \u0434\u043e\u0433\u0430\u0434\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e Blizzard). \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 class \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u043c.<\/p>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439. \u0411\u044b\u0432\u0430\u044e\u0442 \u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043a\u0440\u043e\u043c\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041d\u043e \u043a\u043b\u0430\u0441\u0441\u044b \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u0442\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:\u00a0<\/p>\n<p><code>class=\"btn-block btn btn-primary submit-button btn-block\"<\/code><\/p>\n<p>\u041d\u043e\u00a0\u0435\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u00bb, \u0442\u043e\u00a0\u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d\u00a0\u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><code>class=\"btn-block btn btn-primary registration-button btn-block\"<\/code><\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u0447\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 \u2014 <strong>submit-button<\/strong> \u0441\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u043d\u0430 <strong>registration-button<\/strong>. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<h2>\u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430<\/h2>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b\u00a0\u0438\u0449\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u00a0\u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0438\u00a0\u0434\u0435\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431. \u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c, \u043d\u043e\u00a0\u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u0438\u00a0\u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c, \u043a\u0430\u043a \u0432\u00a0\u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u00a0\u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb.<\/p>\n<p><strong>class \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/strong><\/p>\n<ul>\n<li>\n<p>.locator (\u0442\u043e\u0447\u043a\u0430 \u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c class\u2019\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0438\u043b\u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043e\u0447\u043a\u0438: [class=\u201dvalue\u201d]<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 5 \u043a\u043b\u0430\u0441\u0441\u043e\u0432: btn-block btn btn-primary submit-button btn-block, \u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a:<\/p>\n<p><code>[class=\u201dbtn-block btn btn-primary submit-button btn-block\u201d]<\/code><\/p>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0431\u0435\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u0438. \u0414\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0435\u0433\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0447\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0442\u0430\u043a:<\/p>\n<p><code>btn-block.btn.btn-primary.submit-button.btn-block\u00a0<\/code><\/p>\n<p>\u0414\u0430, \u0441\u0442\u0430\u043b\u043e \u043a\u043e\u0440\u043e\u0447\u0435, \u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043a\u0430. \u0421\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0435. \u0417\u0430\u043f\u0438\u0441\u044c <strong>[class=\u201d\u043b\u043e\u043a\u0430\u0442\u043e\u0440\u201d]<\/strong> \u0438\u0449\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043a\u043b\u0430\u0441\u0441\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c <strong>[class=\u201dbtn-block\u201d]<\/strong> \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043b\u0430\u0441\u0441, \u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0439\u0434\u0435\u043d\u0430. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e <strong>[class=\u201dbtn-block btn btn-primary submit-button btn-block\u201d]<\/strong>, \u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0430\u0439\u0434\u0451\u0442\u0441\u044f.<\/p>\n<p>\u0418\u0437 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0432\u044b\u0445\u043e\u0434 \u0441\u0438\u043c\u0432\u043e\u043b \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438. \u041e\u043d \u0438\u0449\u0435\u0442 \u041f\u041e\u0414\u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. <\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u044c \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430<\/h2>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0443<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%9F%D0%BE%D0%B4%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B0\"><u>\u0432\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438<\/u><\/a>, \u0442\u0430\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0435. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/includes\"><u>includes \u0438\u0437 JS<\/u><\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041b\u043e\u043a\u0430\u0442\u043e\u0440 \u043a\u043d\u043e\u043f\u043a\u0438\u00ab\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\u00bb <strong>[class=\u201dbtn-block btn btn-primary submit-button btn-block\u201d]<\/strong> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>[class*=\u201dbtn-block\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dsubmit-button\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dbtn-block btn\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dbtn btn-primary\u201d]<\/p>\n<\/li>\n<li>\n<p>[class*=\u201dprimary submit\u201d] (\u043a\u043e\u043d\u0435\u0446 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u043e\u0434\u0440\u044f\u0434, \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c)<\/p>\n<\/li>\n<li>\n<p>\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u0430: \u043d\u0435 \u0434\u043b\u0438\u043d\u043d\u043e\u0435 submit-button, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e submit, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, [class*=\u201dsubmit\u201d]. \u041c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e submit \u2014 [class*=\u201dsub\u201d].<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c<strong> <\/strong>[class*=\u201dbtn-block submit-button\u201d], \u0442\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 <strong>btn-block<\/strong> \u0438 <strong>submit-button<\/strong> \u0438\u0434\u0443\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432: <strong>btn <\/strong>\u0438<strong> btn-primary<\/strong>. \u041d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438, \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0432 \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u043d\u0430 2 \u0440\u0430\u0437\u043d\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 2 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043b\u0438\u0442\u043d\u043e \u2014 <strong>[class*=\u201dbtn-block\u201d][class*=\u201dsubmit-button\u201d]<\/strong>. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043c\u044b \u0438\u0449\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441.<\/p>\n<p>\u0422<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-391843","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/391843","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=391843"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/391843\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=391843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=391843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=391843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}