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

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

Оглавление

Заготовка html-файла


<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Название</title>
</head>
<body>

</body>
</html>

Подключить 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" />

Включить поддержку адаптивности на странице (meta-тег viewport). Чтобы страницу можно можно было адаптировать для просмотра на устройствах с разной шириной экрана.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Разрешить или запретить поисковым роботам индексировать страницу (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="мир, война, любовь"/>

Подключить 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'/>

Подключить иконки Font Awesome

<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'/>

Вставить код 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></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; - ₽ (рубль)

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

<!— текст —> - комментарий (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)

Все статьи-шпаргалки по программированию:

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

Поделитесь своим мнением

Правила сообщений

Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Копирование материалов разрешено только с указанием источника и прямой индексируемой ссылкой на оригинал.
Яндекс.Метрика
© 2018 Хороший отзыв · Искусство выбирать · Лично · Разумно · Честно