Понятная теория и эффективные тренажеры с объяснением! Вы успеете подготовиться к экзамену! Начните занятия прямо сейчас!
HTML-элементы
Язык HTML, который используется для создания веб-страниц и верстки (ссылка на верстку HTML), содержит огромное количество различных тегов. Но гибкость языку придают и другие инструменты. Например, CSS (ссылка на style). При этом необходимо знать теги – как базу, при помощи которой создаются современные сайты.
1. Основные элементы структуры страницы
-
<html>: Корневой элемент HTML-документа.
-
<head>: Содержит метаинформацию о документе (например, <title>, <meta>).
-
<body>: Основное содержимое страницы.
2. Элементы заголовков и текста
-
<h1>–<h6>: Заголовки разного уровня.
-
<p>: Абзац текста.
-
<br>: Разрыв строки.
-
<hr>: Горизонтальная линия, разделяющая содержимое.
-
<pre>: Предварительно отформатированный текст.
3. Элементы форматирования текста
-
<b>: Жирное начертание.
-
<strong>: Важный текст (обычно выделяется жирным).
-
<i>: Курсивное начертание.
-
<em>: Эмфатический (выразительный) текст (обычно курсив).
-
<mark>: Подсвеченный текст.
-
<small>: Уменьшенный текст.
-
<del>: Зачеркнутый текст.
-
<ins>: Добавленный текст (подчеркнутый).
-
<sub>: Нижний индекс.
-
<sup>: Верхний индекс.
-
<span>: Группировка текста для стилизации.
4. Элементы ссылок и навигации
-
<a>: Ссылка на другую страницу или ресурс.
-
<nav>: Навигационная секция.
5. Элементы для работы с изображениями и мультимедиа
-
<img>: Вставка изображений.
-
<figure>: Группа для иллюстраций и подписи.
-
<figcaption>: Подпись к иллюстрации.
-
<audio>: Воспроизведение аудио.
-
<video>: Воспроизведение видео.
-
<source>: Указывает источник мультимедиа.
-
<track>: Текстовые дорожки для видео/аудио (субтитры).
-
<embed>: Встраивание внешнего содержимого.
-
<iframe>: Встраивание другого HTML-документа.
6. Списки
-
<ul>: Нумерованный список.
-
<ol>: Ненумерованный список.
-
<li>: Элемент списка.
-
<dl>: Список определений.
-
<dt>: Термин списка.
-
<dd>: Определение термина.
7. Таблицы
-
<table>: Таблица.
-
<thead>: Заголовочная часть таблицы.
-
<tbody>: Основное содержимое таблицы.
-
<tfoot>: Нижняя часть таблицы.
-
<tr>: Строка таблицы.
-
<th>: Заголовочная ячейка.
-
<td>: Обычная ячейка.
8. Формы и пользовательский ввод
-
<form>: Контейнер для форм.
-
<input>: Поле ввода.
-
<textarea>: Текстовая область.
-
<button>: Кнопка.
-
<label>: Метка для элемента формы.
-
<fieldset>: Группировка элементов формы.
-
<legend>: Заголовок для <fieldset>.
-
<select>: Выпадающий список.
-
<option>: Пункт в выпадающем списке.
-
<datalist>: Список автозаполнения.
-
<optgroup>: Группа опций.
-
<output>: Вывод данных.
-
<progress>: Индикатор выполнения.
-
<meter>: Индикатор измерений (например, шкала).
9. Семантические элементы HTML
-
<header>: Заголовочная часть страницы или секции.
-
<footer>: Нижняя часть страницы или секции.
-
<section>: Раздел контента.
-
<article>: Самостоятельный контент.
-
<aside>: Боковое содержимое, связанное с основным.
-
<main>: Основное содержимое документа.
-
<address>: Контактная информация.
-
<time>: Время или дата.
10. Скрипты и программная логика
-
<script>: Вставка JavaScript.
-
<noscript>: Содержимое для случаев, если JavaScript отключен.
-
<template>: Шаблонный контент.
-
<slot>: Контентный слот в веб-компонентах.
11. Метаданные и ресурсы
-
<meta>: Метаданные о документе.
-
<title>: Заголовок страницы.
-
<link>: Связь с внешними ресурсами.
-
<style>: Встроенные CSS-стили.
12. Графика и анимация
-
<canvas>: Рисование 2D-графики.
-
<svg>: Векторная графика.
-
<path>, <circle>, <rect> и другие: Элементы SVG.
13. Элементы для работы с тенями и теневыми DOM
-
<shadow>: Контейнер для теневого DOM (устаревший, заменен ShadowRoot).
-
<slot>: Позволяет вставлять пользовательский контент в веб-компоненты.
14. Устаревшие элементы (не рекомендуется)
-
<font>: Определение шрифта (устарело в HTML5).
-
<center>: Выравнивание по центру (заменено на CSS).
-
<big>: Увеличенный текст.
-
<acronym>: Аббревиатура (заменено <abbr>).
Этот краткий список можно использовать для создания современных сайтов различной сложности. Язык HTML (ссылка на верстку сайта) можно называть языком разметки, поскольку он формирует таблицу – сетку, которая разделяет общее поле на набор связанных между собой блоков.
Давайте посмотрим на пример кода, в котором используется большое количество тегов и элементов HTML.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Демонстрация HTML-элементов</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }
header, footer { background-color: #f4f4f4; padding: 10px; }
section { margin: 20px 0; }
</style>
</head>
<body>
<header>
<h1>Демонстрация HTML-элементов</h1>
<nav>
<a href="#text">Текст</a>
<a href="#lists">Списки</a>
<a href="#media">Медиа</a>
</nav>
</header>
<main>
<section id="text">
<h2>Текстовые элементы</h2>
<p>Это обычный текст. Пример <b>жирного</b>, <i>курсивного</i> и <mark>выделенного</mark> текста. Также можно увидеть <small>мелкий текст</small>, <sub>нижний индекс</sub> и <sup>верхний индекс</sup>.</p>
<blockquote>"Это цитата из другого источника."</blockquote>
<hr>
</section>
<section id="lists">
<h2>Списки</h2>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
<ol>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
<hr>
</section>
<section id="media">
<h2>Медиа</h2>
<figure>
<img src= "https://via.placeholder.com/150" alt="Изображение">
<figcaption>Пример изображения.</figcaption>
</figure>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио.
</audio>
<video controls width="320" height="240">
<source src="video.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
</section>
</main>
<footer>
<p>© 2024 Демонстрация HTML</p>
</footer>
</body>
</html>
Если скопировать и запустить этот код, будет видно, сколько различных элементов сейчас поддерживает HTML. Также можно попрактиковаться в подготовке к ЕГЭ и отредактировать код таким образом, чтобы он изменился должным образом.
Типовые задания ЕГЭ – тесты. Для их верного решения можно попробовать ответить на вопросы ниже:
1. Какая группа HTML-элементов используется для структурирования текста?
-
Интерактивные элементы
-
Текстовые элементы
-
Медиа-элементы
-
Элементы таблиц
2. Какой из элементов относится к семантическим?
-
<div>
-
<span>
-
<article>
-
<b>
3. Что описывает элемент <meta>?
-
Визуальное оформление страницы
-
Метаданные документа
-
Структуру таблицы
-
Отображение мультимедиа
4. Какой из следующих HTML-элементов используется для создания ссылок?
-
<a>
-
<button>
-
<img>
-
<form>
5. Какой элемент используется для создания нумерованного списка?
-
<ul>
-
<ol>
-
<li>
-
<dl>