Сад Тиграна Саргсяна

Теги HTML для работы с текстом

Создано: 16 февраля 2025 г.Последнее изменение: 4 апреля 2025 г.время чтения ~2 мин.

Заголовки

  • Парные теги (нужно открыть и закрыть)
  • Используются для создания заголовков различного уровня
<body>
	<h1>Заголовок 1 уровня</h1>
	<h2>Заголовок 2 уровня</h2>
	<h3>Заголовок 3 уровня</h3>
	<h4>Заголовок 4 уровня</h4>
	<h5>Заголовок 5 уровня</h5>
	<h6>Заголовок 6 уровня</h6>
</body>

Абзацы

  • Парный тег
  • Используется для разделения текста на абзацы
<p>Это пример абзаца текста.</p>

Списки

  • Нумерованные списки: ordered list
  • Маркированные списки: unordered list
<ul>
	<li>Элемент 1 маркированного списка<li>
	<li>Элемент 2 маркированного списка<li>
</ul>
<ol>
	<li>Элемент 1 нумерованного списка<li>
	<li>Элемент 2 нумерованного списка<li>
</ol>

Продвинутые нумерованные списки

  • Можно начать не с 1, а с другой цифры
  • Можно задать другой тип (например, буквы = a, римские цифры = i)
<p>Список покупок: </p>
<ol start="7" type="a">
	<li>Молоко</li>
	<li>Картошка</li>
	<li>Развлекателенатор</li>
	<li>Пульт от телевизора </li>
</ol>

Продвинутые маркированные списки

  • Можно задать другие пункты (circle для незакрашенных кружков, square для закрашенных квадратиков)
<p>Маркированный список:</p>
<ul type = square>
	<li>Гамбол</li>
	<li>Дарвин</li>
	<li>Анаис</li>
	<li>Ричард</li>
	<li>Николь</li>
</ul>

Прямое выделение текста

  • Жирный текст
  • Курсивный текст
  • Подчёркнутый текст
  • Зачёркнутый текст (strike)
<p><b>Жирный текст</b></p>
<p><i>Курсивный текст</i></p>
<p><u>Подчёркнутый текст</u></p>
<p><s>Зачёркнутый текст</s></p>

Непрямое выделение текста

  • Жирный текст = важный, сильный текст
  • Курсивный текст = эмоциональное выделение
<p><strong>Это жирный и важный текст.</strong></p>
<p><em>Это курсивный и эмоциональный текст.</em></p>

Цитаты

  • Длинные цитаты
  • Краткие цитаты
<blockquote>Это длинная цитата.</blockquote>
<p>Он сказал: <q>Это короткая цитата.</q></p>

Код

  • code отображает код внутри текста
  • pre сохраняет форматирование и отступы
<pre>
function helloWorld() {
    console.log("Hello, World!");
}
</pre>
<p>Пример встроенного кода: <code>console.log('Hello');</code></p>

Разделители

  • hr горизонтальная линия для разделения частей контента
  • br перенос строки (расшифровывается как break, прервать ряд)
    • Удобнее использовать вместо p абзацев, но отступы не создаются
<p>Первая строка текста.<br>Вторая строка текста.</p>
<hr>
<p>Текст после горизонтальной линии.</p>

Ссылки

  • Для добавления гиперссылок используется тег a
<a href="doctor-robotnik505.github.io/nerd">Перейти на сайт</a>

Выделение текста

  • Выделение текста (обычно жёлтым текстом)
  • Стилизация небольших фрагментов текста (любой цвет)
<p>Этот текст <mark>выделен</mark>.</p>
<p><span style="color: red;">Красный текст.</span></p>

Верхние и нижние индексы

  • sub подстрочный
  • sup надстрочный
<p>Молекула H<sub>2</sub>O</p>
<p>Ион K<sup>+</sup></p>

Аббревиатура

  • title можно добавлять абсолютному ко всему
    • Но здесь это удобнее всего как расшифровка аббревиатуры
<abbr title="Министерство внутренних дел">МВД</abbr>

Адреса

  • Просто применяется курсивный текст
<address>Новокузнецк, Кемеровская область - Кузбасс, Россия</adress>

Увеличение и уменьшение шрифта шрифта

Сейчаc мы будем заниматься <big>созданием сайта</big><br>
Гамбол, Дарвин, Анаис, Ричард, Николь <small>и другие действующие лица</small>

Вид графа