ВСЁ, что нужно знать о HTML тегах начинающему верстальщику. Необходимые теги для HTML

ВСЁ, что нужно знать о HTML тегах начинающему верстальщику. Необходимые теги для HTML


Привет! В этом видео я хочу с тобой
поговорить про HTML тэги. Их огромное количество и это сбивает новичков,
потому что непонятно что и с чем и как сочетается. В этом видео мы рассмотрим
самые необходимые из них. С помощью которых можно будет
сверстать практически любой сайт. Я подготовил такую шпаргалку.
Ссылку на неё я оставлю в описании. Думаю,
она вам будет тоже полезна. Именно по ней мы и пойдем. Типы тэгов. Они бывают одиночные, либо же парные.
А также строчные и блочные. Давайте посмотрим чуть
подробнее каждый из этих типов. Одиночные это:
img, input, hr и br. Что значит одиночные? Одиночные – это значит что
не требуются дополнительные закрывающие теги. Они самостоятельные.
Вот, например, br – это одиночный тэг. Парные – это все остальные.
Одиночных тэгов их буквально по пальцам сосчитать. Все остальные идут парные.
Например, тэг div. Здесь есть открывающаяся
часть и закрывающаяся часть. Блочные и строчные. Блочные занимают всю ширину, которая
есть у родителя, например, заголовки. Они все блочные. А строчные…
они занимают только ту часть, которая есть. Так, тут я не написал…
Например тэг span. Вот мы его инспектируем… видите? То есть выделяется область,
только в которой есть какое-то содержание. Так и отличаются блочные и строчные. Я в этой шпаргалке классифицировал тэги по назначению.
Так, я думаю, вам будет проще ориентироваться. Первое – заголовки. Заголовки обозначаются тэгами с h1 по h6. Списки в html есть разные. Они могут обозначаться через
dl, через ul или же через ol. Чуть подробнее о каждом. ol переводится как ordered list – нумерованный
список и отображается он с цифрами. ul – unordered list –
ненумерованный список и он выводится с вот такими буллетами. dl – с вложенными тэгами
dt и dd отображаются следующим видом: dl используется довольно-таки редко,
но я все-таки его оставил здесь. Наиболее часто встречающиеся
это всё-таки ul и ol. Они очень похожи между собой как минимум тем, что внутри
и первого и второго могут находиться только тэги li. Пошли дальше.
Таблица. Таблица довольно-таки сложный в разметке элемент, поскольку
она включает в себя довольно-таки большое количество тэгов. Но они схожие между собой. Таблица открывается тэгом table
и закрывается тэгом table. Внутри она содержит три блока.
Может содержать три блока: это шапка thead,
контентная часть tbody и подвал tfoot. Это основное разделение. Внутри структуры уже очень схожие:
tr – это идет определение строки, а th либо td это идет
определение колонки. Так, например, в шапке у нас есть две строки
и в каждой строке по две колонки. Форма.
Формы бывают разные. Они могут состоять из одного поля, например,
поиск – это поле ввода и кнопка. Также это могут быть и сложные формы.
Например, по регистрации. Элементы формы оборачивается в тэг form, на
который навешивается атрибут action, который отрабатывает уже
какое-то действие. Отправку формы. Тэг input.
Про атрибуты в этом видео я не хотел говорить, но здесь просто невозможно их обойти стороной поскольку
тэг input решает сразу несколько задач. Так, например, при атрибуте type со значением
text он выводит вот такое поле. Если мы значение данного атрибута поменяем на checkbox,
например, она меняется уже вот в вид такого чекбокса. Если мы заменим на password, то выглядит она практически так же,
как и текст, но здесь появляется вот такая иконочка с паролем. И то, что мы вводим – оно уже со звездочками. И этих
параметров довольно-таки много, но они очень просты. Главное, нужно запомнить, что, если разговор идет про форму,
то скорее всего там будут применяться тэги input. Textarea – это для ввода
многострочного текста. Тег select с вложенными в него тэгами
option используется для обозначения списка. Этих элементов может быть много.
Ну и куда же форма без кнопки? Кнопка обозначается тэгом button. Все сайты, до 90 процентов в
разметке состоят из обёрток. Большая часть из них – div. И эти обёртки есть
двух типов: блочные – div и строчные – span. Стилизация текста делается строчными тэгами.
em делает текст курсивом, strong – жирным, u – подчёркнутым. Ссылки делаются тэгом а. Если написать чуть более
расширенно, это будет выглядеть вот так. Это куда мы переходим. Здесь какое-то
описание ссылки и закрывающий тэг. И она становится такой вот.
И атрибуты. Атрибуты это не тэг. Это атрибуты.
Атрибуты есть у всех тэгов и у каждого из тэгов
они могут отличаться. Но при этом есть атрибуты,
которые есть абсолютно у всех тэгов. Это class, id и style. Class это указание имени, по которому будет обращение из css для
того, чтобы вы могли стилизовать данный элемент. id – это уникальный идентификатор.
Обычно он используется для подключения каких-то плагинов и он уникальный на странице.
id=”name” может быть только один на странице иначе будут какие-то ошибки, проблемы,
если мы говорим о форме и о подключении плагина. И не используйте, пожалуйста,
id для каких-то стилей. Атрибут style используется для того, чтобы описывать стили
напрямую в html разметке, а не в классе. Это обычно используется, когда происходит,
например, какая-то анимация типа loading bar’а. Надеюсь,
это видео было вам полезно. В следующем видео мы рассмотрим стили. Если у вас
возникли какие-то вопросы оставляйте их в комментариях. Подписывайтесь на канал и до встречи в новом видео.
Пока!

Leave a Reply

Your email address will not be published. Required fields are marked *