Autor publikacji
Virtual Patriot - Administrator

template

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu template

Element template reprezentuje fragment kodu HTML, który może zostać sklonowany, a następnie umieszczony w zawartości danego dokumentu HTML przez skrypt (domyślnie skrypt języka programowania JavaScript).

Dodatkowe artykuły związane z elementem template

brak

Informacje techniczne o elemencie template

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst metadata

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Darmowy Kurs HTML</title>
    
        <template id="szablon-1">
          <ins>
            <iframe src="dynamiczna-statystyka-01.html"></iframe>
          </ins>
        </template>
    
        <script src="skrypt-01.js"></script>
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
      </body>
    </html>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "head". Wspomniany element "head" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst metadata, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

  • element HTML, który tworzy wewnętrzny kontekst frazowany

    Przykładowy Kod HTML

    <article>
      <h1>Mój ulubiony owoc</h1>
    
      <p>
        Moim ulubionym owocem jest czereśnia.
    
        <template id="szablon-1">
          <ins>
            <iframe src="dynamiczna-statystyka-01.html"></iframe>
          </ins>
        </template>
    
        <script src="skrypt-01.js"></script>
      </p>
    </article>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "p". Wspomniany element "p" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "p", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

  • element HTML, który tworzy wewnętrzny kontekst skryptowy

    Przykładowy Kod HTML

    <article>
      <h1>Mój ulubiony owoc</h1>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    
      <template id="szablon-1">
        <ins>
          <iframe src="dynamiczna-statystyka-01.html"></iframe>
        </ins>
      </template>
    
      <script src="skrypt-01.js"></script>
    </article>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "article". Wspomniany element "article" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst skryptowy, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "article", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

  • jako element dziecko elementu colgroup, lecz tylko wtedy gdy dany element colgroup nie posiada atrybutu span

    Przykładowy Kod HTML

    <table>
      <caption>Ilość przedmiotów w magazynie</caption>
    
      <colgroup>
        <col class="styl-1">
        <col class="styl-2">
    
        <template id="szablon-1">
          <col span="2" class="styl-3">
        </template>
      </colgroup>
    
      <script src="skrypt-01.js"></script>
    
      <thead>
        <tr>
          <th>przedmiot</th>
          <th>ilość</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <th>szafa</th>
          <td>10</td>
        </tr>
    
        <tr>
          <th>stół</th>
          <td>5</td>
        </tr>
      </tbody>
    
      <tfoot>
        <tr>
          <th>suma</th>
          <td>15</td>
        </tr>
      </tfoot>
    </table>

    Kontekstem zewnętrznym przykładowego elementu "template" jest element "colgroup", dla którego wspomniany element "template" jest elementem dzieckiem. Ponadto wspomniany element "colgroup" nie posiada atrybutu "span", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "colgroup", jest prawidłowym kontekstem zewnętrznym dla elementu "template".

kontekst wewnętrzny

bez ograniczeń

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>

    <template id="szablon-1">
      <style>body { background-color:blue; }</style>
      <ins>
        <iframe src="dynamiczna-statystyka-01.html"></iframe>
      </ins>
      <li>
        <a href="#rozdzial-dodatkowy">Rozdział Dodatkowy</a>
      </li>
    </template>

    <script src="skrypt-01.js"></script>
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
  </body>
</html>

Kontekstem wewnętrznym przykładowego elementu "template" są różne elementy HTML, które nie są zabronionym kontekstem wewnętrznym elementu "template", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "style", element "ins" oraz element "li", jest prawidłowym kontekstem wewnętrznym dla elementu "template".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<template> ... </template>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display
  • none (jeżeli przeglądarka internetowa interpretuje element template)

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu template)

Przypuszczalnie domyślne reguły CSS elementu template

/* jeżeli przeglądarka internetowa interpretuje element "template" */
template {
  display:none;
}

Interpretacja elementu template

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji elementu .