Сколько всего тегов в css

Сколько всего тегов в HTML (HTML5)?

Задался тут вопросом сколько всего тегов в действующем HTML (так как на данный момент это HTML5, соответственно сколько всего тегов в нем).

Просто в том же Dash’e (который берет данные с мозилы) их 135, но как выяснилось некоторые уже не поддерживаются в HTML5. Большинство статей и книг по HTML5 которые я видел, рассказывали лишь о новых тегах пятой версии, что как бы не очень информативно для человека который только начал изучать html. И вот наткнулся на сайт https://webref.ru/html (ссылка вела с htmlbook.ru), который говорит нам (если снять галочки с пунктов "Нестандартные" и "Осуждаемые"), что всего тегов в HTML5 ровно 111 🙂 То есть это те теги, которыми в данный момент времени можно оперировать. Их поддерживают все (или почти все) браузеры и все они описаны в стандарте HTML5.

Это правильная информация? Или нужно смотреть куда то еще? С английским у меня плохо к сожалению 🙁

Стиль кода Академии HTML

При написании кода вам сложно будет запомнить все правила кодгайда. Эту работу стоит отдать роботам.

  • Для поддержания единообразия в коде используйте EditorConfig.
  • Для HTML используйте linthtml.
  • Для стилей Stylelint.

По ссылкам находятся конфигурации Академии для этих инструментов. Конфигурации частично покрывают то, что описано в этом стиле кода, и в них нет ничего, что не описано ниже.

Группировка файлов

  • Файлы схожих типов группируются в папки: картинки, стили, скрипты, шрифты.
  • Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.

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

Код проекта соответствует параметрам EditorConfig:

Базовые части разметки

Минимальная обязательная структура HTML-документы состоит из:

  • Современный тип документа <!DOCTYPE html>
  • Корневой элемент <html> с языком документа lang
  • Метаинформация <head>
  • Заголовок документа <title>
  • Кодировка документа <meta charset="utf-8"> . Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
  • Тело документа <body>

Регистр тегов и атрибутов

Имена тегов, атрибуты и их значения записаны строчными.

Исключение: атрибуты для SVG-элементов, например: viewBox , preserveAspectRatio и другие.

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

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

Двойные и одиночные теги

  • Двойные теги имеют открывающий и закрывающий теги.
  • Одиночные теги не имеют закрывающий тег или слэш.

Порядок атрибутов

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

Логические атрибуты

Логические атрибуты записаны без значения и в единообразной последовательности во всём документе.

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

В записи атрибутов нет пробелов вокруг знака «равно» = .

Кавычки в атрибутах и в значениях

  • Значения атрибутов записаны в двойных кавычках.
  • Вложенные кавычки в значениях являются одинарными.

Размеры замещаемых элементов

  • У изображений, видео и iframe указаны размеры.
  • По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
  • В атрибутах нет единиц измерения.

Разделители в имени класса

Разделителями в имени класса являются только дефисы — и подчёркивания _ . В коде необходимо придерживаться одного стиля.

Атрибут method в форме

В атрибуте method указан тип отправки данных.

Подключение стилей

Стилевые файлы подключены с помощью <link> внутри <head> . При этом атрибут type для тега <link> не указан, так как его значение text/css устанавливается по умолчанию.

Подключение скриптов

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

При подключении скриптов в теге <script> атрибут type не указан, так как его значение text/javascript устанавливается по умолчанию.

Валидность

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

Правило @import

Правило @import работает медленнее, чем тег <link> . В стилях @import не использован.

Регистр селекторов и свойств

Селекторы и свойства записаны строчными буквами.

Структура объявления

  • Перед открывающейся фигурной скобкой стоит пробел. После скобки запись идёт с новой строки.
  • Свойства стоят на отдельных строках.
  • Свойства внутри блока имеют один внутренний отступ.
  • После двоеточия стоит пробел. Перед двоеточием пробел не нужен.
  • В конце объявления стоит точка с запятой.
  • Закрывающая скобка стоит на новой строке и без отступа.
  • Между блоками правил есть одна пустая строка.

Имена классов

  • Имена классов записаны строчными буквами.
  • Имена классов такие, что по ним можно быстро понять, какому элементу страницы задан класс. Избегайте сокращений, но не делайте их слишком длинными (более трёх слов).
  • Для написания классов использованы английские слова и термины. В названиях классов и атрибутов нет транслита.

Перенос селекторов

Селекторы, разделённые запятой, записаны на новых строках.

Пробелы между комбинаторами

До и после комбинатора между селекторами стоит один пробел.

Формат цветов

  • Цвета записаны строчными в 6-значном формате HEX.
  • Шестнадцатеричное значение цвета не сокращено, а записано полностью из всех шести символов. Для записи использованы строчные буквы.
  • Цвета могут быть записаны функциями rgba или hsla , если нужна прозрачность.

Кавычки

  • Во всех случаях в стилях использованы двойные кавычки.
  • В необязательных случаях кавычки не опущены.

Ведущий ноль и пробелы после запятых

  • Начальный ноль для значений не сокращён.
  • После запятых в перечислениях стоит пробел.

Повторяющиеся свойства

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

Единицы измерения

  • Единицы измерения не указаны там, где в них нет необходимости.
  • В кастомных свойствах нужно указывать единицу измерения.

Дробные значения

В дробных значениях нет больше двух знаков после точки.

!important

  • Ключевое слово !important не использовано для борьбы со специфичностью.
  • Универсальные классы-хелперы могут использовать !important .

Доступное скрытие

Контент скрыт утилитарным классом visually-hidden , чтобы он был доступен для скринридеров и поисковиков.

Порядок свойств

Объявления логически связанных свойств сгруппированы в следующем порядке:

  1. Позиционирование
  2. Блочная модель
  3. Типографика
  4. Оформление
  5. Анимация
  6. Разное

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

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

Сгруппированные объявления в правиле отделены друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.

Конспект «Основы HTML и CSS»

HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки».

Язык HTML отвечает за структуру и содержание страницы. HTML состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов: <h1&gt , <p&gt , <ul&gt .

Парные теги

Теги бывают парными и одиночными. Парные теги могут содержать текст и другие теги. У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег:

В закрывающей части парных тегов перед именем ставится символ / («слэш»).

В парные теги можно вкладывать другие теги. Например, как в списках:

У вложенных тегов всегда нужно следить за правильным порядком закрытия. Вложенный тег не может закрываться позже родительского:

Не все теги можно вкладывать в другие теги, например, тег <h1> нельзя вкладывать в <p> .

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

Существуют не только парные, но и одиночные теги. Например, тег <img> позволяет добавить картинку в разметку.

Сам по себе <img> не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src :

У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

Например, картинке при желании можно задать размеры:

Комментарии

Код, заключённый между символами <!— и —> , работать не будет. Если эти символы удалить, то код заработает, это называется «раскомментировать». С помощью комментариев обычно временно отключают какой-то код или оставляют подсказки и разъяснения.

CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».

Язык CSS отвечает за внешний вид страницы.

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

Стили к тегам добавляются чаще всего при помощи атрибута class .

Например, если мы хотим, чтобы определённые стили, описанные, допустим, в классе feature-kitten , применились к тегу <p>, то в разметке напишем так:

CSS-правила

Можно сказать, что CSS-правило — это группа свойств и их значений, которая целиком применяется к тем тегам, на которые указывает селектор.

И выглядит это так:

Задавать стили можно не только с помощью атрибута class , но и по тегам. Селектор указывает, к каким тегам применятся свойства из CSS-правила. Селекторы по тегам работают проще всего: они выбирают все теги с подходящим именем.

В примере селектором является p , и он выбирает все теги с именем p (то есть теги <p> ), а теги с другим именем, например h1 , не выбирает.

Когда же стилизация задаётся по классам, то стили применяются только к тегам с такими классами.

Миксование классов

У HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:

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

Комментарии

В CSS тоже существуют комментарии, их отличие от HTML-комментариев в том, что код или подсказки пишутся между символами /* и */ .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *