Примеры HTML
Примеры базовых тегов HTML
- Простой файл HTML
- Этот пример является очень простым файлом HTML, который использует как можно меньше тегов HTML. Он демонстрирует, как содержимое элемента body отображается браузером.
- Простой абзац
- Этот пример демонстрирует, как текст в элементе абзаца отображается браузером.
- Более много абзацев
- Этот пример демонстрирует некоторые defaultManager поведение элементов абзацев.
- Проблема с поэзией
- Этот пример демонстрирует некоторые проблемы форматирования 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-странице. Список выбора - это опциональный список.
- Другой список выбора
- Этот пример показывает, как создать простой список выбора с предварительно установленными значениями (translator's note: предварительно установленные значения - это предпочтения, которые предварительно установлены).
- Текстовое поле (Textarea)
- Этот пример показывает, как создать текстовое поле (многострочный контроллер ввода текста). Пользователь может写入 текст в текстовое поле. В текстовом поле количество знаков не ограничено.
- Создание кнопки
- Этот пример показывает, как создать кнопку. Вы можете настроить текст на кнопке.
- Fieldset around data
- Этот пример показывает, как нарисовать рамку с заголовком вокруг данных.
Пример формы
- Форма с полями ввода и кнопкой подтверждения
- Этот пример показывает, как добавить форму на страницу. Эта форма содержит два поля ввода и кнопку подтверждения.
- Форма с флажками
- Эта форма содержит два флажка и кнопку подтверждения.
- Форма с радио-кнопками
- Эта форма содержит два радио-кнопки и кнопку подтверждения.
- Отправка электронной почты с формы
- Этот пример показывает, как отправлять电子邮件 с формы.
Объяснение примеров
Пример изображения HTML
- Вставка изображения
- Этот пример показывает, как отображать изображения на веб-странице.
- Вставка изображений из разных мест
- Этот пример показывает, как отображать изображения из других папок или серверов на веб-странице.
- Фоновое изображение
- Этот пример показывает, как добавить фоновое изображение на страницу.
- Выравнивание изображений
- Этот пример показывает, как выравнивать изображения в тексте.
- Плавающее изображение
- Этот пример показывает, как浮动 изображение до левого или правого края абзаца.
- Изменение размера изображения
- Этот пример демонстрирует, как изменить размер изображения.
- Показывать текст изображения
- Этот пример показывает, как заменить текст изображения. Если изображение не может быть загружено в браузере, атрибут замененного текста информирует читателей о потерянной информации. Хорошей привычкой является добавление атрибута замененного текста к каждому изображению на странице.
- Создание изображения-ссылки
- Этот пример демонстрирует, как использовать изображение в качестве ссылки.
- Создание карты изображений
- Этот пример показывает, как создать карту изображений с clickable областями. Каждая область - это гиперссылка.
- Преобразование изображения в карту изображений
- Этот пример показывает, как установить обычное изображение в качестве карты изображений.
Объяснение примеров
Пример стиля HTML (style)
- Стиль в HTML
- Этот пример демонстрирует, как использовать стилевые данные, добавленные в раздел <head>, для форматирования HTML.
- Ссылка без подчеркивания
- Этот пример демонстрирует, как использовать стилевые свойства для создания ссылки без подчеркивания.
- Подключение к внешнему стилю
- Этот пример демонстрирует, как использовать тег <link> для подключения к внешнему стилю.
Объяснение примеров
