Продолжаем создавать свой мини-кликер с помощью HTML, JS и CSS.
В этой части мы подробнее поговорим
о тегах в HTML.
Предыдущая (первая) часть
Немного о тегах
Тег <div> — самый универсальный и частоиспользуемый тег в HTML, он имеет роль "контейнера" для других тегов. С помощью него мы можем логически разделить содержимое страницы на "блоки", например, на "шапку" сайта, главное содержимое и "подвал" сайта. Разделять на части мы можем и множеством других тегов, но самый стандартный — <div>.
<div> — блочный элемент страницы, и, как уже сказано, играет роль "контейнера" для других тегов. В отличии от тега <span>, так как это строчный элемент.
Блочный элемент, что понятно из названия, является блоком. Блоки занимают 100% ширины экрана, поэтому они будут начинаться каждый с новой строки. Строчный элемент, логично, строчный - он будет занимать нужную ему ширину и не будет переходить на новую строку.
Немного про приведенные выше жаргонные слова о содержимом сайта.
Шапка сайта (header) – это верхняя часть сайта. В ней, как правило, находятся логотип, название и меню сайта. Всё на ваш вкус.
Подвал сайта (footer) – нижняя часть сайта. Обычно там размещаются соц. сети, навигация по сайту, контакты и т.д.
Стоит заметить, что для шапки сайта и подвала сайта существуют специальные теги <header> и <footer> соответственно. Но они не имеют особой
функциональной разницы с тегом <div>, ибо используются только для оптимизации и лучшей читабельности. Это был лишь пример того, как "разделяется" страница.
Любой тег может иметь свой
класс (class). И даже несколько. Класс — это способ "определения" тега. Один класс может использоваться в большом количестве тегов. Например, с помощью CSS мы можем поменять стиль любого класса, и все теги, которые имеют этот класс, будут иметь свой стиль.
Аналог классов —
id. Он имеет те же самые свойства, что и класс, но один id может использоваться только в
одном элементе, а также один элемент может иметь только один id. Также id используются для "якорей", о которых мы поговорим позже.
Небольшой совет — классы лучше всего использовать в CSS, а id для JS.
В тегах могут размещаться любые другие теги. Теги внутри других тегов называются
вложенными.
Пример:
<div class="info">
<span class="contact">Вы можете связаться с нами по электронной почте!</span>
<span class="copyright">Все права защищены.</span>
</div>В этом примере в теге div с классом info располагаются два других элемента - span с классом contact и span с классом copyright. Если стиль info изменить и сделать цвет текста в нём красным, то текст внутри него будет красным.
Читать следующую часть.
