Примеры HTML
Примеры базовых тегов HTML
- Простой файл HTML
- Этот пример представляет собой очень простой файл HTML, который использует как можно меньше тегов HTML. Он демонстрирует, как содержимое элемента body отображается браузером.
- Простой абзац
- Этот пример демонстрирует, как текст в элементе абзаца отображается браузером.
- Более многословных абзацев
- Этот пример демонстрирует некоторые поведения элементов абзацев по умолчанию.
- Проблема с поэзией
- Этот пример демонстрирует некоторые проблемы форматирования HTML.
- Разрыв строки
- Этот пример демонстрирует использование разрыва строк в документе HTML.
- Заголовок
- Этот пример демонстрирует теги для отображения заголовков в HTML-документе.
- Центрированный заголовок
- Этот пример демонстрирует заголовок, выровненный по центру.
- Горизонтальная линия
- Этот пример демонстрирует, как вставить горизонтальную линию.
- Скрытые комментарии
- Этот пример демонстрирует, как вставить скрытый комментарий в исходный код HTML.
- Фоновый цвет
- Этот пример демонстрирует, как добавить фоновый цвет на страницу HTML.
Объяснение примеров
Пример HTML-рамок
- Вертикальная рамка
- Этот пример демонстрирует, как создать вертикальную рамку из трех различных документов.
- Горизонтальная рамка
- Этот пример демонстрирует, как создать горизонтальную рамку из трех различных документов.
- Как использовать тег <noframes>
- Этот пример демонстрирует, как использовать тег <noframes>.
- Смешанная структура рамок
- Этот пример демонстрирует, как создать структуру рамки с тремя документами, которые смешаны в строках и столбцах.
- Структура рамки с атрибутом noresize="noresize"
- Этот пример демонстрирует атрибут noresize. В этом примере рамка не может быть изменена по размеру. Если потянуть мышь за рамку между рамками, вы обнаружите, что рамка не может быть перемещена.
- Навигационная рамка
- Этот пример демонстрирует, как создать навигационную рамку. Навигационная рамка содержит список ссылок, которые指向 вторую рамку. Файл с именем "contents.htm" содержит три ссылки.
- Встроенный фрейм
- Этот пример демонстрирует, как создавать встроенные фреймы (фреймы в HTML-странице).
- Перейти к разделу в фрейме
- Этот пример демонстрирует два фрейма. Один из фреймов содержит ссылку на раздел в другом файле. В файле "link.htm" указанный раздел идентифицируется с помощью <a name="C10">.
- Перейти к разделу в фрейме с помощью навигации
-
Этот пример демонстрирует два фрейма. Левый навигационный фрейм содержит список ссылок, эти ссылки направляют на第二个 фрейм. Второй фрейм показывает документ, на который ссылаются ссылки. Ссылки в навигационном фрейме указывают на разделы в целевом файле.
Объяснение примеров
Пример таблицы HTML
- Таблица
- Этот пример демонстрирует, как создавать таблицы в документе HTML.
- Рамки таблицы
- Этот пример демонстрирует различные типы рамок таблицы.
- Таблица без рамки
- Этот пример демонстрирует таблицу без рамки.
- Заголовки таблицы (Heading)
- Этот пример демонстрирует, как отображать заголовки таблицы.
- Пустые ячейки
- Этот пример демонстрирует, как обрабатывать ячейки без содержимого с помощью " ".
- Таблица с заголовком
- Этот пример демонстрирует таблицу с заголовком (caption).
- Ячейки таблицы,跨越多行或多列
- Этот пример демонстрирует, как определить таблицу с跨越多行或多列 ячеек.
- Теги в таблице
- Элементы в таблице
- Отступ между ячейкой и ее рамкой (Cell padding)
- Этот пример демонстрирует, как использовать Cell padding для создания пробела между содержимым ячейки и ее рамкой.
- Интервал между ячейками (Cell spacing)
- Этот пример демонстрирует, как использовать Cell spacing для увеличения расстояния между ячейками.
- Добавление фона цвета или фонового изображения к таблице
- Добавление фона цвета или фонового изображения к таблице
- Добавление фона цвета или фонового изображения к ячейкам таблицы
- Добавление фона к ячейкам таблицы
- Расположение содержимого в ячейках таблицы
- Этот пример демонстрирует, как использовать атрибут "align" для расположения содержимого ячеек, чтобы создать красивую таблицу.
- Атрибут рамки (frame)
- Этот пример демонстрирует, как использовать атрибут "frame" для управления рамкой вокруг таблицы.
Объяснение примеров
HTML форма и примеры ввода
- Текстовые поля (Text fields)
- Этот пример демонстрирует, как создавать текстовые поля в HTML-странице. Пользователь может写入 текст в текстовое поле.
- Поле ввода пароля
- Этот пример демонстрирует, как создавать поля ввода пароля в HTML.
- Флажки
- Этот пример демонстрирует, как создавать флажки в HTML. Пользователь может выбрать или снять выбор с флажка.
- Радио кнопки
- Этот пример демонстрирует, как создавать радио кнопки в HTML.
- Простой список выбора
- Этот пример демонстрирует, как создавать простый список выбора в HTML-странице. Лист выбора - это опциональный список.
- Ещё один список выбора
- Этот пример демонстрирует, как создавать простый список выбора с предварительно установленными значениями (примечание переводчика: предварительно установленные значения - это предварительно指定的 предпочтения).
- Текстовое поле (Textarea)
- Этот пример демонстрирует, как создавать текстовое поле (многострочный контроллер ввода текста). Пользователь может写入 текст в текстовое поле. В текстовом поле не ограничивается количество символов.
- Создание кнопки
- Этот пример демонстрирует, как создавать кнопки. Вы можете настроить текст на кнопке.
- Fieldset around data
- Этот пример демонстрирует, как рисовать рамку с заголовком вокруг данных.
Пример формы
- Форма с полями ввода и кнопкой подтверждения
- Этот пример демонстрирует, как добавить форму на страницу. Эта форма содержит два поля ввода и кнопку подтверждения.
- Форма с флажками
- Эта форма содержит два флажка и кнопку подтверждения.
- Форма с радиокнопками
- Эта форма содержит два радиокнопки и кнопку подтверждения.
- Отправка электронной почты через форму
- Этот пример показывает, как отправлять электронную почту через форму.
Объяснение примеров
Пример использования изображения в HTML
- Вставка изображения
- Этот пример демонстрирует, как отображать изображения на веб-странице.
- Вставка изображения из разных мест
- Этот пример демонстрирует, как отображать изображения из других папок или серверов на веб-странице.
- Фоновое изображение
- Этот пример демонстрирует, как добавить фоновое изображение на веб-страницу.
- Позиционирование изображения
- Этот пример демонстрирует, как排列 изображение в тексте.
- Флоат изображения
- Этот пример демонстрирует, как浮动 изображение до левого или правого края абзаца.
- Изменение размера изображения
- Этот пример демонстрирует, как изменять размер изображения.
- Показывать заменяющий текст для изображения
- Этот пример демонстрирует, как показывать заменяющий текст для изображения. Когда браузер не может загрузить изображение, свойство заменяющего текста сообщает читателям потерянную информацию. Хорошей привычкой является добавление свойства заменяющего текста к каждому изображению на странице.
- Создание изображения-ссылки
- Этот пример демонстрирует, как использовать изображение в качестве ссылки.
- Создание изображения-карты
- Этот пример показывает, как создать изображение-карту сclickable областью. Каждая область - это гиперссылка.
- Преобразование изображения в изображение-карту
- Этот пример показывает, как установить обычное изображение в качестве изображения-карты.
Объяснение примеров
