Представление ввода/вывода

Есть четыре элемента, которые выдают происхождение HTML. Вы можете использовать эти элементы для представления компьютерного ввода и вывода. В таблице 8-15 представлены эти элементы. Ни у одного из этих элементов нет локальных атрибутов, и ни один из них не были добавлен или изменен в HTML5.

Таблица 8-15: Текстовые элементы компьютерного ввода/вывода

Элемент	Описание	Соглашение по стилям
`code`	Обозначает фрагмент компьютерного кода	`code { font-family: monospace; }`
`var`	Указывает на переменную в контексте, посвященном программированию, или является заполнителем (placeholder) для читателя, куда можно мысленно вставить определенное значение	`var { font-style: italic; }`
`samp`	Обозначает выходные данные программы или компьютерной системы	`samp { font-family: monospace; }`
`kbd`	Обозначает текст, введенный пользователем	`kbd { font-family: monospace; }`

В листинге 8-14 показано, как эти четыре элемента используются в документе.

Листинг 8-14: Использование элементов code, var, samp и kbd

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
		<meta name="author" content="Adam Freeman"/>
		<meta name="description" content="A simple example"/>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	</head>
	<body>
		<p>
		<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
		document.writeln("I like " + fruits.length + " fruits");</code>
		</p>
		<p>The variable in this example is <var>fruits</var></p>
		<p>The output from the code is: <samp>I like 4 fruits</samp></p>
		<p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd>
	</body>
</html>

На рисунке 8-13 вы можете увидеть стили по умолчанию для этих элементов. Обратите внимание, что три из этих элементов имеют одинаковые стили. Я использовал элемент р, чтобы придать содержанию некоторую структуру (я описываю элемент р в главе 9).

Рисунок 8-13: Использование элементов code, var, samp и kbd

8.5. Создание цитат, определений и аббревиатур

или RSS канал: