html5中template用法,html5标签

　　html5中template用法,html5标签

　　一、HTML5 template元素初面

　　模板元素，基本上可以确定是2013年才出现的。你为什么用它？它用于声明它是一个“模板元素”。

　　目前我们在HTML中嵌入模板HTML，往往是这样写的：

　　XML/HTML代码将内容复制到剪贴板脚本类型=text/template/./script其实并没有type= text/template 这种标准写法。模板元素的出现旨在让HTML模板HTML更加规范和标准。

　　在过去，我们可能会使用textarea或xmp(已废除但仍可用)来嵌套未转义的HTML标记代码，以实现一些特定的前端功能，但同样，和上面流行的用法一样，它们都是非标准的。从未来趋势来看，很明显模板标签才是王道。但是，兼容性是一个不容忽视的问题。所以即使说得多或说得少，实际价值也是有限的。所以这里只简单介绍一下。二、HTML5 template元素复面

　　看下面四种嵌套图片HTML。同时，不显示图片内容，也不会出现请求写入：

　　XML/HTML代码将内容复制到剪贴板script type= text/template img src= mm1 . jpg /scripttextareastyle= display:none；img src= mm1 . jpg /textarea xmp style= display:none；imgsrc=mm1.jpg /xmp模板img src= mm1 . jpg /模板1. 标签内容隐藏性

　　脚本本身是特定的，所以内部的HTML标签是根据字符串处理的。因此，不显示自然内容。但是在DreamWeaver中，这种编写方式有一个很大的问题，就是当模板HTML用脚本编写时，标签总是会被/script自动关闭，非常烦人。

　　Textarea是一个文本字段，嵌入的HTML片段将作为文本字段的值。但是，文本字段本身是可见的，因此会显示一个附加设置：不需要任何设置；

　　Xmp是一个非常古老而特殊的属性，它的语义是example。据说后来被pre标签取代，废除了。其实目前所有浏览器都支持。但是，它不能等同于前置标签。pre中有一个img标签，显示的是一张图片，而xmp显示的是一段HTML代码。但是和textarea一样，如果不显示内容，会显示一个附加设置：不需要；

　　显示：上面的模板标签上没有设置none你注意到了吗？为什么？这正好发挥了模板标签元素原有的特性，自然是display:none，反正模板元素的内部内容是不会呈现的。因此，不需要设置隐藏。这就是HTML5模板标签元素的特点之一：标签内容隐藏。

　　2. 标签位置任意性除了上述模板子元素的自然隐藏之外，模板标签还有一个特点，就是位置任意，和脚本或者样式标签很像，可以在头、体或者框架集中。

　　3. childNodes无效性虽然肉眼看起来像模板标签，里面有很多子标签，但是这种惯性思维在这里并没有用。假设变量template是我们得到的一个模板标签DOM(里面有很多HTML代码)，你会发现那个template.childNodes是一个空屁。我们可以使用template.innerHTML来获取完整的HTML片段。如果非要得到“伪子元素”。还有一个办法，好吧，睁大眼睛，用内容属性。

　　Template.content将返回一个文档片段，您可以将其理解为另一个文档。然后，使用文档下的一些查询API，可以得到模板标签中的“伪子元素”。例如，获取第一个图片元素是：

　　代码将内容复制到剪贴板var image _ first=template . content . query selector( img )；三、HTML5 template元素终面

　　可以点击这里：HTML5 template模板元素体验演示。

　　模板元素与CSS如果浏览器对泰山视而不见，认为template是普通的自定义元素，那么显示会是这个样子，内部标签按照通用标签渲染。

　　如果浏览器与时俱进，显示会如下：会渲染自己的CSS，内部标签不会直接渲染在不同的空间，比如Chrome:

　　也就是说，虽然从CSS的角度来看，template是一个接近CSS的常见元素，但是从HTML的角度来看，它就像一个带土的sharingan，可以让内部标签移动到不同的空间，就像血缘边界一样稀有。

　　默认情况下，模板是隐藏的。实际上，它的display属性默认为none。使用以下代码找出答案：

　　window.getComputedStyle(模板)。展示；//结果是“无”

　　因此，在demo中设置了以下CSS声明：

　　代码将内容复制到剪贴板模板{ display:block；}模板的克隆如果你处理的是HTML字符串，类似于现在流行的MVC框架或者模板技术，那么template.innerHTML就足够了。但是，模板比脚本更强大，因为脚本的内部内容只能作为字符串获取。虽然模板存在于不同的空间，但仍然可以从节点中获取(如上图)并完全克隆。语法类似于以下内容：

　　代码将内容复制到剪贴板var clOne=document . import node(template . content，true)；然后，您可以使用append node (appendChild)来加载模板内容，而不是(没有选择)append string来加载模板内容。题目是“引言”。所以知道有这么个东西就好了，具体例子也没有(有兴趣可以参考文末的参考文章)。四、HTML5 template面试小结

　　至此，对模板元素的行为、性能和一些方法已经基本有了一个大概的了解。如果这是面试，我还是对模板评价很高的。特殊场景下使用的特殊工具和一些类似“异空间”的设计也让人大开眼界。这个元素比hgroup这样的HTML5元素更受欢迎，更受关注，也更有潜力。

　　最后放兼容表的时候，IE浏览器拖了后腿，但是我说我很淡定，因为我已经对IE麻木了！

　　兼容性