{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С тем, что такое HTML теги , мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом","type":"unstyled","key":"2umth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.","type":"unstyled","key":"7vvip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как писать атрибуты?","type":"header-two","key":"bsras"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?","type":"unstyled","key":"cjnlg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения с атрибутами записываются в таком формате:","type":"unstyled","key":"3n5bc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут=”значение” \n lang=”en”","type":"unstyled","key":"b66ae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.","type":"unstyled","key":"2pts3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Абзац

","type":"unstyled","key":"7iv9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.","type":"unstyled","key":"dvc9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Универсальные атрибуты","type":"header-two","key":"dii4c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.","type":"unstyled","key":"bjtrv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":5,"offset":158,"style":"BOLD"}],"text":"accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.","type":"unordered-list-item","key":"2k82e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:","type":"unstyled","key":"60slh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ссылка будет открываться по нажатию сочетания клавиш с единицей","type":"unstyled","key":"52sao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.","type":"unordered-list-item","key":"4ic20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":10,"style":"BOLD"},{"length":4,"offset":222,"style":"BOLD"},{"length":5,"offset":248,"style":"BOLD"}],"text":"С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.","type":"unordered-list-item","key":"12cqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":20,"style":"BOLD"},{"length":6,"offset":162,"style":"BOLD"}],"text":"При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.","type":"unordered-list-item","key":"4jqkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":5,"offset":50,"style":"BOLD"},{"length":5,"offset":75,"style":"BOLD"}],"text":"dir определяет направление текста: слева направо (ltr) или справа налево (rtl) .","type":"unordered-list-item","key":"3n4o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":7,"offset":31,"style":"BOLD"},{"length":7,"offset":54,"style":"BOLD"}],"text":"draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.","type":"unordered-list-item","key":"3qq5m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":4,"offset":91,"style":"BOLD"},{"length":4,"offset":111,"style":"BOLD"},{"length":6,"offset":145,"style":"BOLD"}],"text":"dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy ), перемещать (move ) или создать на него ссылку (link) .","type":"unordered-list-item","key":"5pd6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"hidden — атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true — скрывается.","type":"unordered-list-item","key":"fu0o9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":3,"offset":355,"style":"BOLD"},{"length":3,"offset":376,"style":"BOLD"}],"text":"id задаёт идентификатор элемента — своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_) . Русских букв содержать не может.","type":"unordered-list-item","key":"9lm60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":2,"offset":201,"style":"BOLD"},{"length":2,"offset":219,"style":"BOLD"}],"text":"lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский — ru , английский — en и т. п.).","type":"unordered-list-item","key":"dqpql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":6,"offset":21,"style":"BOLD"},{"length":7,"offset":43,"style":"BOLD"}],"text":"spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.","type":"unordered-list-item","key":"79gqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"style позволяет задать оформление элемента с помощью CSS-кода.","type":"unordered-list-item","key":"8qda6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута — целое положительное число.","type":"unordered-list-item","key":"9q7sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"title — всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.","type":"unordered-list-item","key":"ci4nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск","type":"unstyled","key":"5ssae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":5,"offset":21,"style":"BOLD"},{"length":4,"offset":42,"style":"BOLD"}],"text":"translate разрешает (yes) или запрещает (no) перевод содержимого тега.","type":"unordered-list-item","key":"4fkjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":4,"offset":108,"style":"BOLD"},{"length":5,"offset":133,"style":"BOLD"},{"length":8,"offset":152,"style":"BOLD"},{"length":9,"offset":176,"style":"BOLD"},{"length":5,"offset":209,"style":"BOLD"},{"length":3,"offset":297,"style":"BOLD"},{"length":8,"offset":322,"style":"BOLD"}],"text":"align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left ), по правому краю (right ), по центру (center) или по ширине (justify) . Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.","type":"unordered-list-item","key":"dmcf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":45,"style":"BOLD"}],"text":"Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.","type":"unstyled","key":"5147b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример использования атрибутов","type":"header-two","key":"ehifl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве примера рассмотрим строку HTML-кода:","type":"unstyled","key":"7ofbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Этот текст можно редактировать

","type":"unstyled","key":"9uo7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.","type":"unstyled","key":"7g5il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберём каждый элемент строки.","type":"unstyled","key":"cnmfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"

— открывающий тег контейнера, хранящего абзац.","type":"unstyled","key":"at9lk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"

— закрывающий тег.","type":"unstyled","key":"81kh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":16,"style":"BOLD"},{"length":1,"offset":21,"style":"BOLD"}],"text":"Между символами > и < расположен текст Этот текст можно редактировать. Это — надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.","type":"unstyled","key":"adb13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"},{"length":4,"offset":18,"style":"BOLD"},{"length":15,"offset":102,"style":"BOLD"},{"length":4,"offset":120,"style":"BOLD"},{"length":15,"offset":136,"style":"BOLD"},{"length":4,"offset":228,"style":"BOLD"}],"text":"contenteditable =”true ” — это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:","type":"unstyled","key":"1mhao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут=”значение”\n contenteditable=”true”","type":"unstyled","key":"e0f00"},{"data":{"image":{"id":"6065726a4878ca659cdeb6e2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2pp6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"809cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b0ku7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hFPoaXLJ1OrzelmVLdMX"}],"entityMap":{}},"mentions":[]}