Главная страница   /   9.2. Создание абзацев (Руководство по HTML5

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

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

Адам Фриман

9.2. Создание абзацев

Элемент p представляет абзац. Абзацы – это блоки текста, содержащие одно или несколько связанных предложений, которые касаются одной точки зрения или идеи. Абзацы также может состоять из предложений, которые касаются различных точек зрения, но объединены общей темой. В таблице 9-2 представлен элемент p.

Таблица 9-2: Элемент p
Элемент p
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Атрибут align является устаревшим в HTML5 (она начал считаться устаревшим еще в HTML4)
Соглашение по стилям p { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }

В листинге 9-2 показано, как элемент p применяется к содержанию нашего примера.

Листинг 9-2: Использование элемента p
<!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>
		I like apples and oranges.
	I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.
	</p>
	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
	<p>
		My favorite kind of orange is the mandarin, properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.
	</p>
	<p>
		The
		<abbr title="Florida Department of Citrus">FDOC</abbr>
		regulates the
	Florida citrus industry.
	</p>
	<p>
		I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
		on <time datetime="1984-12-7">December 7th</time>.
	</p>
</body>
</html>

Я добавил несколько элементов p в элемент body для группировки связанных предложений и придания содержанию некоторую структуру. Многочисленные пробелы в элементе p снова объединены в один, как вы можете видеть на рисунке 9-2.

Рисунок 9-2: Результат использования элемента p