Sobes.tech
Назад к вопросам
Junior
81
questionbank

Какие основные особенности HTML, с которыми должен быть знаком Frontend-разработчик?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

  • Семантические теги (<header>, <nav>, <main>, <article>, <aside>, <footer>) для улучшения структуры и доступности.
  • Различия между блочными и строчными элементами.
    • Блочные элементы (например, <div>, <p>, <h1>) занимают всю доступную ширину и начинаются с новой строки.
    • Строчные элементы (например, <span>, <a>, <strong>) занимают только необходимую ширину и не создают разрыва строки.
  • Атрибуты элементов:
    • Глобальные атрибуты (например, id, class, style, data-*).
    • Специфичные для элемента атрибуты (например, href для <a>, src для <img>, type для <input>).
  • Работа с формами (<form>, <input>, <textarea>, <button>, <select>, <option>) и их атрибуты (name, value, placeholder, required).
  • Вставка медиа (<img>, <video>, <audio>). Понимание атрибутов src, alt, controls, autoplay.
  • HTML5 API:
    • Drag and Drop API.
    • Web Storage API (localStorage, sessionStorage).
    • Geolocation API.
    • Canvas API.
  • Доступность (ARIA-атрибуты, семантика).
  • Валидная структура HTML5 документа (doctype, <html>, <head>, <body>).
  • Мета-теги (<meta charset="...">, <meta name="viewport"...>, <meta name="description"...>, <meta name="keywords"...>).
  • Работа с таблицами (<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>).
<!-- Пример семантической разметки -->
<header>
  <h1>Заголовок сайта</h1>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Заголовок статьи</h2>
    <p>Содержимое статьи...</p>
  </article>
  <aside>
    <h3>Похожие статьи</h3>
    <ul>
      <li>Статья 1</li>
      <li>Статья 2</li>
    </ul>
  </aside>
</main>
<footer>
  <p>&copy; 2023 Мой сайт</p>
</footer>

<!-- Пример формы -->
<form action="/submit" method="post">
  <div>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required placeholder="Введите ваше имя">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div>
    <button type="submit">Отправить</button>
  </div>
</form>