Кем можно работать в сфере веб-разработки
Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.
Одними из критически важных тем в изучении HTML является объектная модель документа или DOM (Document Object Model) и понятие потока документа. С этим нужно разобраться на старте, иначе в дальнейшем у вас могут возникнуть сложности во время практики.
Что такое объектная модель документа (DOM)?
Объектная модель документа это программный интерфейс (что-то вроде API) для HTML документов. DOM это структурное представление документа, которая определяет то, как с этим документом будут взаимодействовать программы на JavaScript, файлы стилей и т.п. Например, возьмём простой HTML документ:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Тестовый документ</h1>
<div class="content">Контент сайта</div>
</body>
</html>
- document
- html
- head
- meta
- title
- body
- h1
- div
- head
- html
По сути это древовидная структура HTML документа состоящая из узлов (html-тегов), каждый из которых обладает набором характеристик и методов для взаимодействия с ним.
Организация занимающаяся стандартизацией языка HTML определяет стандарты работы с DOM. На данный момент существует 2 стандарта W3C DOM и WHATWG DOM, которые реализованы во всех современных браузерах. Некоторые браузеры предлагают дополнительные расширения к указанным стандартам, поэтому перед использованием того или иного расширения, следует удостовериться в его работоспособности в популярных браузерах.
К примеру стандарт DOM указывает браузеру что метод getElementById() из кода ниже, должен вернуть узел HTML документа с заданным идентификатором:
//Получим корзину пользователя
var cartDiv = document.getElementById('userCart');
document — представляет объект самого документа. Через него можно к примеру можно получить доступ к событию загрузки документа, а например объект table необходим для работы с HTML-таблицами и т.п.. Полный перечень доступных объектов можно найти в документации к HTML.
Поток документа HTML
По умолчанию, браузер выводит элементы на страницу по порядку, так, как они описаны в исходном коде HTML документа. Если вы не применили к элементам никаких CSS стилей меняющих поведение элементов, то такой вывод будет являться нормальным потоком.
Все элементы веб-страницы имеют набор CSS стилей по умолчанию. И с точки зрения поведения в потоке разделяются на 3 группы, а именно:
- блочные элементы
- строчные элементы
- блочно-строчные элементы
За поведение элементов в этом ключе отвечает CSS свойство display.
Блочные элементы по умолчанию занимают 100% ширины родителя (обычно всей страницы) и воспринимают CSS свойства влияющие на внутренние и внешние отступы элемента.
Строчные элементы напротив не занимают 100% ширины их ширина зависит от содержимого элемента (например текста). Такие элементы располагаются по несколько в строке, пока не заполнят 100% ширины экрана (или родителя), далее они «переходят» на следующую строку. Строчные элементы не восприимчивы к CSS стилям влияющим на отступы элемента.
Блочно-строчные элементы, своего рода гибрид. Они ведут себя как строчные элементы, заполняя родительский элемент по ширине в зависимости от содержимого, но при этом блочно-строчные элементы «понимают» CSS стили отступов.
При помощи CSS можно менять поведение элемента в потоке. Существует несколько базовых свойство которые отвечают за это:
display— позволяет сделать элемент блочным, строчным или блочно-строчнымposition— позволяет изъять элемент из потока и закрепить его жёстко относительно экрана или родительского элемента.float— задаёт выравнивание элемента, а так же определяет как его будет «обтекать» соседние элемент, по сути тоже изымает элемент из нормального потока
Хочется добавить что display с недавнего времени пополнился таким значением как flex, т.е. гибкие блоки. Это очень полезный набор CSS свойств который позволяет удобно и валидно верстать адаптивные макеты. Мы рассмотрим детальнее каждый из приёмов в последующих статьях. Это лишь вводный материал и нужен он для того чтобы вы увидели «слона в тумане», так сказать имели общее представление на старте, а дальше мы заполним его деталями и у вас сложится чёткая картина того, как тут всё устроено.
