Теги блочных элементов

3.1 Элемент <p>

Блочные элементы в HTML используются для создания структуры и организации содержимого веб-страницы. Они помогают разбивать контент на логические блоки и сегменты. Эти элементы начинают новую строку и занимают всю доступную ширину. Рассмотрим подробнее три часто используемых тега: <p>, <div> и <span>.

Тег <p>

Тег <p> используется для создания абзацев текста. Он является блочным элементом: это означает, что каждый абзац начинается с новой строки и имеет отступы сверху и снизу.

Пример использования:

    
      <p>
        Это первый абзац текста. Абзацы используются для разделения текста на логические блоки,
        улучшая его читабельность.
      </p>
      <p>Это второй абзац текста. Каждый абзац начинается с новой строки.</p>
    
  

Свойства:

• Блочный элемент: Располагается на новой строке и занимает всю доступную ширину.
• Автоматические отступы: Обычно браузеры добавляют отступы перед и после абзаца.
• Вложенность: Тег <p> не может содержать другие блочные элементы.

Стилизация с помощью CSS:

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 Элемент <div>

Тег <div> является универсальным блочным контейнером, который используется для группировки других элементов и применения стилей к ним. Он не имеет встроенных стилей и используется исключительно для структурирования контента.

Пример использования:

    
      <div class="container">
        <h2>Заголовок блока</h2>
        <p>Некоторый текст внутри блока div.</p>
      </div>
    
  

Свойства:

• Блочный элемент: располагается на новой строке и занимает всю доступную ширину
• Универсальность: может содержать любые другие элементы, включая блочные и строчные
• Стилизация и скрипты: часто используется для применения CSS-стилей и JavaScript-скриптов

Стилизация с помощью CSS:

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 Элемент <span>

Тег <span> является строчным элементом и используется для выделения части текста или другого контента внутри блочных элементов. Он не имеет встроенных стилей и служит для применения CSS-стилей и JavaScript-скриптов к определенным частям текста.

Пример использования:

    
      <p>Этот текст содержит выделенное <span class="highlight"> слово</span>, которое отличается от остального текста.</p>
    
  

Свойства:

• Строчный элемент: не создает новой строки и занимает только необходимую ширину
• Гибкость: используется для применения стилей к отдельным частям текста или других элементов
• Часто используется в комбинации с CSS и JavaScript: помогает точно стилизовать или манипулировать частями текста

Стилизация с помощью CSS:

    
      .highlight {
        color: red;
        font-weight: bold;
      }
    
  

3.4 Сравнение <div> и <span>

<div>:

• Блочный элемент
• Начинается с новой строки
• Может содержать другие блочные и строчные элементы
• Используется для группировки и структурирования контента

<span>:

• Строчный элемент
• Не нарушает поток текста
• Используется для стилизации отдельных частей текста
• Часто применяется для выделения и работы с JavaScript

Пример комбинированного использования <div> и <span>:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>Заголовок статьи</h2>
        <p>
          Это абзац текста статьи с ключевым <span class="keyword">словом</span>, которое выделено для привлечения внимания.
        </p>
      </div>
    
  

Теги <p>, <div> и <span> являются основными строительными блоками HTML, которые позволяют создавать структурированные, стилизованные и интерактивные веб-страницы. Понимание их особенностей и правильное использование помогают создавать удобные и функциональные интерфейсы.

1

Задача

Модуль 1: Web Core, 3 уровень, 2 лекция

Недоступна

Группировка с <div>

Группировка с <div>

Открыть

1

Задача

Модуль 1: Web Core, 3 уровень, 2 лекция

Недоступна

Выделение с <span>

Выделение с <span>

Открыть