<samp>: Элемент образца вывода

Базовая линия Широко доступен

Эта функция хорошо устоялась и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Элемент <samp> HTML используется для включения текстовых фрагментов, представляющих образец (или цитату) вывода программы. Содержимое обычно отображается с помощью шрифта по умолчанию браузера с фиксированным интервалом (например, Courier или Lucida Console).

Попробуйте

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

Вы можете использовать правило CSS для переопределения шрифта по умолчанию браузера для элемента <samp>; однако, возможно, что настройки браузера будут иметь приоритет над указанным вами CSS.

CSS для переопределения шрифта по умолчанию будет выглядеть следующим образом:

css

samp {
  font-family: "Courier";
}

Примечание: Если вам нужен элемент, который будет служить контейнером для вывода, генерируемого кодом JavaScript вашего веб-сайта или приложения, вместо этого следует использовать элемент <output>.

Примеры

Базовый пример

В этом простом примере абзац содержит пример вывода программы.

html

<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>

Результат

Образец вывода, включающий пользовательский ввод

Вы можете вложить элемент <kbd> в блок <samp> для представления примера, включающего введенный пользователем текст. Например, рассмотрите этот текст, представляющий протокол сеанса консоли Linux (или macOS):

HTML

html

<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>

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

CSS

CSS, который достигает желаемого внешнего вида:

css

.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

Это обеспечивает довольно нежное цветовое выделение приглашения и курсора и делает ввод с клавиатуры в образце текста полужирным.

Результат

Результат вывода:

Технические сведения

Категории содержимого	Текстовое содержимое, фразовый контент, осязаемое содержимое.
Разрешенное содержимое	Фразовый контент.
Пропуск тега	Нет, и открывающий, и закрывающий теги обязательны.
Разрешенные родительские элементы	Любой элемент, который принимает фразовый контент.
Неявная роль ARIA	`generic`
Разрешенные роли ARIA	Любые
Интерфейс DOM	`HTMLElement`

Спецификации

Спецификация
Стандарт HTML # the-samp-element

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`samp`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4

См. также

Связанные элементы: <kbd>, <code>, <pre>
Элемент <output>: контейнер для вывода, сгенерированного скриптом

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp