一次偶然的机会看到知乎的网站的源码里面有个标签是script type="text/template"
然后我在网上查了资料了：
当我们使用String-base的模板引擎（如Handlebars.js等）时，要么就通过外部文件存放模板文本，需要时再通过XHR或script标签加载进来；要么通过<script type="text/x-template"></script>等标签直接写在当前页面上。现在HTML5为我们提供了一个全新的template标签，以更统一、有效的方式存放String-base模板引擎的模板文本了！
二、那些年我们存放模板文本的方式
1. script标签
2. textarea标签
3. xmp标签
三、template标签的新视觉
1. 不一样的childNodes
2. 伪文档片段入口——content属性
二、那些年我们存放模板文本的方式
首先要明确模板文档具有以下2个要求：
1. <> "' 不被转成字符实体；
2. 含src特性的img标签不触发资源请求。
下面是常用的存放方式：
// 模板文本 <script id="tpl" type="text/x-template"> <img src="dummy.png" title="{{title}}"/> </script> // 获取模板 <script type="text/javascript"> // 不能通过innerText获取，因为innerText无法获取<img/>等标签字符 var tpl = document.getElementById('tpl').innerHTML tpl = tpl.replace(/^[su3000]*|[su3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
注意：
1. 若模板中包含</script>标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含</script>结束标签;
2. script标签位置较随意，可以作为head或body的子元素。
// 模板文本 <textarea id="tpl" style="display:none;"> <img src="dummy.png" title="{{title}}"/> </textarea> // 获取模板 <script type="text/javascript"> var tplEl = document.getElementById('tpl') var tpl = tplEl.value // 通过tplEl.innerText获取也可以。但不能通过tplEl.innerHTML获取，因为它会对<>"'等转换为字符实体 tpl = tpl.replace(/^[su3000]*|[su3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
3. xmp标签（语义为标识内容用作示例，现已被标准废除了，但各大浏览器依然支持该标签）
// 模板文本 <xmp id="tpl" style="display:none;"> <img src="dummy.png" title="{{title}}"/> </xmp> // 获取模板 <script type="text/javascript"> var tplEl = document.getElementById('tpl') var tpl = tplEl.innerHTML // 通过tplEl.innerText获取也可以 tpl = tpl.replace(/^[su3000]*|[su3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
注意：
1. 若模板中包含</xmp>标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含</xmp>结束标签；
2. xmp元素必须作为body的子孙元素。
由于模板文本中出现<script>标签的情况较少，而出现表单元素<textarea>标签的几率较大，而xmp标签已被废弃，因此还是通过script标签存放模板文本的方式较为常见。
三、template标签的新视觉
2013年定稿的template标签为我们提供一种更统一、功能更强大的模板文本存放方式。而它基本的使用方式与之前的3种方式无太大差别：
// 模板文本 <template id="tpl"> <img src="dummy.png" title="{{title}}"/> </template> // 获取模板 <script type="text/javascript"> var tplEl = document.getElementById('tpl') // 通过tplEl.innerText获取也可以 var tpl = tplEl.innerHTML tpl = tpl.replace(/^[su3000]*|[su3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
注意：
1. 若模板中包含</template>标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含</template>结束标签;
2. script标签位置较随意，可以作为head或body的子元素。
到这里大家会觉得template标签除了作为W3C标准外，跟script标签没多大的差别。那是因为我们还没对其深入而已啦，下面我们将对其一一了解吧！
script、textarea和xmp方式存放模板文本时，通过 tplEl.childNodes.length 均返回1， tplEl.childNodes[0].nodeName 均返回#text。而template返回的是0。
通过innerHTML或innerText属性，template内部的模板文本将被视为普通文本来使用。但template元素为我们提供了另一种使用方式，那就是“伪文档片段”。
“伪文档片段”的[[Class]]为[object DocumentFragment]，“伪文档片段”具有文档片段的所有功能API，不同的是设置img元素的src属性不会发出资源请求。而我们可以通过content属性获取“伪文档片段”。
var tplEl = document.getElementById('tpl') var x = tplEl.content var img = x.querySelector('img') console.log(img.src) // 显示空字符串 console.log(img.getAttribute('src')) // 显示dummy.png img.src = img.getAttribute('src') console.log(img.src) // 显示about:blank
document.body.appendChild(img) // 发起资源请求 console.log(tplEl.innerHTML.replace(/^[su3000]*|[su3000]*$/,'')) // 显示空白字符串
由于appendChild方法实际上会对元素进行剪切操作，因此无法实现模板复用的效果。因此我们需要复制模板内的元素，然后再将元素副本添加到当前文档中。实现手段有很多种，大家可以自行了解一下。
至此，<template>元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对<template>的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比<hgroup>之类的HTML5元素更受欢迎更受关注也更有潜力。
临近最后，放上兼容性表，IE13+开始支持，但依然拖了好大的后腿，不过有些项目只需要兼容webkit内核浏览器，倒是可以一试！
兼容性
四、总结
本篇为拜读张鑫旭《HTML5 <template>标签元素简介》后的笔记+个人经验总结，就写到这里吧！
尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4175711.html ^_^肥子John