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

Полный список тегов HTML

HTML: <template> тег

Элемент содержимого HTML (template) используется для сохранения механизма клиентского контента, который не отображается при загрузке страницы, но может быть инстанцирован с помощью JavaScript в runtime. Смотрите шаблон как на фрагмент контента, который можно хранить в документе для последующего использования. Хотя процессор действительно обрабатывает содержимое элемента <template> при загрузке страницы, это делается только для обеспечения его правильности; содержимое элемента не будет рендериться.

Онлайн примеры

Пример использования тега template:

Пример

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Использование тега HTML template (Основной учебник网 oldtoolbag.com)</title>
</head>
<body>
<p>Содержимое тега шаблона скрыто от клиента.</p>
<template>
　　<h2>Видовые шаблоны</h2>
　　<img src="views.png">
</template>
<p>Следующий пример покажет, как использовать JavaScript для отображения содержимого шаблона.</p>
</body>
</html>

Проверьте, посмотрите <‹/›>

Совместимость с браузерами

IEFirefoxOperaChromeSafari

Все основные браузеры поддерживают тег <template>.

Определение и использование

Тег <template> скрывает его содержимое от клиента.

Содержимое тега <template> не будет отображаться.

В будущем вы можете использовать JavaScript для отображения и представления контента.

Если вам нужно многократно использовать код HTML, используйте тег <template>, но используйте его только когда это необходимо. Чтобы выполнить это без тега <template>, вам нужно использовать JavaScript для создания HTML-кода, чтобы предотвратить его отображение браузером.

Более подробные примеры онлайн

Пример

<!DOCTYPE html>
<html>
<body>
<h1>Использование тега HTML template (Основной учебник网 oldtoolbag.com)</h1>
<p>Нажмите на кнопку, чтобы получить контент из шаблона и отобразить его на веб-странице.</p>
<button onclick="showContent()">Показать контент</button>
<template>
　　<h2>views</h2>
　　<img src="views.png" width="300" height="204">
</template>
<script>
function showContent() {
　　var temp = document.getElementsByTagName("template")[0];
　　var clon = temp.content.cloneNode(true);
　　document.body.appendChild(clon);
}
</script>
</body>
</html>

Проверьте, посмотрите <‹/›>

Различия между HTML 4.01 и HTML5

Тег <template> является новым тегом в HTML5.

Глобальные свойства

Поддержка тега <template> Глобальные свойства HTML.

Событийные свойства

Поддержка тега <template> Событийные свойства HTML.

HTML: <wbr> тег