Что такое HTML и CSS?
HTML (HyperText Markup Language) — это "скелет" веб-страницы. Он определяет её структуру: где заголовок, где параграф, где картинка. HTML-файлы обычно называют index.html (для главной страницы) или по имени страницы, например, contacts.html.
CSS (Cascading Style Sheets) — это "одежда" для этого скелета. Он отвечает за внешний вид: цвета, шрифты, отступы и расположение элементов. CSS-файлы обычно называют styles.css или main.css.
Синтаксис HTML
- Теги: Это команды, заключенные в угловые скобки. Большинство тегов парные: открывающий
<p>и закрывающий</p>. - Атрибуты: Дают тегу дополнительную информацию. Они всегда указываются в открывающем теге и состоят из имени и значения.
<a href="https://example.com">Это ссылка</a>Синтаксис и подключение CSS
- Правило состоит из селектора (к чему применяем стиль) и блока объявлений (какой стиль применяем).
- Объявление состоит из свойства и его значения, разделенных двоеточием.
p.highlight { \n color: orange;\n font-size: 18px;\n}Способы подключения (от лучшего к худшему):
- Внешний файл (
<link>): Самый правильный способ. Стили хранятся в отдельном.cssфайле. - Внутренние стили (
<style>): Стили описываются внутри HTML-документа. - Встроенные стили (атрибут
style="..."): Стиль применяется к конкретному элементу. Имеет наивысший приоритет.
Код
Результат
Код
Результат
Зачем тестировщику знать HTML и CSS?
- Поиск багов вёрстки. Находить "поехавшие" кнопки, текст, вылезающий за границы блока, и несоответствия макету.
- Написание стабильных локаторов. Понимать, как найти нужный элемент для автотеста по его `id`, `class` или другим атрибутам, чтобы тесты не падали после малейших изменений.
- Тестирование доступности (Accessibility). Проверять наличие `alt` у картинок для скринридеров, правильное использование тегов заголовков для навигации.
- Эффективное общение с разработчиками. Вместо "кнопка кривая" говорить "у кнопки `margin-right: -10px`, поэтому она наезжает на текст". Это ускоряет исправление бага.
- Анализ причин багов. Открыв DevTools, часто можно сразу понять, почему элемент отображается неверно (например, другой стиль его переопределил), и дать разработчику точную наводку.
