HTML <template> 标签

• 

  <template>标签定义和用法

  <template>标记将其内容隐藏在客户端之外。
  <template>标记内的内容不会呈现。
  通过使用JavaScript，内容可以在以后显示和呈现。
  如果您想要反复使用一段HTML代码，请使用<template>标记。要在没有<template>标记的情况下执行此操作，您必须使用JavaScript动态的创建HTML代码。

• 

  <template>标签浏览器支持

  IE/Edge	Chrome	FireFox	Safari	Opera
  13.0（含）以上	26.0（含）以上	22.0（含）以上	9.0（含）以上	15.0（含）以上

• 

  HTML4.01和HTML5之间的差异

  <template>标记是HTML5中的新标记。

• 

  <template>标签实例

  template元素保存HTML代码而不显示它：

  <template>
    <h2>静物</h2>
    <img src="/jc_script/j1.jpg" width="158" height="225">
  </template>

  尝试一下

  使用JavaScript从模板中获取内容，并将其添加到页面中：

  <script>
  function showContent() {
    var temp = document.getElementsByTagName("template")[0];
    var clon = temp.content.cloneNode(true);
    document.body.appendChild(clon);
  }
  </script>

  尝试一下

  使用模板的内容为数组中的每个项目：

  <template>
    <div class="myClass">我喜欢: </div>
  </template>
  
  <script>
  var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
  
  function showContent() {
    var temp, item, a, i;
    //获取template元素：
    temp = document.getElementsByTagName("template")[0];
    //从template中获取DIV元素：
    item = temp.content.querySelector("div");
    //遍历数组:
    for (i = 0; i < myArr.length; i++) {
      //以template为基础，建立一个新节点:
      a = document.importNode(item, true);
      //从数组中叠加数据:
      a.textContent += myArr[i];
      //追加至新节点:
      document.body.appendChild(a);
    }
  }
  </script>

  尝试一下

  测试浏览器对模板元素的支持:

  <script>
  if (document.createElement("template").content) {
    document.write("您的浏览器支持template元素");
    /*为具有templateE支持的浏览器编写代码*/
  } else {
    document.write("您的浏览器不支持template元素");
    /*为没有template支持的浏览器编写替代代码*/
  }
  </script>

  尝试一下
• 

  <template>标签全局属性

  <template>标签还支持全局属性。

  查看有关全局属性的更多知识。

• 

  <template>标签相关页面

  HTML教程：HTML布局

• 

  <template>标签默认CSS设置

  没有。