Шпаргалка по HTML Essentials: теги, атрибуты и многое другое

Создание веб-страниц начинается с HTML. Украсить их и сделать интерактивными придет позже. Но чтобы начать создавать функциональные статические веб-сайты, вам необходимо понимание HTML. (Хотите быстро познакомиться с этим языком разметки? Прочтите наш HTML FAQ.)

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

В шпаргалке описаны теги и атрибуты для структурирования веб-страниц, форматирования текста, добавления форм, изображений, списков, ссылок и таблиц. Он также включает теги, которые были введены в кодах HTML5 и HTML для часто используемых специальных символов.

БЕСПЛАТНАЯ ЗАГРУЗКА: Эта шпаргалка доступна в виде загружаемый PDF от нашего партнера-дистрибьютора TradePub. Вам нужно будет заполнить короткую форму, чтобы получить к ней доступ только в первый раз. Скачать Шпаргалка по HTML Essentials.

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

... ... ... ... ...

...

Ярлык	Действие
Основные теги
...	Первый и последний тег HTML-документа. Все остальные теги находятся между этими открывающими и закрывающими тегами.
...	Задает коллекцию метаданных для документа.
	Описывает заголовок страницы и отображается в строке заголовка браузера.
...	Включает весь контент, который будет отображаться на веб-странице.
Информация о документе
Упоминает базовый URL-адрес и все относительные ссылки на документ.
Для получения дополнительной информации о странице, такой как автор, дата публикации и т. Д.
Ссылки на внешние элементы, такие как таблицы стилей.
	Содержит информацию о стилях документа, например CSS (каскадные таблицы стилей).
	Содержит ссылки на внешние скрипты.
Форматирование текста
... ИЛИ ...	Делает текст жирным.
...	Текст выделяется курсивом и полужирным шрифтом.
...	Текст выделяется курсивом, но не полужирным шрифтом.
...	Зачеркнутый текст.
...	Цитирует автора цитаты.
...	Обозначает удаленную часть текста.
...	Показывает раздел, который был вставлен в контент.
...	Для отображения котировок. Часто используется с ярлык.
...	Для более коротких цитат.
...	Для сокращений и полных форм.
...	Указывает контактные данные.
...	Для определений.
...	Для фрагментов кода.
...	Для написания индексов
...	Для написания надстрочных индексов.
...	Для уменьшения размера текста и выделения лишней информации в HTML5.
Структура документа
...	Разные уровни заголовков. H1 - самый большой, а H6 - самый маленький.
...	Для разделения контента на блоки.
...	Включает встроенные элементы, такие как изображение, значок, смайлик, без нарушения форматирования страницы.
...	Содержит простой текст.
	Создает новую строку.
	Рисует горизонтальную полосу, чтобы показать конец раздела.
Списки
...	Для упорядоченного списка товаров.
...	Для неупорядоченного списка товаров.
...	Для отдельных позиций в списке.
...	Список предметов с определениями.
...	Определение одного термина, встроенного в основной текст.
...	Описание определенного срока.
Ссылки
...	Тег привязки для гиперссылок.
...	Тег для ссылки на адреса электронной почты.
...	Тег привязки для перечисления контактных номеров.
...	Тег привязки для ссылки на другую часть той же страницы.
...	Переход к разделу div на веб-странице. (Вариант вышеуказанного тега)
Изображений
	Для отображения файлов изображений.
Атрибуты для ярлык
src = "url"	Ссылка на исходный путь изображения.
alt = "текст"	Текст, отображаемый при наведении курсора мыши на изображение.
высота = ””	Высота изображения в пикселях или процентах.
ширина = ””	Ширина изображения в пикселях или процентах.
align = ””	Относительное выравнивание изображения на странице.
граница = ””	Толщина границы изображения.
	Ссылка на интерактивную карту.
	Название изображения карты.
Область изображения карты изображения.
Атрибуты для ярлык
shape = ”"	Форма области изображения.
coords = ””	Координаты области изображения карты.
Формы
...	Родительский тег для HTML-формы.
Атрибуты для ярлык
действие = "URL"	URL-адрес, по которому отправляются данные формы.
метод = ””	Задает протокол отправки формы (POST или GET).
enctype = ””	Схема кодирования данных для отправки POST.
автозаполнение	Указывает, включено ли автозаполнение формы.
подтверждать	Указывает, следует ли проверять форму перед отправкой.
accept-charsets	Задает кодировку символов для отправки формы.
цель	Показывает, где будет отображаться ответ на отправку формы.
...	Группирует связанные элементы в форме /
...	Указывает, что пользователь должен ввести в каждое поле формы.
...	Заголовок для элемента fieldset.
Определяет, какой тип ввода следует принимать от пользователя.
Атрибуты для ярлык
type = ””	Определяет тип ввода (текст, даты, пароль).
name = ””	Задает имя поля ввода.
значение = ””	Задает значение в поле ввода.
размер = ””	Устанавливает количество символов для поля ввода.
maxlength = ””	Устанавливает допустимый предел вводимых символов.
требуется	Делает поле ввода обязательным.
ширина = ””	Устанавливает ширину поля ввода в пикселях.
высота = ””	Устанавливает высоту поля ввода в пикселях.
заполнитель = ””	Описывает ожидаемое значение поля.
шаблон = ””	Задает регулярное выражение, которое можно использовать для поиска шаблонов в тексте пользователя.
min = ””	Минимальное допустимое значение для входного элемента.
макс = ””	Максимальное допустимое значение для входного элемента.
отключен	Отключает элемент ввода.
...	Для сбора более длинных строк данных от пользователя.
...	Задает список параметров, из которых может выбирать пользователь.
Атрибуты для ярлык
name = ””	Задает имя для раскрывающегося списка.
размер = ””	Количество опций, предоставленных пользователю.
несколько	Устанавливает, может ли пользователь выбирать несколько вариантов из списка.
требуется	Указывает, требуется ли выбор параметра / ов для отправки формы.
автофокус	Указывает, что раскрывающийся список автоматически переходит в фокус после загрузки страницы.
...	Определяет элементы в раскрывающемся списке.
значение = ””	Отображает текст для любого заданного параметра.
выбранный	Устанавливает параметр по умолчанию, который отображается.
...	Тег для создания кнопки для отправки формы.
Объекты и iFrames
	Описывает встроенный тип файла.
Атрибуты для
высота = ””	Высота объекта.
ширина = ””	Ширина объекта.
type = ””	Тип носителя, который содержит объект.
	Встроенный фрейм для встраивания внешней информации.
name = ””	Имя iFrame.
src = ””	Исходный URL-адрес содержимого внутри фрейма.
srcdoc = ””	HTML-контент внутри фрейма.
высота = ””	Высота iFrame.
ширина = ””	Ширина iFrame.
Добавляет дополнительные параметры для настройки iFrame.
...	Встраивает внешнее приложение или плагин.
Атрибуты для
высота = ""	Устанавливает высоту встраивания.
ширина = ""	Устанавливает ширину встраивания.
type = ””	Тип или формат встраивания.
src = ””	Исходный путь встроенного файла.
Таблицы
...	Определяет все содержимое таблицы.
Описание таблицы.
Заголовки для каждого столбца в таблице.
Определяет данные тела для таблицы.
Описывает содержимое нижнего колонтитула таблицы.
Контент для одной строки.
	...	Данные в одном элементе заголовка.
	...	Содержимое одной ячейки таблицы.
Группирует столбцы для форматирования.
Единый столбец информации.
Новые теги HTML5
...	Задает заголовок веб-страницы.
	Задает нижний колонтитул веб-страницы.
...	Отмечает основное содержание веб-страницы.
...	Задает статью.
	Определяет содержимое боковой панели страницы.
...	Задает определенный раздел на веб-странице.
...	Для описания дополнительной информации.
...	Используется как заголовок для указанного выше тега. Всегда виден пользователю.
...	Создает диалоговое окно.
...	Используется для включения диаграмм и рисунков.
	Описывает элемент.
...	Выделяет определенную часть текста.
	Набор навигационных ссылок на веб-странице.
...	Определенный элемент из списка или меню.
...	Измеряет данные в заданном диапазоне.
...	Размещает индикатор выполнения и отслеживает прогресс.
...	Отображает текст, не поддерживающий аннотации Ruby.
...	Отображает детали персонажей типографики Восточной Азии.
...	Аннотация Ruby для восточноазиатской типографики.
...	Определяет время и дату.
Разрыв строки в содержимом.
¹Символьные объекты HTML5
" ИЛИ & quot;	Кавычки
& lt;	Меньше знака (
> ИЛИ & gt;	Знак "больше" (>)
ИЛИ & nbsp;	Неразрывное пространство
© ИЛИ & копировать;	Символ авторского права
™ ИЛИ & ucirc;	Символ торговой марки
@ ИЛИ & Уумл;	Символ «в» (@)
& ИЛИ & amp;	Символ амперсанда (&)
• ИЛИ & ouml;	Маленькая пуля
¹При вводе символа HTML игнорируйте пробел перед точкой с запятой.

Создайте веб-сайт для практического опыта

Как только вы поняли основы HTML-кода и у вас есть практические знания CSS и JavaScript, попробуйте свои силы в создании веб-сайта Как сделать сайт: для начинающихСегодня я проведу вас через процесс создания полноценного веб-сайта с нуля. Не волнуйтесь, если это звучит сложно. Я буду сопровождать вас на каждом этапе пути. Подробнее . Также не забудьте сохранить наши Памятка по свойствам CSS3 Шпаргалка по основным свойствам CSS3Освойте основной синтаксис CSS с помощью нашей шпаргалки по свойствам CSS3. Подробнее а также Памятка по JavaScript Полная шпаргалка по JavaScriptПолучите быстрое освежение элементов JavaScript с помощью этой шпаргалки. Подробнее для будущего использования!