HTML语义化HTML5新标签template.doc

HTML语义化：HTML5新标签——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标签不触发资源请求。 ? 下面是常用的存放方式： ? ? 1. script标签 // 模板文本 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(/^[\s\u3000]*|[\s\u3000]*$/, ) Hpile(tpl)({title: test}) /script ? ?注意： ? ? ?1. 若模板中包含/script标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含/script结束标签; ? ? ?2. script标签位置较随意，可以作为head或body的子元素。 　2. textarea标签 // 模板文本 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(/^[\s\u3000]*|[\s\u3000]*$/, ) Hpile(tpl)({title: test}) /script ? ? 注意： 　　1.?若模板中包含/textarea标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含/textarea结束标签； 　　2. textarea元素必须作为body的子孙元素。 ? ? 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(/^[\s\u3000]*|[\s\u3000]*$/, ) Hpile(tpl)({title: test}) /script ? ??注意： 　　1.?若模板中包含/xmp标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含/xmp结束标签； 　　2. xmp元素必须作为body的子孙元素。 ? 由于模板文本中出现script标签的情况较少，而出现表单元素textarea标签的几率较大，而xmp标签已被废弃，因此还是通过script标签存放模板文本的方式较为常见。 ? 三、template标签的新视觉　　　　　　　　　　　　　　　　　　　　　　 ? 2013年定