: элемент шаблона контента
HTML-элемент шаблона контента — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.
Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.
| Категории контента | Метаданные, основной поток, фразовый контент, элементы поддержки скриптов |
|---|---|
| Допустимый контент | Нет ограничений |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы, которые могут содержать метаданные, фразовый контент или элементы поддержки скриптов. Допускается вкладывать элемент в (en-US), у которого отсутствует атрибут span (en-US) . |
| Неявные ARIA-роли | Нет соответствующей роли |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLTemplateElement (en-US) |
Атрибуты
Элемент может иметь общие атрибуты.
Однако у HTMLTemplateElement (en-US) есть свойство content (en-US) , которое возвращает доступный только для чтения DocumentFragment , содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения content (en-US) может привести к непредсказуемому поведению, см. раздел ловушка DocumentFragment ниже.
Примеры
table id="producttable"> thead> tr> td>UPC_Codetd> td>Product_Nametd> tr> thead> tbody> tbody> table> template id="productrow"> tr> td class="record">td> td>td> tr> template>
Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.
Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.
// Убеждаемся, что браузер поддерживает тег , // проверив наличие атрибута content у элемента template. if ("content" in document.createElement("template")) // Находим элемент tbody таблицы // и шаблон строки var tbody = document.querySelector("tbody"); var template = document.querySelector("#productrow"); // Клонируем новую строку и вставляем её в таблицу var clone = template.content.cloneNode(true); var td = clone.querySelectorAll("td"); td[0].textContent = "1235646565"; td[1].textContent = "Stuff"; tbody.appendChild(clone); // Клонируем новую строку ещё раз и вставляем её в таблицу var clone2 = template.content.cloneNode(true); td = clone2.querySelectorAll("td"); td[0].textContent = "0384928528"; td[1].textContent = "Acme Kidney Beans 2"; tbody.appendChild(clone2); > else // Иной способ заполнить таблицу, потому что // HTML-элемент template не поддерживается. >
Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью JavaScript:
table background: #000; > table td background: #fff; >
Ловушка DocumentFragment
DocumentFragment не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.
Рассмотрим следующие HTML-разметку и JavaScript-код:
HTML
div id="container">div> template id="template"> div>Click mediv> template>
JavaScript
const container = document.getElementById("container"); const template = document.getElementById("template"); function clickHandler(event) event.target.append(" — Clicked this div"); > const firstClone = template.content.cloneNode(true); firstClone.addEventListener("click", clickHandler); container.appendChild(firstClone); const secondClone = template.content.firstElementChild.cloneNode(true); secondClone.addEventListener("click", clickHandler); container.appendChild(secondClone);
Результат
В переменной firstClone у нас экземпляр (клон) DocumentFragment , и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной secondClone у нас экземпляр (клон) HTMLDivElement , клик по которому работает как ожидается.
Спецификации
| Specification |
|---|
| HTML Standard # the-template-element |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Веб-компоненты: (и устаревший: )
- Использование шаблонов и слотов (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
Шаблон простого сайта на HTML
Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили. Например, такие, через awsm.css.
Сайт легко запустится у вас на компьютере по инструкции или откроется сразу в браузере.
Заголовок страницы Личный сайт
Который сделан на основе готового шаблона
Первая секция
Она обо мне
Но может быть и о семантике, я пока не решил.
Вторая секция
Она тоже обо мне
И третья
Вы уже должны были начать догадываться.
Короткий разбор
Если у вас есть немного времени, давайте посмотрим на код и поймем, из чего состоит сайт, и зачем нужна каждая строчка.
Доктайп помогает браузеру понять, как отображать страницу.
Называем кодировку страницы — для русского языка подходит utf-8 .
Дальше идёт магия, которая помогает нашему сайту выглядеть чуть лучше. Она просто нужна, можете пока не задумываться.
Подключаем файл со стилями — замените ./styles/style.css на имя вашего файла со стилями. Если ничего не работает или файл не видно, прочитайте про абсолютные и относительные ссылки.
В этом блоке напишите, какой заголовок, описание и ссылка будут видны на карточке в ленте, если ваш сайт кто-нибудь запостит в соцсетях.
Дальше идут и — заголовки первого и второго уровня.
Это мой сайт
Первая секция
Следом навигация. В шаблоне она сделана через верхнюю навигацию , в которой ссылки сделаны списком и завёрнуты в тег .
Одна из самых важных частей страницы — семантический тег , в нём хранится основное содержимое, которое относится только к этой странице и не повторяется на других.
Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.
Абзац текста — здесь пишем просто какой-то текст, который хотим показать на странице. Подробнее — в тренажёре.
Но может быть и о семантике, я пока не решил.
Если захотите подключить JavaScript и добавить интерактивные элементы, можете сделать это в этом блоке — достаточно его раскомментировать.
На этом всё, дорабатывайте шаблон по своему усмотрению.
Без чего ещё верстальщику никак:
- Шаблон HTML-формы
- Что нужно уметь верстальщику
- Как подготовить вёрстку к retina-экранам
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Создание шаблона в формате HTML
Шаблоны в формате HTML предоставляют больше возможностей в плане компоновки, использования шрифтов и изображений. Шаблоны, формирующие выходные данные в формате HTML, являются графическими; их файлы имеют расширение *.html.rpt .
При добавлении в HTML-шаблон изображений они должны находиться в папке ..\Program Files\Tekla Structures\\bin\applications\Tekla\Tools\TplEd\bitmaps . Изображения в других папках не отображаются в выходных HTML-данных.
- В меню Файл выберите Редакторы > Редактор шаблонов .
- В редакторе шаблонов нажмите Файл > Создать .
- Выберите Таблицы и нажмите ОК .
- Добавьте в шаблон новые строки.
- Чтобы добавить новую строку, выберите Вставить > Компонент > Строка .
- Выберите тип содержимого строки и нажмите ОК .
Откроется диалоговое окно Выбрать атрибут с предложением выбрать атрибут для поля значения.
- Выберите Вставить > Компонент > Верхний колонтитул…
- Выберите Вставить > Текст…
- Введите заголовок для шаблона и нажмите кнопку ОК .
- Укажите точку для определения положения заголовка в строке верхнего колонтитула.
Имя файла должно содержать расширение *.html.rpt , например Part_list.html.rpt .
Пример
- Верхний колонтитул, содержащий текстовые поля
- Строка, содержащая два поля значений
Как сделать шаблон для сайта?
Самостоятельно создать шаблон для сайта смогут те пользователи, кто знает HTML и CSS. Для того, чтобы сделать шаблон нужно:
1. Определить тему.
2. Выбрать цветовую схему.
3. Выбрать тип навигационной панели.
4. Продумать макет всех страниц.
5. Создать главную страницу в HTML.
6. Создать в CSS таблицу стилей.
7. Продублировать уже имеющуюся HTML страницу.
8. Сверстать макет.
Как сделать шаблон для сайта — пошаговое руководство.
1.Определите тему вашего будущего сайта.
Есть несколько десятков различных видов сайтов, которые можно создать, сделав шаблон самостоятельно.
2. Подберите правильную цветовую схему.
Попробуйте использовать яркие и кричащие цвета, например, синий, фиолетовый или оранжевый. Вы сами можете подобрать цветовую гамму для шаблона, учитывая тематику будущего сайта или оформление своего бренда.
3. Выберите, какую навигационную панель вы хотите использовать. Удостоверьтесь, что она имеет все основные страницы, обязательные для любого сайта. К примеру, главная страница, отзывы, контакты и т.п.
4. Продумайте макет всех будущих страниц сайта.
Определите, какой контент, изображения и функционал вам будет нужен для каждой из них.
5. Создайте главную страницу в HTML.
Вы также можете создать ее, используя конструктор сайтов Google.
6. Создайте таблицу стилей в CSS.
7. Продублируйте уже имеющуюся страницу HTML для других страниц и добавьте необходимый контент на каждую из них.
Ну а далее уже дело техники. Остается сверстать все созданные страницы в единый макет или шаблон, на основе которого можно запустить сайт.