10 шпаргалок по 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-символам:

Полная версия: https://cheatography.com/davechild/cheat-sheets/html-character-entities/

Полная версия: https://cheatography.com/reverseemf/cheat-sheets/html-character-entities/

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

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

Полная версия: https://cheatography.com/kenlandtan/cheat-sheets/html-5/

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

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

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

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

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

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

Источник: https://cheatography.com/rahilkasimi/cheat-sheets/css-units-cheatsheet/

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

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

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