Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <template>



Пример

Используйте <template> для хранения некоторого содержимого, которое будет скрыто при загрузке страницы. Используйте JavaScript для его отображения:

<button onclick="showContent()">Показать скрытый контент</button>

<template>
  <h2>Цветок</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>
Попробуйте сами »


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

Тег <template> используется в качестве контейнера для хранения некоторого HTML контента, скрытого от пользователя при загрузке страницы.

Содержимое внутри <template> визуализируется позже с помощью JavaScript.

Вы можете использовать тег <template>, если у вас есть какой-то HTML код, который вы хотите использовать снова и снова, но не раньше, чем вы попросите об этом. Сделать это без тега <template>, вы должны создать HTML код с помощью JavaScript, чтобы предотвратить визуализацию кода браузером.


Поддержка браузеров <template>

Элемент
<template> 26.0 13.0 22.0 8.0 15.0

Глобальные атрибуты <template>

Тег <template> поддерживает Глобальные атрибуты в HTML.


Еще примеры <template>

Пример

Заполните веб страницу одним новым элементом div для каждого элемента в массиве. HTML код каждого элемента div находится внутри элемента <template>:

<template>
  <div class="myClass">Мне нравится: </div>
</template>

<script>
var myArr = ["Ауди", "БМВ", "Форд", "Хонда", "Ягуар", "Ниссан"];
function showContent() {
  var temp, item, a, i;
  temp = document.getElementsByTagName("template")[0];
  item = temp.content.querySelector("div");
  for (i = 0; i < myArr.length; i++) {
    a = document.importNode(item, true);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>
Попробуйте сами »
Пример

Проверьте поддержку браузера для <template>:

<script>
if (document.createElement("template").content) {
  document.write("Ваш браузер поддерживает шаблон!");
} else {
  document.write("Ваш браузер не поддерживает шаблон!");
}
</script>
Попробуйте сами »