⚙️ CDN (Content Delivery Network) помогает ускорить загрузку HTML-страниц за счет распределения статических ресурсов (CSS, JavaScript, изображения) по серверам, расположенным ближе к пользователю.

Для подключения CDN достаточно заменить локальные ссылки на файлы на URL-адреса, предоставляемые CDN. Например, для Bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Использование CDN уменьшает нагрузку на сервер и ускоряет доставку контента, так как файлы кэшируются и загружаются с ближайшего сервера сети.

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут multiple в HTML и зачем он используется?

Атрибут multiple позволяет выбирать сразу несколько значений в элементах <select>, а также прикреплять несколько файлов в <input type="file">.

➡️ Пример:

<form>
  <label>
    Выберите теги:
    <select multiple>
      <option>Python</option>
      <option>JavaScript</option>
      <option>HTML</option>
    </select>
  </label>

  <label>
    Загрузите файлы:
    <input type="file" multiple>
  </label>
</form>

🗣️ Почему полезно:

• Дает пользователю больше гибкости при выборе
• Экономит время при загрузке нескольких файлов
• Удобно в фильтрах, тегах, списках

multiple — простой способ сделать выбор и загрузку многозначными без сложного JS.

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут checked в HTML и зачем он используется?

Атрибут checked применяется к элементам <input type="checkbox"> и <input type="radio">.
Он делает их выбранными по умолчанию при загрузке страницы.

➡️ Пример:

<form>
  <label>
    <input type="checkbox" checked>
    Подписаться на рассылку
  </label>

  <label>
    <input type="radio" name="color" value="red" checked>
    Красный
  </label>
  <label>
    <input type="radio" name="color" value="blue">
    Синий
  </label>
</form>

🗣️ Почему полезно:

• Устанавливает значение по умолчанию
• Экономит действия пользователя
• Удобен в настройках, формах и опросах

checked — простой способ сразу подсветить рекомендуемый выбор.

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут readonly в HTML и зачем он используется?

Атрибут readonly применяется к элементам формы, делая их доступными только для чтения.

Пользователь видит значение, но не может его изменить.

➡️ Пример:

<form>
  <label>
    Ваш ID:
    <input type="text" value="12345" readonly>
  </label>
  <button type="submit">Отправить</button>
</form>

🗣️ Почему полезно:

• Позволяет показать данные без возможности редактирования
• Значение всё равно отправляется вместе с формой
• Отличие от disabled: поле остаётся активным и копируемым

readonly часто применяют в профилях, админках и формах редактирования.

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут required в HTML и зачем он используется?

Атрибут required делает поле формы обязательным для заполнения.

Если пользователь попытается отправить форму без значения — браузер покажет предупреждение.

➡️ Пример:

<form>
  <label>
    Email:
    <input type="email" required>
  </label>
  <button type="submit">Отправить</button>
</form>

🗣️ Почему полезно:

• Проверка происходит прямо в браузере, без JavaScript
• Повышает удобство для пользователя
• Работает с <input>, <textarea>, <select>


required — простой способ добавить валидацию в форму «из коробки».

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут minlength в HTML и зачем он используется?

Атрибут minlength задаёт минимальное количество символов, которое пользователь должен ввести в поле формы.

Если условие не выполнено — браузер покажет предупреждение

➡️ Пример:

<form>
  <label>
    Пароль (минимум 6 символов):
    <input type="password" minlength="6" required>
  </label>
  <button type="submit">Отправить</button>
</form>

🗣️ Почему полезно:

• Добавляет валидацию прямо в браузере
• Удобен для паролей, логинов, текстовых полей
• Работает с <input> и <textarea>

minlength помогает контролировать корректность данных без JavaScript

CodeBase | Frontend | #Основы

⚙️ Что такое свойство line-height в CSS и зачем оно нужно?

Свойство line-height управляет расстоянием между строками текста.

Это влияет не только на читаемость, но и на вертикальный ритм всего интерфейса

➡️ Пример:

<p class="text">
  Это пример текста с увеличенным межстрочным интервалом.
</p>

<style>
  .text {
    font-size: 16px;
    line-height: 1.8;
  }
</style>

🗣️ Популярные приёмы:

• относительные значения (1.5–1.8) делают текст универсально читаемым
• фиксированные значения (например, 24px) применяются в строгих дизайн-системах
• полезно для типографики, карточек, описаний и списков

line-height — одно из ключевых свойств для визуального баланса текста в вебе

CodeBase | Frontend | #Основы