Вот такой удобный инструмент 🔥 находится прямо в Вашем браузере , который будет помогать Вам в разработке Вашего сайта 😁
2 года назад
obukhovskiy2007@mail.ru
1
подписчик
Марк Обуховский
🤓 "Создание Веб-сайта:" DevTools - это инструмент, которым разработчики сайтов пользуются постоянно. 🦾 Многие из Вас уже видели этот инструмент и даже пользовались, чтобы поменять какой-либо текст на странице. (Многие делали так на уроках информатики 🤭) ❓Чем же удобен DevTools? 🤔 — Вы можете просматривать код страницы, изменять его и при этом ничего не испортите 😉 (страница вернется в первоначальное положение после перезагрузки 🔄). Вызвать DevTools можно с помощью нажав на элемент правой кнопкой мыши и выбрав пункт "Просмотреть код" или "Исследовать элемент" (на разных компьютерах по разному) Наиболее часто используются вкладки style и computed. ❔За что же отвечает каждая из них? 🤷♂ • Во вкладке style мы можем увидеть все стили, которые имеет объект. Применение любого стиля мы можем отменить, просто убрав галочку. При этом строка со стилем зачеркнётся. • Во вкладке computed мы можем увидеть блочную модель элемента - размеры полей, отступов, границ и самого элемента.
🤓 "Создание Веб-сайта:" Как я уже говорил, бывают случаи, когда мы не можем сгруппировать элементы на странице, используя семантические теги. В этом случае мы используем тег div. Чтобы сделать данный тег доступным, мы используем атрибут role="..." <div role=" "> </div> Другими словами, мы присваиваем нашей группе какую-то роль. —❓А какие роли бывают? 🤷♂ — <div role="banner"></div> <!-- Заголовок страницы / баннер --> <div role="img"></div> <!-- Группировка изображений --> <div role="comment"></div> <!-- Обозначение комментария --> <div role="contentinfo"></div> <!-- Обозначение таких данных, как номер телефона / адрес --> <div role="alert"></div> <!-- Сообщает о том, что контент внутри группы может измениться --> <div role="navigation"></div> <!-- Указывает на секцию навигации со списком ссылок --> <div role="complementary"></div> <!-- Определяет дополнительный раздел, который может функционировать независимо --> <div role="button"></div> <!-- Интерактивный элемент, предназначенный для нажатия --> Вот такие роли мы можем присваивать тегам группировки для усиления их семантики