Руководство по 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>