10 шпаргалок по HTML и CSS

Аватарка пользователя Марина Александровна

Собрали небольшой перечень чит-листов по HTML и CSS, которые помогут и в учёбе, и в работе. Сохраните, чтобы не потерять.

Чтобы не теряться в океане тегов и атрибутов, забирайте наиболее полные шпаргалки по HTML и CSS. Никакой воды — максимум пользы.

  1. Шпаргалки по HTML
  2. Шпаргалки по CSS

Шпаргалки по HTML

Язык гипертекстовой разметки — основа фронтенда, её скелет, на который вешаются стили и функционал. Самая последняя версия — HTML5: поддерживает все теги и элементы. Так, с появлением HTML 5 были добавлены новые типы ввода:

  • email для ввода электронной почты:<input type="email" name="user_email" />
  • url для соответствующих input-полей: <input type="url" name="user_url" />
  • number для числовых значений: <input type="number" name="points" min="1" max="10" />
  • range для диапазона чисел: <input type="range" name="points" min="1" max="10" />
  • Выбор даты: <input type="date" name="user_date" />
  • Выбор цвета: <input type="color" name="user_color" />. Opera позволит выбрать цвет из палитры, а Chrome разрешит отправлять форму только с шестнадцатеричным значением.

Держите шпаргалку по HTML4 и HTML5. Там же вы сможете найти различные спецификации поддержки и совместимости для десктопа и мобильных устройств для HTML 5 в разных браузерах.

А в следующих двух шпаргалках представлены символьные объекты HTML. Что это такое? Некоторые символы зарезервированы за HTML-разметкой, а потому не могут использоваться напрямую, поскольку есть шанс поломать вёрстку. Например, чтобы прописать левую или правую угловую скобку (<>) в статье, мы записываем их в HTML как < и > соответственно. В противном случае затронем теги вёрстки.

Вот сами чит-листы по HTML-символам:

10 шпаргалок по HTML и CSS 1
Полная версия: https://cheatography.com/davechild/cheat-sheets/html-character-entities/
10 шпаргалок по HTML и CSS 2
Полная версия: https://cheatography.com/reverseemf/cheat-sheets/html-character-entities/

То же самое, но на русском вы найдёте на htmlbook.ru.

Следующая шпаргалка содержит основные теги HTML5:

10 шпаргалок по HTML и CSS 3
Полная версия: https://cheatography.com/kenlandtan/cheat-sheets/html-5/

Также держите расширенную шпаргалку с тегами HTML5: четыре страницы с подсказками отлично подойдут, чтобы подготовиться к собеседованию.

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

Шпаргалки по CSS

Каскадные таблицы стилей, они же CSS, описывают, как именно HTML-элементы будут отображаться. При этом один и тот же стиль может применяться сразу к нескольким элементам или даже страницам.

При первом знакомстве с CSS могут возникнуть проблемы с обозначением единиц измерения. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, например сантиметр (cm) и дюйм (in), знакомы нам из обихода. Есть и специальная единица измерения, придуманная специально для CSS: px.

Держите шпаргалку по единицам измерения в CSS, чтобы не запутаться:

10 шпаргалок по HTML и CSS 4
Источник: https://cheatography.com/rahilkasimi/cheat-sheets/css-units-cheatsheet/

А ещё есть селекторы, которые определяют, к какому элементу применять то или иное CSS-правило. Если вас интересуют CSS-селекторы, то вам сюда:

10 шпаргалок по HTML и CSS 5

А вот ещё одна удобная шпаргалка по CSS, которая собрала в себе максимум полезной информации. Также посмотрите, как правильно использовать CSS-селектор :has().

Надеемся, что шпаргалки по HTML и CSS оказались полезными. Чит-листы по каким языкам и технологиям вы хотели бы увидеть? Напишите в комментариях.

Веб-разработка
Шпаргалки
CSS
HTML
Фронтенд
20967