HTML - тег <kbd> используется для определения ввода с клавиатуры. Содержимое внутри отображается моноширинным шрифтом браузера по умолчанию.
Тег <kbd> - синтаксис и код
Тег <kbd> представлен парами. Содержимое записывается между открывающим (<kbd>) и закрывающим (</kbd>) тегами. Однако закрывающий тег не требуется.
Пример определения текста как ввод с клавиатуры в документе:
<p>Нажмите <kbd>Ctrl</kbd> + <kbd>C</kbd>, чтобы скопировать текст (Windows).</p>
<p>Нажмите <kbd>Cmd</kbd> + <kbd>C</kbd>, чтобы скопировать текст (Mac OS).</p>
Нажмите Ctrl + C, чтобы скопировать текст (Windows).
Нажмите Cmd + C, чтобы скопировать текст (Mac OS).
Определение и использование
- Тег
<kbd> определяет ввод с клавиатуры. Тег используется, когда необходимо отобразить текст, который пользователь должен ввести на клавиатуре.
- В браузере содержимое тега отображается моноширинным шрифтом (все символы имеют одинаковую ширину).
Этот элемент часто используется недостаточно, но он очень полезен для написания любой пользовательской документации.
Одна из причин, заключается в том, что моноширинный шрифт является стилем по умолчанию, что делает его неотличимым от элемента <code>. Но добавление стиля к элементам <kbd> может сделать их более коммуникативными и полезными.
Если вы вставите элемент <kbd> в другой элемент <kbd>, входная единица будет представлена как часть более крупной единицы.
Если вы вставите элемент <kbd> в элемент <samp>, он будет представлять собой ввод, возвращаемый пользователю системой.
Если вы вставите элемент <samp> в элемент <kbd>, он будет представлять входные данные на основе текста, представленного системой.
★ Примечание: этот тег не устарел. Однако можно добиться более глубокого эффекта, используя CSS (см. пример ниже).
Также посмотрите:
| Тег |
Описание |
| <code> |
Определяет фрагмент компьютерного кода |
| <samp> |
Определяет пример вывода компьютерной программы |
| <var> |
Определяет переменную |
| <pre> |
Определяет предварительно отформатированный текст |
Поддержка <kbd> браузерами
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
Атрибуты
Глобальные атрибуты
Тег <kbd> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <kbd> также поддерживает атрибуты событий в HTML
Дополнительные примеры
Используйте CSS для стилизации элемента <kbd>:
<html>
<head>
<style>
kbd {
border-radius: 2px;
padding: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<p>Нажмите <kbd>Ctrl</kbd> + <kbd>C</kbd> чтобы скопировать текст (Windows).</p>
<p>Нажмите <kbd>Cmd</kbd> + <kbd>C</kbd> чтобы скопировать текст (Mac OS).</p>
</body>
</html>
Нажмите Ctrl + C чтобы скопировать текст (Windows).
Нажмите Cmd + C чтобы скопировать текст (Mac OS).
Связанные страницы
Руководство по HTML: форматирование HTML текста
Настройки CSS по умолчанию
Большинство браузеров отображают элемент kbd со следующими значениями по умолчанию:
kbd {
font-family: monospace;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
