Все шпаргалки
Cпецсимволы HTML
CSS Курсор
CSS все свойства
CSS псевдоэлементы
Регулярные выражения для Notepad++
Цвета HTML
Градиент примеры код
Горячие клавиши
Единицы измерения в web
микроразметка microformats.org (микроформат)
микроразметка schema.org (микродата)
Cпецсимволы HTML
CSS Курсор
CSS все свойства
CSS псевдоэлементы
Регулярные выражения для Notepad++
Цвета HTML
Градиент примеры код
Горячие клавиши
Единицы измерения в web
микроразметка microformats.org (микроформат)
микроразметка schema.org (микродата)
HTML5 все теги
Каркас HTML документа по версии HTML5
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
</head>
<body>
Контент
</body>
</html>
Всем тегам HTML в браузерах, по умолчанию, присвоено свойство display:, результатом чего существует разделение элементов на блочные и встроенные или строчные.
Служебные теги
Синтаксис | Описание | display: |
---|---|---|
<!DOCTYPE> | Определяет тип документа | none |
<head></head> | Контейнер в начале страницы для служебных тегов и подгружаемых функций | none |
<title></title> | Заголовок документа отображаемый во вкладке браузера | none |
<meta> | Метаданные страницы | none |
<link> | Подключает внешние сервисы и таблицы стилей | none |
<script></script> | Подключает скрипты к станице | none |
<style></style> | Подключает глобальные стили к странице | none |
<base> | Базовый URL-адрес — домен | none |
<noscript></noscrip> | Блок не поддерживающий скрипты | block |
Структурные блоки
<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> | Применяется для создания блочных контейнеров | 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> | Возможное место разрыва строки | none |
<hr> | Прямая линия | none |
<blockquote></blockquote> | Цитата | block |
<q></q> | Краткая цитата | inline |
<cite></cite> | Источник цитирования | inline |
<code></code> | Фрагмент кода | inline |
<pre></pre> | Неформатированнй код | block |
<kbd></kbd> | Текст моноширным шрифтом | inline |
<samp></samp> | Результат выполнения скрипта | inline |
<var></var> | Выделяет переменные из программ | inline |
<del></del> | Зачёркнутый текст помечается как удалённый | inline |
<s></s> | Зачёркнутый текст | block |
<ins><ins> | Подчёркивает изменения в тексте | inline |
<u></u> | Подчёркнутый текст | inline |
<dfn></dfn> | Выделяет термин курсивом | inline |
<em></em> | Выделяет курсивом важные фрагменты текста | inline |
<i></i> | Выделяет текст курсивом | inline |
<strong></strong> | Выделяет важный текст полужирным | inline |
<b></b> | Выделяет текст полужирным | inline |
<mark></mark> | Выделяет фрагмент текста жёлтым фоном | inline |
<small></small> | Уменьшает размер шрифта | inline |
<sub></sub> | Подстрочное написание H2O | inline |
<sup></sup> | Надстрочное написание R2 | inline |
<time><time> | Дата, время выпуска статьи | inline |
<abbr></abbr> | Аббревиатура | inline |
<address></address> | Адрес автора статьи | inline |
<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 |
<tfoot></tfoot> | Группа нижних строк таблицы. Применяется для общего оформления | table-footer-group |
<tbody></tbody> | Группа строк в середине таблицы. Применяется для общего оформления | table-row-group |
<col> | Выделяет столбец таблицы | table-column |
<colgroup></colgroup> | Группирует несколько столбцов таблицы для общего оформления | table-column-group |
<caption></caption> | Описание таблицы | table-caption |
Списки
<ol></ol> | Упорядоченный нумерованный список | block |
<ul></ul> | Маркированный список | block |
<li></li> | Элемент списка | list-item |
<dl></dl> | Список с описаниями | block |
<dt></dt> | Строка списка с описаниями | block |
<dd></dd> | Описание строки, списка с описаниями | block |
Изображения
<img> | Изображение html | inline |
<>map</map> | Активные области на карте | inline |
<area></area> | Активная область с гиперссылкой на карте | inline |
<canvas></canvas> | Холст контейнер для динамического отображения изображений созданных с помощью JavaScript | inline-block |
Формы HTML
<form></form> | Формы HTML | block |
<input></input> | Многофункциональные поля формы | inline-block |
<textarea></textarea> | Многострочное поле формы | inline-block |
<label></label> | Обычно текст формы | inline |
<datalist></datalist> | Создаёт список вариантов, из которых можно сделать выбор. | none |
<option></option> | Опция в раскрывающемся списке | block |
<optgroup></optgroup> | Контейнер с заголовком для группы <option> | block |
<select></select> | Контейнер для создания раскрывающегося списка | inline-block |
<fieldset></fieldset> | Группирует связанные элементы формы | block |
<legend></legend> | Заголовок элементов формы, связанных <fieldset> | block |
<button></button> | Интерактивная кнопка | inline-block |
<keygen></keygen> | Генератор ключей | inline-block |
<progress></progress> | Отображает процесс выполнения в числовых значениях | inline-block |
<meter></meter> | Используется для отображения числовых значений таких показателей как количество посетителей, величина давления и т.п. | inline-block |
<output></output> | Поле для вывода результатов вычислений | inline |
Встраиваемые элементы
<audio></audio> | Аудио файл | inline-block |
<video></video> | Видео файл | inline-block |
<source></source> | указывает местоположение и тип альтернативных файлов для <video> и <audio> | none |
<track></track> | Субтитры | none |
<embed></embed> | Встроенный внешний элемент | inline-block |
<object></object> | Контейнер для встраиваемого внешнего элемента | inline-block |
<param> | Параметры встраиваемого внешнего элемента | none |
<iframe></iframe> | Встроенный фрейм | block |
Ссылка
<a></a> | Гипер ссылка | inline |
Работает?!
И вам — не хворать.
здрасте
Спасибо за урок
Наверное, всё же, что-то делается не так, раз не получается. Попробуйте начать вот отсюда https://starper55plys.ru/html/yazyik-html/. Только не торопитесь. Повнимательнее.
Кстати, а откуда возник вопрос о спецсимолах? Спецсимвол — это так далеко от начала.
Может вы угловую скобку назвали спецсимволом, но тогда как Вы оказались в «Шпаргалках»?
Шпаргалки будут нужны потом, а пока начните с самого начала. Там нужно только внимательно прочитать, и всё поймёте.
здравствуйте . заголовок вот, что у меня получается. и не более. не пойму. ведь всё делаю, как Вы сказали.
Добрый вечер. XP так XP.
Нажимаем «Пуск», наводим курсор на «Панель управления», открывается меню панели, находим «Установка и удаление программ», Щелкаем по этой строке, открывается окно со всеми установленными на Вашем компьютере программами, находим Notepad++, щёлкаем по нему, появится выделенная область, в углу которой будет кнопка «Заменить/Удалить», щёлкаем по ней, откроется «Мастер удаления», щёлкаем «Далее», откроется окно с адресом программы, щёлкаем «Удалить», откроется окно с процессом удаления. Как только процесс завершится, снова откроется «Мастер удаления», нажимаем «Готово». Вот и всё. Закрываем окно.
После удаления почистите кеш браузера. Если не знаете как, то напишите, какой у Вас браузер.
добрый день, у меня на компе версия ХР. и есть ещё один ноутбук, на котором — 7. но он мне не очень удобен. то, что я поскачивала notepad, то на ХР. подскажите, как его правильно убрать, чтоб ничего от этих программ не осталось. а то если неправильно убирать — комп засоряется и плохо работает. и укажите, пожалуйста, какую версию notepad мне скачать.
Знакомая история. Поначалу тоже, и ставил, и удалял.
Может всё сначала? Давайте удалим оба, так как они уже перехлестнулись, и поставим по новой, тот который мой.
Чтоб точнее подсказать, как это сделать, мне бы знать, какая у Вас версия Windows? Семёрка, или восьмёрка, домашняя базовая, или ХР?
Потом начнём немного по другому. Мне нужно было сразу, для начала объяснить Вам, простым языком, что такое язык html, что такое теги, и как они пишутся.
да да. именно. не знаю, как один раз получилось, случайно, но вышли иероглифы. а теперь и то не могу. вообще, я накудесила конечно. записала последнюю версию Notepad, потом так запуталась, что-то не клеилось. решила её вытереть и записать ещё раз, но другую версию, как Ваша. теперь и вторая записалась и первая не вытерлась почему-то. вот. теперь не знаю, на какой я работаю. и не мешает ли та, другая. короче, не смейтесь. завал.
Добрый вечер. Если я правильно понял, у Вас не получается вывести на экран словосочетание «Большой заголовок»?
доброго вечера Вам.
придётся Вам меня потерпеть, пока не научусь по Вашим же урокам.
дошла до момента, когда в поле редактора появились цвета: голубой, красный , фиолетовый. теперь пытаюсь между друмя «боди» что-то написать. не получается, как на Вашем примере в статье про Notepad — сразу знак «больше» или «меньше» и h и слеш. во-первых: пишет чёрным, а не фиолетовым, а во-вторых: пишу то, что нужно, > для появления знака спецсимвола, но остаётся та надпись, а не знак. вот как. на днях я говорила, что в браузере показывало закорлючки какие-то, я не знала, как написать спецсимволы и просто скопировала строку у Вашего примера и вставила в редактор. но и тогда не всё получилось
Вы, пожалуйста, подскажите мне «покнопочно», что нажимать-набирать. может я потом буду лучше понимать, но пока это — «лес дремучий».
спасибо.
Доброе утро. Ого. Значит дело пошло, раз до спец. символов добрались.
Суть вот в чём. Когда в редакторе ставишь знак больше или меньше, то браузер воспринимает их как тег (когда открываете), а если тега нет, а угловая скобка есть — то вообще ничего не открывает.
Поэтому, если на экран нужно вывести угловую скобку, то в редакторе пишется спец. символ.
Писать его поначалу муторно, потом привыкаешь. Я поначалу просто копировал их и вставлял. Для этого ведь и страницу сделал с ними, чтоб скопировать в любой момент.
Теперь насобачился. Кстати, если при написания комментария, захочется поставить знак больше или меньше, то нужно тоже ставить спец. символ, иначе, всё что после него, в комментарии не выведется.
А хороши спец. символы тем, что при помощи их можно выводить знаки которых нет на клавиатуре — градус С°, стрелочки ←→, и т. п.
Главное, при копировании, не терять точку с запятой в конце. Я с этим мучился.
добрый вечер. вот на такой ерунде застряла, как написание этих спецсимволов. подскажите, как это. ничего не пойму, простите. конкретно: знак «меньше» и «больше».
спасибо.
Привет. Могу подсказать в этом направлении, что index в css — это элемент позиционирования. Есть три индекса: по оси х это x-index, далее y-index, и z-index. Элемент которому задан index с числовым значением располагается выше элемента без такового. Или если у обеих есть числовой index, то тот у которого число больше, располагается над другим. Как бы наплывает на него. Может закрыть полностью. Это зависит от свойств top и left Посмотрите у меня CSS Урок 5″Страница из блоков». Там на рис.4 показано позиционирование по z-index.
Вечер добрый! К Вам, как к высшей инстанции, за советом! Изучал в одной из тем, как оформлены виджет в сайдбаре.( ну очень хочется придать вид) Столкнулся, c двумя селекторами widget title. Один как и полагается в CSS, a второй, где прописан радиус. В веб-инспекторе index : 42. В файле index.PHP ничего подобного нет. Что это такое, и где еще могут прописываться стили. У меня уже появилось ощущение — с трудом, но что то начинаю понимать. И тут, такая для меня тайна!!! Спасибо!
Не зря значит старался. Я ведь не собирался этот сайт делать, как-то само получилось. Спасибо за отзыв.
Супер! Все прекрасно,обалденно просто и понятно!!!СПАСИБО! ВЫ — МОЛОДЕЦ!
На здоровье! Это всё из инета, я только в кучу собираю.
Действительно, шпаргалка. Здорово! Спасибо!