HTML чӣ гуна ба саҳифаи веб табдил меёбад?

Процесът на преобразуване на HTML в уеб страница включва няколко основни етапа:

Парсване на HTML:
- Браузърът чете HTML кода и създава дърво от обекти — DOM (Document Object Model).
- DOM представя структурата на документа като възли (елементи, атрибути, текст).
Парсване на CSS:
- Браузърът чете CSS стиловете (външни, вътрешни, inline).
- Създава се дърво на стиловете — CSSOM (CSS Object Model).
Създаване на дърво за рендериране (Render Tree):
- DOM и CSSOM се обединяват.
- Създава се дърво от обекти, съдържащи визуална информация (кои елементи са видими и как трябва да изглеждат). Елементите с display: none не се включват в Render Tree.
Разпределение (Layout/Reflow):
- Точно се изчисляват геометричните координати и размерите на всеки елемент в Render Tree на екрана.
- Произвежда се преразпределение на елементите, ако техните размери или позиция се променят (например при промяна на размера на прозореца или добавяне на съдържание).
Рисуване (Painting):
- Визуално се изобразяват пикселите на екрана, използвайки информацията от Render Tree и резултатите от етапа на разпределение.
- Произвежда се слоесто рисуване (background, border, content).
Композиция (Compositing):
- Различните слоеве на рисуване се наслагват един върху друг в правилния ред за формиране на финалното изображение на страницата.

Тези етапи се изпълняват последователно, но някои от тях могат да се повтарят (например, Layout и Painting при промяна на DOM или стиловете след зареждане).

<!-- Пример за прост HTML5 документ -->
<!DOCTYPE html>
<html>
<head>
    <title>Пример на страница</title>
    <style>
        /* Пример за CSS стилове */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Здравей, свят!</h1> <!-- Елемент, който ще бъде добавен към DOM и Render Tree -->
    <p style="display: none;">Този текст е скрит.</p> <!-- Елемент в DOM, но не и в Render Tree -->
</body>
</html>

/* Пример за CSSOM за стиловете от HTML */
/* Представлява структурата на стиловете */
h1 {
    color: blue;
}

Браузърът парсира HTML и CSS, създава вътрешни модели, изчислява разположението на елементите и ги рисува на екрана.