Сборник всех html тегов

HTMLBASE — самый современный справочник по HTML и CSS.

Для тех кто начал изучать HTML и CSS. Здесь вы найдете описание всех HTML тегов и атрибутов, описание CSS свойств и значений, много примеров кода, а так же видео и задачи для эффективного обучения.

HTML теги

CSS свойства

• Псевдоклассы и псевдоэлементы
• ::after псевдоэлемент
• ::before псевдоэлемент
• ::first-letter первый символ в тексте
• ::first-line первая строка
• ::placeholder текст по умолчанию в элементах форм
• :active момент нажатия
• :checked выбранный radio, checkbox, option
• :disabled неактивное состояние элемента
• :empty если элемент пустой
• :first-child первый элемент
• :first-of-type первый потомок по типу
• :focus фокус на элементе
• :hover наведение на элемент
• :invalid неверное заполнение элементов форм
• :last-child последний дочерний элемент
• :last-of-type последний потомок по типу
• :not элементы, не соответствующие селектору
• :nth-child по номеру элемента в дереве
• :nth-last-child по номеру элемента в дереве с конца
• :nth-of-type по тегу и номеру элемента
• :required обязательный элемент формы
• :valid верное заполнение элементов форм
• :visited посещенная ссылка
• a
• align-content выравнивание строк вдоль поперечной оси flex/grid
• align-items выравнивание элементов flex/grid по поперечной оси
• align-self выравнивает элемент flex/grid по поперечной оси
• animation создание анимации
• animation-delay задержка старта анимации
• animation-direction направление анимации
• animation-duration время длительности анимации
• animation-fill-mode стили объекта анимации до и после ее выполнения
• animation-iteration-count кол-во повторений анимации
• animation-name имя анимации
• animation-play-state состояние анимации
• animation-timing-function функция расчета значений анимации
• b
• backface-visibility
• background все правила фона
• background-attachment поведение фонового изображения при скролле
• background-blend-mode Способ наложения фона
• background-clip поведение фона при наличии границы
• background-color цвет фона
• background-image фоновое изображение
• background-origin область позиционирования фонового изображения
• background-position позиционирование фонового изображения
• background-repeat повтор фонового изображения
• background-size размер фонового изображения
• border граница элемента
• border-bottom граница снизу
• border-bottom-color цвет границы снизу
• border-bottom-left-radius закругление нижнего левого угла
• border-bottom-right-radius закругление нижнего правого угла
• border-bottom-style стиль границы снизу
• border-bottom-width толщина границы снизу
• border-collapse поведение границ таблицы
• border-color цвет границы
• border-left граница слева
• border-left-color цвет границы слева
• border-left-style стиль границы слева
• border-left-width толщина границы слева
• border-radius закругление углов
• border-right граница справа
• border-right-color цвет границы справа
• border-right-style стиль границы справа
• border-right-width толщина границы справа
• border-style стиль границы
• border-top граница сверху
• border-top-color цвет границы сверху
• border-top-left-radius закругление верхнего левого угла
• border-top-right-radius закругление верхнего правого угла
• border-top-style стиль границы сверху
• border-top-width толщина границы сверху
• border-width толщина границы элемента
• bottom позиция от нижнего края
• box-shadow тень элемента
• box-sizing алгоритм подсчета размеров
• c
• clear очистка обтеканий
• color цвет текста
• cursor вид курсора
• d
• display тип элемента
• f
• flex flex-grow + flex-shrink + flex-basis
• flex-basis начальный размер flex элемента
• flex-direction задает основную ось flex контейнера
• flex-flow flex-direction + flex-wrap
• flex-grow рост flex элементов
• flex-shrink сжатие flex элемента
• flex-wrap перенос элементов flex контейнера
• float плавающий элемент
• font все правила шрифта
• font-family семейство шрифтов
• font-size размер шрифта
• font-style наклон шрифта
• font-variant модификация символов шрифта
• font-weight толщина шрифта
• g
• grid-column-gap отступ между столбцов grid сетки
• grid-gap отступ между строк и ячеек grid
• grid-row-gap отступ между строк grid сетки
• grid-template-areas элементы grid сетки
• grid-template-columns размеры столбцов grid сетки
• grid-template-rows размеры строк grid сетки
• h
• height высота элемента
• j
• justify-content выравнивание flex элементов по главной оси
• justify-self выравнивание grid элемента
• l
• left позиция от левого края
• letter-spacing отступ между символами
• line-height межстрочный отступ
• list-style стилизация списка
• list-style-image изображение маркера элементов списка
• list-style-position позиция маркера элементов списка
• list-style-type стиль маркера элемента списка
• m
• margin внешний отступ
• margin-bottom внешний отступ снизу
• margin-left внешний отступ слева
• margin-right внешний отступ справа
• margin-top внешний отступ сверху
• max-height максимальная высота
• max-width максимальная ширина
• min-height минимальная высота
• min-width минимальная ширина
• o
• object-fit Заполнение элемента
• object-position Позиция заполняемого элемента
• opacity непрозрачность элемента
• order порядок flex элемента
• outline обводка элемента
• outline-color цвет обводки
• outline-offset отступ обводки
• outline-style стиль обводки
• outline-width толщина обводки
• overflow Переполнение блока
• overflow-wrap разрыв строк в неразрывной строке
• overflow-x переполнение по оси X
• overflow-y переполнение по оси Y
• p
• padding внутренний отступ
• padding-bottom внутренний отступ снизу
• padding-left внутренний отступ слева
• padding-right внутренний отступ справа
• padding-top внутренний отступ сверху
• perspective эффект перспективы
• pointer-events контроль событий мыши
• position позиционирование элемента
• r
• resize изменение размера элемента
• right позиция от правого края
• t
• table-layout расчет размеров ячеек таблицы
• text-align выравнивание текста
• text-align-last выравнивание текста последней строки
• text-decoration декорация текста
• text-decoration-color цвет линии подчеркивания
• text-decoration-line линия подчеркивания текста
• text-decoration-style стиль линии подчеркивания
• text-indent отступ абзаца
• text-overflow поведение скрытого текста
• text-shadow тень для текста
• text-transform меняет регистр текста
• top позиция от верхнего края
• transform трансформация элемента
• transform-origin точка трансформации
• transform-style плоскость дочерних элементов
• transition плавный переход свойства
• transition-delay задержка перед запуском перехода
• transition-duration длительность плавного перехода
• transition-property свойство плавного перехода
• transition-timing-function функция расчета перехода
• v
• vertical-align вертикальное выравнивание
• w
• white-space Обработка пробелов элемента
• width ширина элемента
• word-break как делать перенос текста
• word-spacing интервал между словами
• z
• z-index индекс элемента по оси Z

Источник

Справочник HTML

HTML справочник — это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).

Для удобства все HTML теги разбиты на категории, согласно их назначению. Если вам нужен како-то конкретный тег, то в левом меню теги отсортированы в алфавитном порядке. Чтобы посмотреть полное описание тега и его атрибутов перейдите по ссылке, нажав на интересующий вас тег.

Вставляемый контент

• audio — звуковое содержимое
• canvas — область для рисования графики посредством сценариев
• embed — область для внешнего приложения или интерактивного содержимого
• area — активная область внутри карты-изображения
• iframe — встроенный фрейм
• img — изображение/картинка
• map — карта-изображение
• object — внешний подключаемый ресурс
• param — значения параметров для объекта (используется внутри элемента )
• source — звуковой/видео файл для тегов и
• track — текстовые дорожки для медиа элементов ( и )
• video — видео файл

Интерактивные элементы

Комментарии

Корневой элемент

Метаданные документа

Метаданные — структурированная информация о веб-странице, размещаемая внутри HTML-документа в элементе head.

Разделы документа

• address — контактная информация автора документа/статьи
• article — статья
• aside — определяет контент в стороне от содержимого страницы
• blockquote — длинная цитата
• body — тело документа
• div — контейнер для элементов
• figcaption — подпись к содержимому элемента
• figure — контейнер для группировки контента (обычно используется с элементом )
• footer — нижний колонтитул (нижняя часть документа или раздела)
• header — верхний колонтитул (верхняя часть документа или раздела)
• hr — горизонтальная линия
• main — контейнер с основным контентом
• nav — раздел навигационных ссылок
• section — раздел документа

Списки

Ссылки

Сценарии

Таблицы

Текст

• abbr — аббревиатура
• b — выделяет текст жирным шрифтом
• bdi — изолирует фрагмент текста для изменения его направления вывода
• bdo — переопределяет текущее направление текста
• br -разрыв строки
• cite — название работы (название книги, музыки, фильма, и т.д.)
• code — определяет кусок программного кода (моноширинный текст)
• del — определяет текст, который был удален из документа (перечеркнутый текст)
• dfn — определения термина (текст с наклонным начертанием)
• em — выделенный текст (текст с наклонным начертанием)
• h1-h6 — заголовки
• i — преобразует текст в курсивный (текст с наклонным начертанием)
• ins — определяет текст, который был добавлен в документ (отображает текст подчеркнутым)
• kbd — определяет текст вводимый с клавиатуры (моноширинный текст)
• mark — определяет важную часть текста
• p — абзац
• pre — предварительно отформатированный текст
• q — определяет короткую цитату
• rp — определяет, что показывать браузеру, который не поддерживает тег
• rt — определяет объяснение/произношение символов, используется внутри тега
• ruby — определяет небольшую аннотацию (для типографии Восточной Азии)
• s — определяет текст, который больше не является правильным
• samp — моноширинный текст
• small — текст маленького размера
• span — контейнер для строчного содержимого
• strong — определяет важный текст (преобразует шрифт в полужирный)
• sub — определяет текст в нижнем индексе (подстрочный текст)
• sup — определяет текст в верхнем индексе (надстрочный текст)
• time — определяет время/дату
• u — подчеркнутый текст
• var — определяет переменную (текст с наклонным начертанием)
• wbr — определяет возможный перенос строки в тексте

Формы

• button — определяет интерактивную кнопку
• datalist — список вариантов, которые можно выбирать при наборе в текстовом поле ввода
• fieldset — контейнер для объединения элементов формы
• form — форма для отправки введенных пользователем данных
• input — определяет способ пользовательского вода
• keygen — используется для генерации пары ключей
• label — метка для элемента формы
• legend — заголовок для элемента
• meter — определяет скалярное измерение в пределах известного диапазона
• optgroup — определяет группу связанных логически элементов списка в выпадающем списке
• option — вариант выбора в выпадающем списке
• output — определяет область, в которую выводится результат расчета
• progress — отображает текущий прогресс выполнения задачи
• select — выпадающий список
• textarea — многострочное текстовое поле

Теги html

Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».

Термины «HTML элемент» и «HTML тег» обычно используются как синонимы. Но в соответствии со спецификацией W3C элемент – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега, такие элементы называются одиночными или пустыми, но несмотря на то, что они не могут содержать в себе никакого контента, они все равно считаются полноценными элементами.

На страницах сайта понятия тега и элемента используются для обозначения одного и того же – структурной единицы языка HTML, которая применяется для разметки документа.

Если вы желаете узнать больше о создании веб страниц, тегах и их применении, то можете заглянуть в наш Самоучитель по HTML.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник