HTML-тег `<kbd>`

Тег <kbd> определяет ввод с клавиатуры. Он используется, когда необходимо отобразить текст, который пользователь должен ввести с клавиатуры (по любым причинам). Этот элемент часто недооценивают, но он очень полезен при написании любой пользовательской документации.

В браузере содержимое тега отображается моноширинным шрифтом (все символы имеют одинаковую ширину). Одна из причин, по которой <kbd> используется редко, заключается в том, что моноширинный шрифт является стилем по умолчанию, из-за чего его трудно отличить от элемента <code>. Однако добавление стилей к элементам <kbd> может сделать их более наглядными и полезными.

Вы можете использовать другие элементы вместе с <kbd> для добавления конкретики:

Если вставить элемент <kbd> в другой <kbd>, единица ввода будет представлена как часть более крупной единицы.
Если вставить элемент <kbd> в элемент <samp>, он будет представлять ввод, возвращаемый системой пользователю.
Если вставить элемент <samp> в элемент <kbd>, он будет представлять ввод на основе текста, отображаемого системой.

Синтаксис

Тег <kbd> используется парами. Содержимое записывается между открывающим (<kbd>) и закрывающим (</kbd>) тегами. Однако закрывающий тег (</kbd>) не является обязательным.

Пример использования HTML-тега `<kbd>`:

Сочетание клавиш для сохранения документа|Пример HTML-тега <kbd>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Use the combination of these keys to save the document
      <kbd>
        <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>
    </p>
  </body>
</html>

Try it Yourself »

Результат

пример тега kbd

успех
Тег <kbd> пока не устарел, но более богатые эффекты можно достичь, используя свойства CSS font-family или border.

Пример использования HTML-тега `<kbd>` со свойствами CSS:

Сочетание клавиш для создания нового документа|Пример HTML-тега <kbd>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      kbd.key {
        padding: 1px 2px 0;
        border-radius: 3px;
        border: 1px solid #666;
        border-color: #990000;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <p>
      Save the document by pressing
      <kbd>
         <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>.
    </p>
    <p>
      Create a new document by pressing
      <kbd>
         <kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd>
      </kbd>.
    </p>
  </body>
</html>

Try it Yourself »

Атрибуты

Тег <kbd> поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML-тег <kbd>

json

{
    "tag_name": "kbd"
}

Практика

В чём назначение и область применения HTML-тега <kbd>?

Он используется для определения ввода пользователя.Он используется для вставки изображений на веб-страницу.Обычно он отображается моноширинным шрифтом по умолчанию в браузере.Он используется для форматирования текста курсивом.Он используется для определения части текста, которую должен ввести пользователь.Он используется для создания гиперссылок.

HTML-тег <kbd> ​

Синтаксис ​

Пример использования HTML-тега <kbd>: ​

Результат ​

Пример использования HTML-тега <kbd> со свойствами CSS: ​

Атрибуты ​