Шпаргалка по 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>

Подключить иконку сайта (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)

Скрытое поле
<input type="hidden" name="sid" value=""/>

Чекбокс и label
<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>

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

Выпадающий список
<select name="sel1">
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>

Список множественного выбора
<select size="2" multiple name="sel2[]">
<option value="1">Один</option>
<option selected value="2">Два</option>
<option value="3">Три</option>
</select>

Радио кнопки и label
<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>

Многострочное текстовое поле
<textarea name="comm" cols="40" rows="3"></textarea>

Кнопки
<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()" />

Теги iframe, var, pre, sub, sup

Блочный тег iframe создает плавающий фрейм, который позволяет загружать любые другие независимые документы.

<iframe src="banner.html"></iframe>

Строчный тег var используется для выделения переменных программирования, обычно выделяется курсивом.

<var></var>

Строчный тег pre отображает текст обычно моноширинным шрифтом и со всеми пробелами между словами.

<pre></pre>

Строчный тег sub отображает шрифт в виде нижнего индекса.

<sub></sub>

Строчный тег sup отображает шрифт в виде верхнего индекса.
<sup></sup>

HTML-коды некоторых символов

&#35; - # (решётка)
&amp; - & (амперсанд)
&lt; - < (меньше)
&gt; - > (больше)
&#8962; - ⌂ (домик)
&#8364; - € (евро)
&#8381; - ₽ (рубль)

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

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

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

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

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

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