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

30 марта 2018 Андрей Курпас Главная › IT › Шпаргалки по программированию ›

Это статья-шпаргалка с примерами по HTML. Здесь собраны некоторые директивы языка гипертекстовой разметки HTML. Статья будет пополняться по мере необходимости.

Выбрать иконки Fontawesome 4 или Fontawesome 5.

Мета-теги

Заготовка 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="мир, война, любовь"/>

Подключение внешних файлов

Подключить CSS файл

<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">

Теги CSS и Javascript

Вставить код 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" id="sid" value=""/>

Чекбокс (inline-block) и label (inline)
<input type="checkbox" id="chk" checked="checked" />Один
<input type="checkbox" id="check1"><label for="check1">Два</label>
<label><input id="chk3" type="checkbox"/>Три</label>

Текстовое поле (inline-block)
<input type="text" id="txt1">
<input type="text" id="txt2" value="заполнено">
<input type="text" id="txt3" placeholder="введите имя">

Выпадающий список (inline-block)
<select id="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 id="comm"></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="Отправить" />

Поле для ввода чисел (inline-block)
<input type="number" min="1" max="10" step="1" value="1">
где:
min - минимальное значение
max - максимальное значение
step - шаг приращения числа, может быть целым, например 1, или дробным, например 0.2 (будет прибавляться или отниматься к значению в поле при клике на кнопку стрелка вверх и стрелка вниз соответственно)
value - начальное значение

Поле ввода даты (inline-block)
<input type="date" min="2023-01-01" max="2023-12-31" value="2023-05-29">
где:
min - минимальное значение
max - максимальное значение
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-коды некоторых символов

&#35; - # (решётка)
&amp; - & (амперсанд)
&lt; - < (меньше)
&gt; - > (больше)
&#8962; - ⌂ (домик)
&#8364; - € (евро)
&#8381; - ₽ (рубль)
&deg; - ° (градус)
&laquo; - « (левая кавычка)
&raquo; - » (правая кавычка)

Другие служебные теги

<!-- текст --> - комментарий (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)
<td colspan="3"></td> - заменяет 3 ячейки по столбцам, поэтому в следующей строке в соответствующей позиции должны стоять 3 тега <td></td>
<td rowspan="2"></td> - заменяет 2 ячейки по строкам (для этого под этой ячейкой должна быть как минимум еще 1 строка)

Теги для встраиваемого контента

<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)

Разное

Разделение групп разрядов для чисел в текстовом поле (input:text)

// когда курсор покидает поле, значение поля форматируется с разделением групп разрядов, так: 2 349 932, когда курсор в поле, значение поля становится числовым: 2349932

<input type="text" onblur="this.value = this.value.replace(/[^\d]/g, '').replace(/\B(?=(?:\d{3})+(?!\d))/g, ' ')" value="" onfocus="this.value = this.value.replace(/\s/g, '')" >

// аналогично предыдущему, но в поле могут быть записаны дробные числа, например 2332222,234 отобразится как 2 332 222,234

<input type="text" onblur="this.value = this.value.replace(/[^\d.,]/g, '').replace(/(\d+)([.,]\d+)?/g, function (c, b, a) {
    return b.replace(/(\d)(?=(\d{3})+$)/g, '$1 ') + (a ? a : '')
})" value="" onfocus="this.value = this.value.replace(/\s/g, '');this.focus()" >

Многострочный текст во всплывающей подсказке (title)

<div title="Первая строка.&#10Вторая строка.&#10Третья строка.">Текст</div>

Поделиться статьей:

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

Оглавление

Мета-теги

Подключение внешних файлов

Теги CSS и Javascript

Элементы страницы

Разное

Читайте также статьи из IT › Шпаргалки по программированию:

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

Оглавление

Мета-теги

Подключение внешних файлов

Теги CSS и Javascript

Элементы страницы

Разное

Читайте также статьи из IT › Шпаргалки по программированию:

Читайте также: