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

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

Адам Фриман

Заключение: другие текстовые элементы

Есть четыре элемента, которые не вписываются ни в одну из описанных выше групп. Я расскажу о них в следующих разделах.

Обозначение общего отрывка текста

Элемент span сам по себе не несет никакой смысловой нагрузки. Мы используем его, чтобы применить один из глобальных атрибутов к определенной области содержания. В таблице 8-23 представлен элемент span.

Таблица 8-23: Элемент span
Элемент span
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям Нет

В листинге 8-23 показан элемент span, который используется с атрибутом class, таким образом, я могу применить к целевому контенту CSS стиль.

Листинг 8-23: Использование элемента span
<!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" />
		<style>
			.fruit {
				border: thin solid black;
				padding: 1px;
			}
		</style>
	</head>
	<body>
		I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>.
	</body>
</html>

На рисунке 8-21 показано, как применяется стиль.

Рисунок 8-21: Использование элемента span для целевого применения стиля

Подсветка текста

Элемент mark является новым в HTML5, и он представляет отрывок текста, который подсвечивается из-за своей значимости в другом контексте. В таблице 8-24 представлен элемент mark.

Таблица 8-24: Элемент mark
Элемент mark
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям mark { background-color: yellow; color: black; }

В листинге 8-24 представлен элемент mark.

Листинг 8-24: Использование элемента mark
<!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>
		Homophones are words which are pronounced the same, but have different spellings
		and meanings. For example:
		<p>
			I would like a <mark>pair</mark> of <mark>pears</mark>
		</p>
	</body>
</html>

На рисунке 8-22 показан стиль по умолчанию для этого элемента.

Рисунок 8-22: Использование элемента mark

Обозначение добавленного или удаленного контента

Можно обозначить текст, который был добавлен или удален из документа при помощи элементов ins и del. Элемент ins обозначает вставленное содержание. Этот элемент описан в таблице 8-25.

Таблица 8-25: Элемент ins
Элемент ins
Тип элемента Этот элемент считается фразовым, если он является дочерним для фразового элемента, и потоковым, если он является дочерним для потокового элемента
Разрешенные родительские элементы Любой элемент, который может содержать фразовый или потоковый контент
Локальные атрибуты cite, datetime
Содержание Фразовый или потоковый контент, в зависимости от типа родительского элемента
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям ins { text-decoration: underline; }

Можно обозначить контент, который был удален из документа, используя элемент del, описанный в таблице 8-26.

Таблица 8-26: Элемент del
Элемент del
Тип элемента Этот элемент считается фразовым, если он является дочерним для фразового элемента, и потоковым, если он является дочерним для потокового элемента
Разрешенные родительские элементы Любой элемент, который может содержать фразовый или потоковый контент
Локальные атрибуты cite, datetime
Содержание Фразовый или потоковый контент, в зависимости от типа родительского элемента
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям del { text-decoration: line-through; }

Элементы ins и del определяют одни и те же локальные атрибуты. Атрибут cite указывает на URL документа, который объясняет, почему текст был добавлен или удален, а атрибут datetime указывает на то, когда было сделано изменение. Вы можете увидеть использование элементов ins и del в листинге 8-25.

Листинг 8-25: Использование элементов ins и del
<!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>
		Homophones are words which are pronounced the same, but have different spellings
		and meanings. For example:
		<p>
			I would like a <mark>pair</mark> of <mark>pears</mark>
		</p>
		<p>
			<del>I can <mark>sea</mark> the <mark>see</mark></del>
			<ins>I can <mark>see</mark> the <mark>sea</mark></ins>
		</p>
	</body>
</html>

Стили по умолчанию показаны на рисунке 8-23.

Рисунок 8-23: Использование элементов ins и del

Обозначение времени и даты

Элемент time используется для определения времени или даты. В таблице 8-27 представлен элемент time.

Таблица 8-27: Элемент time
Элемент time
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты datetime, pubdate
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям Нет[/td] [/tr][/tbody][/table][/div]

Если присутствует булев атрибут pubdate, то считается, что элемент time является датой публикации всего HTML документа или ближайшего элемента article (я расскажу про элемент article в главе 10). Атрибут datetime указывает дату или время в формате, определенном RFC3339, который вы можете найти на http://tools.ietf.org/html/rfc3339. Использование атрибута datetime обозначает, что вы можете указать дату в формате, удобном для человеческого восприятия, внутри элемента, а также убедиться, что компьютер может однозначно и без проблем разобрать (отпарсить) дату или время. В листинге 8-26 показано использование элемента time.

Листинг 8-26: Использование элемента time
<!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>
		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>.
	</body>
</html>
или RSS канал: Что новенького на smarly.net