В своих предыдущих статьях, «Статические основы» и «Динамический веб», я сделал общее введение в область веб-разработки, но в следующей паре статей мы рассмотрим отдельные веб-технологии более глубоко и фундаментально. Итак, вы готовы к поездке? 🚍 Вот наша первая остановка — HTML.
Для начала, позвольте мне сказать прямо — HTML означает HyperText Markup Langauge, и это не язык программирования. (Упс… дебаты начались 🤦.) Прежде всего, мы должны понять, что такое язык разметки.
Язык разметки — это способ кодирования документа, в котором наряду с текстом используются метки или знаки, содержащие дополнительную информацию о структуре текста или его представлении.
Проще говоря, язык разметки используется для представления определенной части данных в определенной структуре; это может быть текст, изображения, таблицы и т. д. Он не может использоваться для программирования каких-либо задач, в отличие от того, на что должен быть способен язык программирования. HTML, XML, SVG — все это примеры языка разметки.
Теперь вернемся к HTML. Текст, который вы читаете на веб-страницах, — это не просто обычный текст, а целая куча информации о нем, которая говорит о структуре текста и о том, как он должен быть представлен. Рассмотрим в качестве примера следующее предложение
Меня зовут Сапиндер Сингх. Я создатель контента.
HTML-код для приведенного выше предложения выглядит следующим образом
<b>My Name is <i>Sapinder Singh</i>. I'm a <i>content creator</i>.</b>
Как видите, теги <b> (для полужирного) и <i> (для курсивного) имеют свой собственный способ представления данных, которые они содержат. Рассмотрим другой пример —
«Я использую VS Code для кодирования».
Этот текст содержит ссылку на другую веб-страницу, на которую можно перейти, щелкнув по выделенному тексту. И это, по сути, то, что означает «гипертекст» в HTML. 🫢 Гипертекст — это любой текст, содержащий ссылку на другой текст, доступ к которому можно получить, взаимодействуя с гиперссылкой
(которая в данном случае является «VS Code»). По сути, именно так мы переходим с одной веб-страницы на другую.
Синтаксический обзор HTML
HTML — это строительный блок веб-страницы. Он определяет различные типы текста и мультимедиа с помощью различных тегов, где каждый тег состоит из пары открывающих и закрывающих тегов. Например, если мы хотим написать абзац текста, мы откроем тег p как в <p>; вставим текст; а затем закроем тег как в </p>. Затем у нас есть атрибуты для каждого тега.
Атрибут — это просто свойство тега, которое содержит определенный тип значения. Мы определяем атрибут в форме name="value"; например, посмотрите на следующий фрагмент, определяющий гиперссылку с именем «VS Code». Для определения гиперссылки используется тег a (якорь), который требует атрибута href, который
должен указывать на URL-адрес.
<a href="https://code.visualstudio.com">VS Code</a>
Существуют теги, которые не нужно закрывать, они называются самозакрывающимися. Мы не предоставляем никакого значения, а только атрибуты
этим тегам. Самым основным примером самозакрывающегося тега является <!Doctype html>, с которого должны начинаться все документы HTML5. Он указывает браузерам следовать наиболее актуальным спецификациям для рендеринга страницы. Вы можете найти краткое & действительно хорошее объяснение Doctype на этой странице MDN. Тем не менее, все остальное в HTML-документе находится внутри тега html; именно поэтому его называют корневым элементом веб-страницы. Этот тег html состоит из двух частей — head и body.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
head
Заголовок head веб-страницы не виден непосредственно пользователю, так как содержит информацию, которую должен читать не пользователь, а браузер. Она содержит такую информацию, как:
- заголовок страницы, который используется в строке заголовка браузера и для оптимизации поисковых систем.
- стили для оформления веб-страницы. Эти стили написаны на языке CSS.
- скрипты для добавления исполняемого кода на веб-страницу. Единственное назначение скриптов — обрабатывать взаимодействие пользователя с веб-страницей.
- другие теги
metaдля дополнительной информации, такой как набор символов, фавиконы и другие типы метаданных.
Вот пример того, что мы обычно видим внутри тега head.
<head>
<!-- defines the character set of the web page -->
<meta name="charset" content="UTF-8">
<!-- defines the title of the web page -->
<title>The Theory Of HTML</title>
<!-- links the styles.css file to the web page -->
<link href="./styles.css" rel="stylesheet" type="text/css">
<!-- links the fonts from Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap"
rel="stylesheet preload">
<!-- links the script.js file to the web page -->
<script src="./script.js"></script>
</head>
body
Тег body представляет собой видимую часть веб-страницы. Все, что вы читаете, видите или с чем взаимодействуете на веб-странице, находится
помещается в тело страницы. Каждый тип содержимого представлен определенным тегом; некоторые из распространенных тегов следующие:
- p — представляет собой абзац текста.
- img — представляет изображение. Он требует атрибута
src, который должен содержать путь к изображению. - section — представляет раздел страницы.
- h1 — h6 — представляют собой уровень заголовка для раздела. Наименьший допустимый уровень заголовка —
<h6>. - кнопка — представляет собой кнопку.
- форма — представляет собой форму для отправки информации.
- input — представляет поле ввода. Оно может принимать различные типы ввода в зависимости от значения атрибута
type.
Вы можете прочитать больше о различных видах элементов HTML на справочной странице MDN по HTML.
Забавный факт
Если вы опустите, неправильно напишете или неправильно расположите любой из тегов в HTML, браузер, молча, просто отобразит страницу с неправильной или нарушенной версткой. В отличие от языка программирования, HTML не выдаст никакой ошибки; отсюда и доказательство того, что это просто язык разметки. 😉
Как происходит рендеринг веб-страницы
Итак, теперь вы знаете, как мы пишем HTML, но вы также должны знать, как происходит отображение веб-страницы вместе с источниками, которые связаны с HTML-файлом. Итак, как только HTML-файл попадает в браузер клиента, он начинает создавать так называемую объектную модель документа. DOM — это перевернутое дерево объектной модели, единственная цель которого — представить HTML-документ в памяти и сделать его понятным для JavaScript-движка браузера. Корнем этого дерева является элемент html, который разветвляется на head и body, которые далее разветвляются на свои дочерние элементы, и так далее, и так далее.
DOM представляет документ в виде логического дерева. Каждая ветвь дерева заканчивается узлом, а каждый узел содержит объекты. Методы DOM обеспечивают программный доступ к дереву. С их помощью можно изменить структуру, стиль или содержание документа.
MDN
При построении дерева DOM браузер сталкивается с несколькими связанными ресурсами, которые были определены в head документа. Учитывая фрагмент, который я привел в разделе head, вот что происходит дальше:
- Когда он встречает
linkдля файла ./styles.css, он приостанавливает разбор документа, запрашивает файл с сервера, разбирает стили и возобновляет процесс. - Затем он встречает
linkдля шрифтов; опять же, он сначала запрашивает шрифты, анализирует их и возобновляет процесс. - Наконец, он встречает тег
script, который он загружает и выполняет в зависимости от предоставленных атрибутов. (Подробнее читайте здесь)
Как только браузер заканчивает разбор документа и стилей, он объединяет их в Render Tree и определяет макет веб-страницы. Затем он окончательно отрисовывает документ, и мы видим веб-страницу в окне браузера. Весь этот процесс известен как Critical Rendering Path. Если вы хотите узнать о нем больше, вы можете прочитать это руководство
в MDN.
Подведение итогов
Ну вот и все, друзья! Надеюсь, вы нашли это руководство полезным для углубления ваших знаний о HTML и веб-страницах! Если вам понравилось, не забудьте подписаться на меня, чтобы не пропустить ни одного из моих будущих постов! Вы также можете проверить меня в Twitter, Github и LinkedIn.
Увидимся в следующем выпуске! 😉