0
Обложка: 10 шпаргалок по HTML и CSS

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 как &lt; и &gt; соответственно. В противном случае затронем теги вёрстки.

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

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

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

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

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

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

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

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

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

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

Шпаргалка по CSS селекторам

Полная версия по ссылке

А вот ещё одна удобная шпаргалка по CSS, которая собрала в себе максимум полезной информации.Для тех, кто предпочитает визуализацию, у нас также есть исчерпывающие статьи по CSS Flexbox и CSS Grid в гифках: добавьте в закладки, чтобы не забыть.

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