Шпаргалка по HTML с примерами
Данная шпаргалка HTML включает в себя примеры. Мы собрали основные директивы языка гипертекстовой разметки HTML.
Мета-теги
Заготовка html-файла
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title>Название</title> </head> <body> </body> </html>
Включить поддержку адаптивности на странице (meta-тег viewport)
// Чтобы страницу можно можно было адаптировать для просмотра на устройствах с разной шириной экрана <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" /> maximum-scale=3 // позволяет увеличивать масштаб страницы на смартфоне с помощью пальцев в 3 раза от изначального
Разрешить или запретить поисковым роботам индексировать страницу (meta-тег robots)
// Первой строкой разрешаем индексировать страницу, следовать по ссылкам в ней и индексировать их. Вторая строка - запрещает индексацию и переход по ссылкам <meta name="robots" content="index, follow" /> <meta name="robots" content="noindex, nofollow" />
Вставить описание страницы (meta-тег description)
// Большинство поисковиков видят лишь 320 символов <meta name="description" content="Описание страницы."/>
Вставить ключевые слова страницы (meta-тег keywords)
// Должен содержать ключевые слова через запятую, которые содержатся на странице <meta name="keywords" content="мир, война, любовь"/>
Подключение внешних файлов
<link rel="stylesheet" type="text/css" href="//site.ru/style.css"/>
Подключить JS файл
<script type='text/javascript' src='//site.ru/script.js'></script>
Подключить JS файл асинхронно (async)
// файл будет загружаться параллельно потоку загрузки html-страницы <script async type='text/javascript' src='//site.ru/script.js'></script>
Подключить иконку сайта (favicon)
// Файл иконки favicon.ico должен лежать в корне сайта <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" />
Подключить jQuery
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=4.7.3'></script> <script type='text/javascript' src='//site.ru/jquery-migrate.min.js?ver=1.4.1'></script>
Подключить шрифты Google
<link rel='stylesheet' id='roboto-css' href='//fonts.googleapis.com/css?family=Roboto+Condensed%3A400%2C300%2C700&subset=latin%2Ccyrillic&ver=1.0.0' type='text/css' media='all'/> <link rel='stylesheet' id='tinos-css' href='//fonts.googleapis.com/css?family=Tinos%3A400%2C700%2C400i&subset=latin%2Ccyrillic&ver=1.0.0' type='text/css' media='all'/>
Подключить шрифт иконок FontAwesome
// подключение шрифта иконок FontAwesome 4 <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=4.7.0' type='text/css' media='all'/> // подключение шрифта иконок FontAwesome 5 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
Элементы страницы
<style>
#nm {margin:0px;}
.nm2 {width:200px;}
</style>
Вставить код JavaScript внутри страницы
<script type="text/javascript">
alert("Привет, мир!");
</script>
Вставить форму без содержимого (form)
<form name="test" method="post" action="script.php"> </form>
Вставить интерактивные элементы форм (input:hidden, input:text, input:checkbox, input:radio, input:reset, input:submit, input:button, button, select, textarea, label)
Скрытое поле (none) <input type="hidden" name="sid" value=""/> Чекбокс (inline-block) и label (inline) <input type="checkbox" name="chk" checked="checked" />Один <input type="checkbox" name="chk2" id="check1"><label for="check1">Два</label> <label><input name="chk3" type="checkbox"/>Три</label> Текстовое поле (inline-block) <input type="text" name="txt1"> <input type="text" name="txt2" value="заполнено"> <input type="text" name="txt3" placeholder="введите имя"> Выпадающий список (inline-block) <select name="sel1"> <option value="1">Один</option> <option value="2">Два</option> <option value="3">Три</option> </select> Список множественного выбора (inline-block) <select size="2" multiple name="sel2[]"> <option value="1">Один</option> <option selected value="2">Два</option> <option value="3">Три</option> </select> Радио кнопки (inline-block) и label (inline) <input type="radio" name="vop" id="rad1" value="1"><label for="rad1">Один</label> <input checked type="radio" name="vop" id="rad2" value="2"><label for="rad2">Два</label> <input type="radio" name="vop" id="rad3" value="3"><label for="rad3">Три</label> Многострочное текстовое поле (inline-block) <textarea name="comm" cols="40" rows="3"></textarea> Кнопки (inline-block) <button><img src="cherry.png" style="vertical-align: middle"> <span>Кнопка с рисунком</span></button> <input type="button" value="Кнопка" /> <input type="reset" value="Очистить"> <input type="submit" value="Отправить" />
Вставить кнопку с обработкой события onclick
<input type="button" value="Проверить" onclick="isEmail()" />
Другие интерактивные элементы форм
<datalist><summary>Заголовок</summary></datalist> - контейнер для выпадающего списка элемента <input> с <option>-значениями (none) <optgroup></optgroup> - контейнер с заголовком для группы элементов <option> (block) <fieldset></fieldset> - группирует связанные элементы в форме (block) <legend></legend> - заголовок элементов формы, сгруппированных с помощью <fieldset> (block) <keygen> - генерирует закрытый и открытый ключи (inline-block) <progress></progress> - индикатор выполнения задачи (inline-block) <meter></meter> - индикатор измерения в заданном диапазоне (inline-block) <output></output> - поле для вывода результата вычисления (inline)
Тег плавающего фрейма iframe
Блочный тег iframe создает плавающий фрейм, который позволяет загружать любые другие независимые документы. <iframe src="banner.html"></iframe>
HTML-коды некоторых символов
# - # (решётка) & - & (амперсанд) < - < (меньше) > - > (больше) ⌂ - ⌂ (домик) € - € (евро) ₽ - ₽ (рубль) ° - ° (градус) « - « (левая кавычка) » - » (правая кавычка)
Другие служебные теги
<!— текст —> - комментарий (none) <base> - базовый url-адрес, относительно которого вычисляются относительные адреса (none) <noscript></noscript> - секция, не поддерживающая скрипт (block)
Теги для текста
<h1></h1> - <h2></h2> - <h3></h3> - <h4></h4> - <h5></h5> - <h6></h6> - заголовки шести уровней (block) <p></p> - параграфы в тексте (block) <br> - перенос текста на новую строку (none) <hr> - горизонтальная линия (block) <wbr> - возможное место разрыва длинной строки (none) <blockquote></blockquote> - большая цитата (block) <cite></cite> - источник цитирования (inline) <q></q> - краткая цитата (inline) <code></code> - фрагмент программного кода (inline) <kbd></kbd> - текст, вводимый пользователем с клавиатуры (inline) <pre></pre> - выводит текст со всеми пробелами и переносами, обычно моноширинным шрифтом (block) <samp></samp> - результат выполнения сценария (inline) <var></var> - выделяет переменные из программ, обычно выделяется курсивом (inline) <del></del> - перечёркивает текст, помечая как удаленный (inline) <s></s> - перечёркивает неактуальный текст (inline) <dfn></dfn> - выделяет термин курсивом (inline) <em></em> - выделяет важные фрагменты текста курсивом (inline) <i></i> - выделяет текст курсивом без акцента (inline) <strong></strong> - выделяет полужирным важный текст (inline) <b></b> - задает полужирное начертание отрывка текста, без дополнительного акцента (inline) <ins></ins> - подчёркивает изменения в тексте (inline) <u></u> - выделяет отрывок текста подчёркиванием, без дополнительного акцента (inline) <mark></mark> - выделяет фрагменты текста желтым фоном (inline) <small></small> - отображает текст шрифтом меньшего размера (inline) <sub></sub> - отображает текст в виде нижнего индекса (inline) <sup></sup> - отображает текст в виде верхнего индекса (inline) <time></time> - дата / время документа или статьи (inline) <abbr></abbr> - аббревиатура или акроним (none) <address></address> - контактные данные автора документа или статьи (block) <bdi></bdi> - изолирует текст, читаемый справа налево (inline) <bdo></bdo> - задаёт направление написания текста (inline) <ruby></ruby> - контейнер для Восточно-Азиатских символов и их расшифровки (inline) <rp></rp> - тег для скобок вокруг символов (none) <rt></rt> - расшифровка символов (block)
Теги для таблиц
<table></table> - html-таблица (table) <tr></tr> - строка таблицы (table-row) <th></th> - заголовок столбца таблицы (table-cell) <td></td> - ячейка таблицы (table-cell) <thead></thead> - блок заголовков таблицы (table-header-group) <tbody></tbody> - тело таблицы (table-row-group) <tfoot></tfoot> - нижний колонтитул таблицы (table-footer-group) <caption></caption> - подпись к таблице (table-caption) <col> - выбирает для форматирования столбцы (table-column) <colgroup></colgroup> - контейнер для одного или нескольких <col> (table-column-group)
Теги для встраиваемого контента
<audio></audio> - добавляет аудио-файлы (inline-block) <video></video> - добавляет видео-файлы (inline-block) <source> - указывает местоположение и тип альтернативных файлов для <audio> и <video> (none) <track> - субтитры для элементов <audio> и <video> (none) <embed> - встраивает внешний интерактивный контент или плагин (inline-block) <object></object> - контейнер для встраивания мультимедиа (inline-block) <param> - задаёт параметры для плагинов, встраиваемых с помощью элемента <object> (none)
Теги для группировки контента
<div></div> - контейнер для разделов html-документа, группирует блочные элементы (block) <span></span> - контейнер для строчных элементов (inline) <header></header> - секция для вводной информации сайта или группы навигационных ссылок (block) <footer></footer> - секция для нижнего колонтитула документа или раздела (block) <section></section> - логическая область (раздел) страницы, обычно с заголовком (block) <article></article> - раздел контента, образующий независимую часть документа или сайта (block) <aside></aside> - контент страницы, имеющий косвенное отношение к основному контенту (block) <nav></nav> - раздел документа, содержащий навигационные ссылки по сайту (block) <figure></figure> - независимый контейнер для такого контента как изображения, диаграммы и т.п. (block) <figcaption></figcaption> - заголовок для элемента <figure> (block) <details></details> - контейнер с дополнительными сведениями, который можно открыть или закрыть (block) <summary></summary> - видимый заголовок для элемента <details> (block) <main></main> - контейнер для уникального основного содержимого в пределах одной страницы сайта (block)
Теги для списков
<ol></ol> - упорядоченный нумерованный список (block) <ul></ul> - маркированный список (block) <li></li> - элемент списка (list-item) <dl></dl> - контейнер для термина и его описания (block) <dt></dt> - задаёт термин (block) <dd></dd> - расшифровывает термин (block)
Теги для изображений и ссылок
<a></a> - гиперссылка (inline) <img> - подключение файла изображения (inline) <map></map> - активные области на карте-изображении (inline) <area> - гиперссылка с текстом или активная область внутри карты-изображения (inline) <canvas></canvas> - холст-контейнер для динамического отображения изображений (inline-block)
