Руководство по HTML5

Руководство по HTML5

Адам Фриман

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

Есть четыре элемента, которые выдают происхождение 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
или RSS канал: Что новенького на smarly.net