HTML
Семантические теги
| Тег | Значение |
|---|---|
| < header > | Используется для определения заголовка или верхней части веб-страницы. Обычно содержит логотип, название сайта, навигацию и другие элементы. |
| < nav> | Определяет навигационное меню, такое как главное меню сайта. |
| < main > | Указывает на основное содержание страницы. Обычно на странице должен быть только один элемент |
| < section > | Используется для группировки связанных по смыслу элементов на странице. Это может быть главная часть статьи, раздел блога и т. д. |
| < article > | Обозначает независимую, самостоятельную часть контента, например, статью, блок новостей или запись в блоге. |
| < aside > | Определяет боковую информацию, которая может быть связана с главным контентом, но не является его неотъемлемой частью, например, боковую панель с виджетами. |
| < footer > | Используется для определения нижней части веб-страницы, которая обычно содержит контактную информацию, авторство и другую дополнительную информацию. |
| < time > | Позволяет размечать даты и времена на странице. Это особенно полезно для машинного понимания временных данных. |
| < figure > и < figcaption > | используется для вставки медиаконтента, такого как изображения, с описанием |
| < details > и < summary > | позволяет скрыть или раскрыть дополнительные сведения, а < summary > предоставляет заголовок для этой информации. |
| < abbr > | Определяет аббревиатуру или акроним, предоставляя полное значение при наведении курсора. |
| < dfn > | Обозначает термин или определение, обычно с подсказкой, которая появляется при наведении на термин. |
| < address > | Предназначен для разметки контактной информации или информации об авторе контента. |
Табличные теги
| Тег | Значение |
|---|---|
| < table > | Этот элемент определяет начало таблицы и ограничивает все другие табличные элементы |
| < caption > | Используется для добавления заголовка к таблице. Этот заголовок будет отображаться над таблицей |
| < thead > | Этот элемент группирует заголовки таблицы, обычно в первой части таблицы |
| < tbody > | Элемент группирует основное содержание таблицы, обычно располагается под < thead > |
| < tfoot > | Элемент группирует подвал таблицы, обычно располагается под < tbody > |
| < tr > | Элемент определяет отдельную строку в таблице. Внутри находятся одна или несколько ячеек < td > или < th > |
| < th > | Элемент используется для создания заголовков столбцов или строк в таблице. Он обычно выделяется жирным шрифтом и центрируется по умолчанию. |
| < td > | Элемент определяет ячейку с данными в таблице. Это место, где фактически размещается содержание таблицы. |
Мультимедийные теги
| Тег | Значение |
|---|---|
| < img > | Этот тег используется для встраивания изображений на веб-страницу. Он имеет атрибут src, который указывает путь к изображению. |
| < audio > | Этот тег позволяет встраивать аудиофайлы на страницу. Он имеет атрибуты src, controls (добавляет элементы управления) и другие для настройки воспроизведения аудио |
| < video > | Этот тег позволяет встраивать видеофайлы на страницу.У него есть атрибуты src, controls, autoplay, loop, width, height и другие. |
| < iframe > | Элемент позволяет встраивать другие веб-страницы в текущую страницу. Это может включать в себя встраивание видео с YouTube, карт Google и многое другое. |
| < embed > | Этот тег позволяет встраивать мультимедийные объекты, такие как Flash-анимации, аудио и видео, непосредственно на веб-страницу. |
CSS
Работа с ссылками и кнопками
| Свойство | Значение |
|---|---|
| text-decoration-line | Это свойство используется в CSS для определения стиля линии, которая добавляется к тексту с помощью свойства text-decoration. Оно позволяет делать подчеркивание, перечеркивание, линии над текстом и линии через текст. |
| cursor | Gри наведении указателя мыши на ссылку, вид курсора мыши меняется. |
| :hover, :active, :link, :visited | Это псевдоклассы CSS, которые позволяют определять стили для различных состояний гиперссылок (ссылок) на веб-странице. |
| box-shadow, text-shadow | Настройка тени. Горизонтальный отступ, вертикальный отступ, размытие,(px) цвет тени. inset - тень внутри объекта. |
| background | Множественные параметры заднего фона. |
| transition | Задает анимацию перехода состояний кнопки. Может использовать заданные параметры/время исполнения. Пример(transition: background-color 1s, font-size 1s;) |
| < transform > | Предоставляет множество возможностей для трансформации элементов визуально.маштабирование, перемещение, вращение,) |
| < > | |
| < > | |
| < > | |
| < > |
Элементы Flexbox
| Свойство | Значение |
|---|---|
| display: flex; | Flex-контейнеры — это полезные инструменты для создания веб-сайтов, реагирующих на изменения размеров экрана. Дочерние элементы гибких контейнеров изменят размер и расположение в зависимости от размера и положения родительского контейнера. |
| display: inline-flex; | Это свойство позволяет превратить элемент в блок с гибким (flex) контейнером, который будет вести себя как встроенный (инлайновый) элемент внутри текста. |
| justify-content | это CSS-свойство, которое используется для управления горизонтальным (горизонтальным выравниванием) контента внутри контейнера с использованием гибкого макета (flexbox). |
| align-items | Это свойство позволяет размещать гибкие элементы по вертикали. |
| flex-grow: 2; | позволяет нам указать, должны ли элементы расти, чтобы заполнить контейнер, а также какие элементы должны расти пропорционально больше или меньше, чем другие. |
| flex-shrink: 1; | определяет, как элементы в контейнере должны уменьшать свою размерность, чтобы поместиться внутри контейнера, если доступное пространство ограничено. |
| flex-basis: 100px; | позволяет нам указать ширину элемента до того, как он растянется или сожмется. |
| flex: 2 1 150px; | Свойство flex позволяет объявлять flex-grow, flex-shrinkи flex-basis все в одной строке. |
| flex-wrap: wrap; | определяет, должны ли элементы внутри контейнера переноситься на новую строку в зависимости от доступного пространства |
| align-content: space-around; | определяет выравнивание и распределение пространства между строками или колонками элементов в контейнере |
| flex-direction | это CSS свойство, используемое для определения направления оси гибкой компоновки (flexbox) в контейнере |
| flex-flow: column wrap; | свойство используется для объявления свойств flex-wrapи flex-directionв одной строке. |
Элементы Grid
| Свойство | Значение |
|---|---|
| display: grid; | Это свойство задает элементу CSS значение grid, чтобы определить его как контейнер для сетки. |
| grid-template-columns: 100px 200px; | Определяет количество столбцов в сетке, и из ширину (px, %, fr, repeat,minmax(размер)) |
| grid-template-rows: 10% 20% 600px | Определяет количество строк в сетке |
| grid-template: 200px 300px / 20% 10% 70%; | Заменяет предудущих 2 свойства |
| row-gap и column-gap или просто gap | Добавляет пустое пространство между каждой строкой и столбцом в сетке(px). |
| grid-row-start: 1; grid-row-end: 3; | Указывает сколько строк может занимать элементы |
| grid-row: 4 / 6; | Сокращение пердыдущих свойств |
| grid-column: 4 / span 2; | Аналогично но для столбцов. Span указывает количество строк/столбцов, которое будет занимать элемент |
| grid-area: 2 / 3 / 4 / span 5; | Это свойство будет устанавливать начальную и конечную позиции как для строк, так и для столбцов элемента. |
| grid-template-areas: "header header" "nav nav" "info services" "footer footer"; | позволяет вам называть разделы вашей веб-страницы, чтобы использовать их в качестве значений в свойствах grid-row-start, grid-row-end |
| justify-items: center; | Cвойство, которое позиционирует элементы сетки вдоль встроенной оси или оси строки. |
| justify-content: center; | Для позиционирования всей сетки вдоль оси строки |
| align-items: center; | Выравнивание и располажение элементов сетки сверху вниз |
| align-content: center; | Позиционирует строки вдоль оси столбца или сверху вниз и объявляется в контейнерах сетки. |
| justify-self и align-self | Определяет, как отдельный элемент должен позиционировать себя относительно оси строки и оси столбца |
| grid-auto-rows и grid-auto-columns | Предоставляет два свойства для указания размера неявно добавленных дорожек сетки |
| grid-auto-flow: column; | Указывает, следует ли добавлять новые элементы в строки или столбцы, и объявляется в контейнерах сетки. |