Урок посвящен тегам HTML для форматирования текста. Рассмотрим теги для заголовков, абзацев и изменения стиля текста.
Заголовки
Для создания заголовков используются теги <h1> — <h6>. <h1> — заголовок первого уровня, <h2> — второго и т.д. Это парные теги: каждому открывающему тегу (например, <h1>) нужен закрывающий (</h1>). Важно соблюдать порядок: сначала открывающий, затем закрывающий.
Пример:
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>Каждый последующий уровень заголовка отображается меньшим шрифтом. Все эти теги (<h1> — <h6>) создают заголовки (heading), отличающиеся размером шрифта.
Абзацы
Для создания абзацев используется тег <p>. Это парный тег. Текст внутри <p> отображается как отдельный абзац с отступами сверху и снизу. Без <p> текст отображается в одну строку, игнорируя переносы строк в коде.
Пример:
<p>Текст абзаца 1.</p>
<p>Текст абзаца 2.</p>Стилевое оформление текста
Жирный текст
Для жирного шрифта используются <b> (bold) или <strong>. Они функционально идентичны. Рекомендуется <b> для стилистического форматирования, <strong> — для семантического выделения важной информации, хотя визуально разницы нет.
Пример:
<p>Это <b>жирный</b> текст.</p>
<p>Это <strong>жирный</strong> текст.</p>Курсив
Для наклона текста используется <i> (italic) или <em>. Аналогично <b> и <strong>, <i> и <em> функционально эквивалентны.
Пример:
<p>Это <i>курсивный</i> текст.</p>
<p>Это <em>курсивный</em> текст.</p>Перечеркнутый текст
<strike> используется для перечеркивания текста.
Пример:
<p><strike>Перечеркнутый текст</strike></p>Верхние и нижние индексы
<sup> создает верхний индекс, <sub> — нижний.
Пример:
<p>H<sub>2</sub>O</p>
<p>a<sup>2</sup></p>Перенос строки и горизонтальная линия
<br> переносит строку (одиночный тег). <p> также переносит строку, создавая новый абзац (добавляет отступы, в отличие от <br>). <hr> создает горизонтальную линию (одиночный тег).
Примеры:
<p>Текст на одной строке.<br>Текст на новой строке.</p>
<hr>Аббревиатуры, адреса и изменение размера шрифта
<abbr> используется для аббревиатур (атрибут title для расшифровки). <address> для контактной информации. <big> и <small> увеличивают и уменьшают размер шрифта соответственно.
Примеры:
<abbr title="HyperText Markup Language">HTML</abbr>
<address>Сиэтл, США</address>
<h1>Заголовок <big>2</big></h1>
<h1>Заголовок <small>2</small></h1>Вывод кода
<pre> для вывода кода с форматированием, <code> для небольших фрагментов.
Пример:
<pre>
function myFunction() {
let x = 0;
}
</pre>
<p>Пример кода: <code>let x = 0;</code></p>Рассмотрены основные HTML-теги для работы с текстом. Изучение CSS позволит улучшить внешний вид веб-страницы.