Шпаргалки

спецсимволы
курсор
Цвета HTML
Горячие клавиши
css
псевдоэлементы
микроразметка microformats.org (микроформат)
микроразметка schema.org (микродата)

Внимание! Страница находится на стадии редактирования, поэтому актуальные значения свойства display: будут отображены в течении двух следующих дней.

ДЕЙСТВУЮЩИЕ ТЕГИ HTML. УСТАРЕВШИЕ ТЕГИ ИСКЛЮЧЕНЫ

Всем тегам HTML в браузерах, по умолчанию, присвоено свойство display:, результатом чего существует разделение элементов на блочные и встроенные или строчные.

Каркас HTML документа по версии HTML5

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
</head>
<body>
Контент
</body>
</html>

Служебные теги

Синтаксис Описание display:
<!DOCTYPE> Определяет тип документа none
<head></head> Контейнер в начале страницы для служебных тегов и подгружаемых функций none
<title></title> Заголовок документа отображаемый во вкладке браузера none
<meta> Метаданные страницы none
<link> Подключает внешние сервисы и таблицы стилей none
<script></script> Подключает скрипты к станице none
<style></style> Подключает глобальные стили к странице none
<base> Базовый URL-адрес — домен none
<noscript></noscrip> Блок не поддерживающий скрипты none

Структурные блоки

<body></body> Тело html документа block
<main><main> Контейнер для всего содержимого страницы block
<nav></nav> Контейнер для навигационного меню block
<header><header> Шапка сайта block
<article><article> Блок основного контента, обычно статья block
<section><section> Часть контента с заголовком block
<aside></aside> Часть контента, имеющая косвенное отношение к основному block
<footer></footer> Подвал страницы block
<div><spandiv> Применяется для создания блочных контейнеров block
<span></span> Применяется для создания встроенных контейнеров block
<figure></figure> Независимый контейнер. Преимущественно для изображений block
<figcaption></figcaption> Заголовок для figure block
<details></details> Контейнер с дополнительной информацией, который можно свернуть или развернуть block
<summary></summary> Заголовок для details, по которому можно щёлкать, чтоб свернуть или развернуть блок block

Текст

<h1></h1>…<h6></h6> Заголовки шесть уровней block
<p></p> Абзац block
<br> Перенос строки block
<wbr> Возможное место разрыва строки block
<hr> Прямая линия block
<blockquote></blockquote> Цитата block
<q></q> Краткая цитата block
<cite></cite> Источник цитирования block
<code></code> Фрагмент кода block
<pre></pre> Неформатированнй код block
<kbd></kbd> Текст моноширным шрифтом block
<samp></samp> Результат выполнения скрипта block
<var></var> Выделяет переменные из программ block
<del></del> Зачёркнутый текст помечается как удалённый block
<s></s> Зачёркнутый текст block
<ins><ins> Подчёркивает изменения в тексте block
<u></u> Подчёркнутый текст block
<dfn></dfn> Выделяет термин курсивом block
<em></em> Выделяет курсивом важные фрагменты текста block
<i></i> Выделяет текст курсивом block
<strong></strong> Выделяет важный текст полужирным block
<b></b> Выделяет текст полужирным block
<mark></mark> Выделяет фрагмент текста жёлтым фоном block
<small></small> Уменьшает размер шрифта block
<sub></sub> Подстрочное написание H2O block
<sup></sup> Надстрочное написание R2 block
<time><time> Дата, время выпуска статьи block
<abbr></abbr> Аббревиатура block
<address></address> Фдрес автора статьи block
<bdi></bdi> Изолирует текст читаемый справа на лево. Применяется в текстах написанных на двух языках block
<bdo></bdo> Задаёт направление написания текста block
<ruby></ruby> Контейнер для Восточно-Азиатских символов block
<rp></rp> Используется для вывода текста в браузерах, которые не поддерживают тег . В остальных браузерах текст, заключенный в контейнер , не отображается block
<rt></rt> Расшифровка символов block

Таблицы

<table></table> block
<tr></tr> Строка таблицы block
<th></th> Ячейки заголовков столбцов таблицы block
<td></td> Ячейки таблицы block
<thead></thead> Группа верхних строк таблицы. Применяется для общего оформления block
<tfoot></tfoot> Группа нижних строк таблицы. Применяется для общего оформления block
<tbody></tbody> Группа строк в середине таблицы. Применяется для общего оформления block
<col> Выделяет столбец таблицы block
<colgroup></colgroup> Группирует несколько столбцов таблицы для общего оформления block
<caption></caption> Описание таблицы block

Списки

<ol></ol> Упорядоченный нумерованный список block
<ul></ul> Маркированный список block
<li></li> Элемент списка block
<dl></dl> Список с описаниями block
<dt></dt> Строка списка с описаниями block
<dd></dd> Описание строки, списка с описаниями block

Изображения

<img> Изображение html block
<>map</map> Активные области на карте block
<area></area> Активная область с гиперссылкой на карте block
<canvas></canvas> Холст контейнер для динамического отображения изображений созданных с помощью JavaScript block

Формы HTML

<form></form> Формы HTML block
<input></input> Многофункциональные поля формы block
<textarea></textarea> Многострочное поле формы block
<label></label> Обычно текст формы block
<datalist></datalist> Создаёт список вариантов, из которых можно сделать выбор. block
<option></option> Опция в раскрывающемся списке block
<optgroup></optgroup> Контейнер с заголовком для группы <option> block
<select></select> Контейнер для создания раскрывающегося списка block
<fieldset></fieldset> Группирует связанные элементы формы block
<legend></legend> Заголовок элементов формы, связанных <fieldset> block
<button></button> Интерактивная кнопка block
<keygen></keygen> Генератор ключей block
<progress></progress> Отображает процесс выполнения в числовых значениях block
<meter></meter> Используется для отображения числовых значений таких показателей как количество посетителей, величина давления и т.п. block
<output></output> Поле для вывода результатов вычислений block

Встраиваемые элементы

<audio></audio> Аудио файл block
<video></video> Видео файл block
<source></source> указывает местоположение и тип альтернативных файлов для <video> и <audio> block
<track></track> Субтитры block
<embed></embed> Встроенный внешний элемент block
<object></object> Контейнер для встраиваемого внешнего элемента block
<param> Параметры встраиваемого внешнего элемента block
<iframe></iframe> Встроенный фрейм block

Ссылка

<a></a> Гипер ссылка block
<></> block
А так же:

17 комментариев на «Шпаргалки»

  1. Vasilisk говорит:

    Спасибо за урок

  2. stariс говорит:

    Наверное, всё же, что-то делается не так, раз не получается. Попробуйте начать вот отсюда https://starper55plys.ru/html/yazyik-html/. Только не торопитесь. Повнимательнее.
    Кстати, а откуда возник вопрос о спецсимолах? Спецсимвол — это так далеко от начала.
    Может вы угловую скобку назвали спецсимволом, но тогда как Вы оказались в «Шпаргалках»?
    Шпаргалки будут нужны потом, а пока начните с самого начала. Там нужно только внимательно прочитать, и всё поймёте.

  3. Марина говорит:

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

  4. stariс говорит:

    Добрый вечер. XP так XP.

    Нажимаем «Пуск», наводим курсор на «Панель управления», открывается меню панели, находим «Установка и удаление программ», Щелкаем по этой строке, открывается окно со всеми установленными на Вашем компьютере программами, находим Notepad++, щёлкаем по нему, появится выделенная область, в углу которой будет кнопка «Заменить/Удалить», щёлкаем по ней, откроется «Мастер удаления», щёлкаем «Далее», откроется окно с адресом программы, щёлкаем «Удалить», откроется окно с процессом удаления. Как только процесс завершится, снова откроется «Мастер удаления», нажимаем «Готово». Вот и всё. Закрываем окно.

    После удаления почистите кеш браузера. Если не знаете как, то напишите, какой у Вас браузер.

  5. Марина говорит:

    добрый день, у меня на компе версия ХР. и есть ещё один ноутбук, на котором — 7. но он мне не очень удобен. то, что я поскачивала notepad, то на ХР. подскажите, как его правильно убрать, чтоб ничего от этих программ не осталось. а то если неправильно убирать — комп засоряется и плохо работает. и укажите, пожалуйста, какую версию notepad мне скачать.

  6. stariс говорит:

    Знакомая история. Поначалу тоже, и ставил, и удалял.

    Может всё сначала? Давайте удалим оба, так как они уже перехлестнулись, и поставим по новой, тот который мой.

    Чтоб точнее подсказать, как это сделать, мне бы знать, какая у Вас версия Windows? Семёрка, или восьмёрка, домашняя базовая, или ХР?

    Потом начнём немного по другому. Мне нужно было сразу, для начала объяснить Вам, простым языком, что такое язык html, что такое теги, и как они пишутся.

  7. Марина говорит:

    да да. именно. не знаю, как один раз получилось, случайно, но вышли иероглифы. а теперь и то не могу. вообще, я накудесила конечно. записала последнюю версию Notepad, потом так запуталась, что-то не клеилось. решила её вытереть и записать ещё раз, но другую версию, как Ваша. теперь и вторая записалась и первая не вытерлась почему-то. вот. теперь не знаю, на какой я работаю. и не мешает ли та, другая. короче, не смейтесь. завал.

  8. stariс говорит:

    Добрый вечер. Если я правильно понял, у Вас не получается вывести на экран словосочетание «Большой заголовок»?

  9. Марина говорит:

    доброго вечера Вам.
    придётся Вам меня потерпеть, пока не научусь по Вашим же урокам.
    дошла до момента, когда в поле редактора появились цвета: голубой, красный , фиолетовый. теперь пытаюсь между друмя «боди» что-то написать. не получается, как на Вашем примере в статье про Notepad — сразу знак «больше» или «меньше» и h и слеш. во-первых: пишет чёрным, а не фиолетовым, а во-вторых: пишу то, что нужно, > для появления знака спецсимвола, но остаётся та надпись, а не знак. вот как. на днях я говорила, что в браузере показывало закорлючки какие-то, я не знала, как написать спецсимволы и просто скопировала строку у Вашего примера и вставила в редактор. но и тогда не всё получилось
    Вы, пожалуйста, подскажите мне «покнопочно», что нажимать-набирать. может я потом буду лучше понимать, но пока это — «лес дремучий».
    спасибо.

  10. stariс говорит:

    Доброе утро. Ого. Значит дело пошло, раз до спец. символов добрались.

    Суть вот в чём. Когда в редакторе ставишь знак больше или меньше, то браузер воспринимает их как тег (когда открываете), а если тега нет, а угловая скобка есть — то вообще ничего не открывает.

    Поэтому, если на экран нужно вывести угловую скобку, то в редакторе пишется спец. символ.

    Писать его поначалу муторно, потом привыкаешь. Я поначалу просто копировал их и вставлял. Для этого ведь и страницу сделал с ними, чтоб скопировать в любой момент.

    Теперь насобачился. Кстати, если при написания комментария, захочется поставить знак больше или меньше, то нужно тоже ставить спец. символ, иначе, всё что после него, в комментарии не выведется.

    А хороши спец. символы тем, что при помощи их можно выводить знаки которых нет на клавиатуре — градус С°, стрелочки ←→, и т. п.

    Главное, при копировании, не терять точку с запятой в конце. Я с этим мучился.

  11. Марина говорит:

    добрый вечер. вот на такой ерунде застряла, как написание этих спецсимволов. подскажите, как это. ничего не пойму, простите. конкретно: знак «меньше» и «больше».
    спасибо.

  12. starik говорит:

    Привет. Могу подсказать в этом направлении, что index в css — это элемент позиционирования. Есть три индекса: по оси х это x-index, далее y-index, и z-index. Элемент которому задан index с числовым значением располагается выше элемента без такового. Или если у обеих есть числовой index, то тот у которого число больше, располагается над другим. Как бы наплывает на него. Может закрыть полностью. Это зависит от свойств top и left Посмотрите у меня CSS Урок 5″Страница из блоков». Там на рис.4 показано позиционирование по z-index.

  13. Юрий говорит:

    Вечер добрый! К Вам, как к высшей инстанции, за советом! Изучал в одной из тем, как оформлены виджет в сайдбаре.( ну очень хочется придать вид) Столкнулся, c двумя селекторами widget title. Один как и полагается в CSS, a второй, где прописан радиус. В веб-инспекторе index : 42. В файле index.PHP ничего подобного нет. Что это такое, и где еще могут прописываться стили. У меня уже появилось ощущение — с трудом, но что то начинаю понимать. И тут, такая для меня тайна!!! Спасибо!

  14. starik говорит:

    Не зря значит старался. Я ведь не собирался этот сайт делать, как-то само получилось. Спасибо за отзыв.

  15. Светлана говорит:

    Супер! Все прекрасно,обалденно просто и понятно!!!СПАСИБО! ВЫ — МОЛОДЕЦ!

  16. starik говорит:

    На здоровье! Это всё из инета, я только в кучу собираю.

  17. Игорь говорит:

    Действительно, шпаргалка. Здорово! Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *