Html css теги атрибуты

Справочник по HTML

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

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

Источник

Теги и атрибуты

Тег (tag) — элемент языка разметки гипертекста. Это самые маленькие строительные блоки, из которых состоит любая веб-страница. Каждый тег обозначает какую-то сущность: заголовок, список, абзац текста, изображение.

Для выделения тегов среди текста документа используются угловые скобки, в которых указывается имя тега и его атрибуты.

Открывающий тег указывает на то, где начинается элемент, закрывающий — где заканчивается. Закрывающий тег образуется путем добавления слэша ( / ) перед именем тега. Между открывающим и закрывающим тегами находится содержимое тега — контент.

section>Секцияsection> p>Абзацp> a>Ссылкаa> button>Кнопкаbutton> 

Комментарии​

Комментарии используются для того, чтобы оставить в исходном коде пояснение, заметку, временно закомментировать участок кода и т. п.

   p>Это абзац текста, он будет на странице.p>    Комментарий может быть многострочным.  Это удобно для более ёмких описаний. --> 

Атрибуты​

Атрибуты это дополнительные настройки тегов, при помощи которых можно изменять свойства и поведение элемента. У каждого тега есть обязательные и необязательные атрибуты, их может быть несколько или не быть вовсе.

Атрибуты записываются внутри открывающего тега, а их значения располагаются внутри двойных кавычек. Несколько атрибутов разделяются пробелом.

a href="https://google.com" class="link">. a>  img src="cat.jpg" alt="cute cat" />  input type="text" name="user_name" />  button type="submit">. button>  p class="text">. p> 

Рассмотрим некоторые атрибуты тега .

a href="http://google.com" target="_blank" title="Поисковая система Google">  Google.com a> 

• href — адрес страницы, на которую перейдёт пользователь при нажатии на текст ссылки.
• target — указывает то, в какой вкладке откроется страница при клике по ссылке.
• title — добавляет всплывающую подсказку к тексту ссылки.

Рассмотрим некоторые атрибуты тега .

img src="https://picsum.photos/640/480" alt="Произвольная картинка от генератора" /> 

• src — адрес изображения.
• alt — альтернативный текст, который будет показан если картинка не загрузилась.

Для того, чтобы узнать доступные атрибуты тега и их назначение, можно зайти в документацию или справочник, например htmlreference.io.

Парные теги​

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

  article> h1>Кратко о парных тегахh1> p>  Большинство тегов парные. Их контент заключён между открывающим и  закрывающим тегом. p> article> 

Одиночные теги​

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

  meta charset="utf-8" />    input type="text" />    img src="cat.jpg" alt="cool cat" /> 

В предыдущих стандартах HTML одиночные теги обязательно записывались с обратным символом / перед закрывающей скобкой. Например или . В современном стандарте это необязательно и ни на что не влияет.

Вложенность тегов​

Придерживаясь некоторых правил, теги можно вкладывать друг в друга. При вложении следует соблюдать порядок их закрытия по принципу матрёшки.

тег1> тег2> тег4>. тег4> тег5>. тег5> тег2> тег3> тег6>. тег6> тег3> тег1> 

Вот валидная разметка абзаца со ссылкой и выделенным текстом, а также списка преимуществ с описанием.

p> a href="squoosh.app">Squoosha> - сервис em>оптимизацииem> изображений. p>  p>Преимуществаp> ul> li>Работает в браузереli> li>Не грузит системуli> li>Удобный интерфейсli> ul> 

А в этой версии есть проблемы (строки подсвечены).

  p>a href="squoosh.app">Squoosha> - сервис em>a>оптимизацииp> изображений.em>    ul> p>Преимуществаp> li>Работает в браузереli> li>Не грузит системуli> li>Удобный интерфейсli> ul> 

Спецификация HTML​

Спецификация HTML Living Standard — главный документ, описывающий стандарты, возможности и будущее развитие языка HTML.

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

HTML-элемент — это термин, описывающий некую семантическую сущность в стандарте HTML. Например абзац, заголовок, список или ссылку. В HTML-документе элемент представлен тегом (парным или одиночным) — синтаксической конструкцией языка HTML.

Вложенность тегов​

Алгоритм определения возможности вложения тега довольно прост.

• Идем в спецификацию и находим нужный элемент.
• Проверяем контентную модель элемента (Content model), в который вкладываем.
• Проверяем категории элемента (Categories), который вкладываем.
• Если категория подходит и ограничения не запрещают, то вкладывать можно, иначе нельзя.

Уже через пару дней использования HTML вы привыкнете правильно вкладывать элементы друг в друга, так как правила вложенности станут интуитивно понятны после знакомства с основными тегами.

Справочники​

Кроме спецификации под рукой полезно иметь справочники и шпаргалки. Помнить всё наизусть не нужно, более специфические или редко используемые вещи всегда можно подсмотреть.

Источник