一、前言
当我们使用String-base的模板引擎（如Handlebars.js等）时，要么就通过外部文件存放模板文本，需要时再通过XHR或script标签加载进来；要么通过<script type="text/x-template"></script>等标签直接写在当前页面上。现在HTML5为我们提供了一个全新的template标签，以更统一、有效的方式存放String-base模板引擎的模板文本了！
目录一坨：
首先要明确模板文档具有以下2个要求：
1. <> "' 不被转成字符实体；
2. 含src特性的img标签不触发资源请求。
下面是常用的存放方式：
注意：
1. 若模板中包含</script>标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含</script>结束标签;
2. script标签位置较随意，可以作为head或body的子元素。
注意：
1. 若模板中包含</textarea>标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含</textarea>结束标签；
2. textarea元素必须作为body的子孙元素。
注意：
1. 若模板中包含</xmp>标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含</xmp>结束标签；
2. xmp元素必须作为body的子孙元素。
由于模板文本中出现<script>标签的情况较少，而出现表单元素<textarea>标签的几率较大，而xmp标签已被废弃，因此还是通过script标签存放模板文本的方式较为常见。
2013年定稿的template标签为我们提供一种更统一、功能更强大的模板文本存放方式。而它基本的使用方式与之前的3种方式无太大差别：
1. 若模板中包含</template>标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含</template>结束标签;
到这里大家会觉得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属性不会发出资源请求、不执行Script和CSS规则，而[object HTMLDocument]“文档”则会发送img请求并在当前browsing context(即window对象上下文)内执行Script和CSS规则。
而我们可以通过content属性获取“文档片段”。
当添加到当前文档中才会发起资源请求。
由于appendChild方法实际上会对元素进行剪切操作，因此无法实现模板复用的效果。因此我们需要复制模板内的元素，然后再将元素副本添加到当前文档中。实现手段有很多种，大家可以自行了解一下。
那么怎样将整个template提供的DocumentFragment导出到当前document呢？答案就是采用IE9+才有的document.importNode方法了。
四、总结
五、参考
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！
<a href="http://home.cnblogs.com/u/fsjohnhuang/">^_^肥仔John</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followees">关注 - 85</a>
<a href="http://home.cnblogs.com/u/fsjohnhuang/followers">粉丝 - 707</a>
<a>+加关注</a>
5
1
<a></a>
评论列表
讲的很好，忍不住留个脚印。
http://pic.cnblogs.com/face/274849/20130911125125.png
<a href="http://www.ucancode.com/index.htm" target="_blank">【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018！</a>
<a href="https://cloud.tencent.com/developer/support-plan?fromSource=gwzcw.710852.710852.710852" target="_blank">【推荐】加入腾讯云自媒体扶持计划，免费领取域名&服务器</a>
<b>最新IT新闻</b>:
<b>最新知识库文章</b>:
<a href="https://github.com/fsjohnhuang" target="_blank">肥仔John@github</a>
作品：