一、HTML5 template元素初面

 

　　元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是“模板元素”。

 

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

 

　　实际上，并不存在type="text/template"这样的标准写法，元素的出现旨在让HTML模板HTML变得更加标准与规范。

 

　　以前，我们可能还使用过或者（废止但依然可用）嵌套非转义的HTML标签代码，实现一些特定的前端功能，但，同样的，跟上面的流行用法一样，都是不规范的。从未来趋势来讲，显然标签才是王道。但是，兼容性是个不可忽略的问题，因此，就算扯得很多很少，实际价值有有限，因此，这里仅仅简单介绍下。

 

　　二、HTML5 template元素复面

 

　　看下下面四种嵌套图片HTML，同时图片内容不显示，不会有请求的写法：

 

　　1. 标签内容隐藏性

 

　　这个很讨厌的。

 

　　为文本域，里面嵌套的HTML片段会被当做文本域的值。但，文本域本身是可见的，因此需要额外的设置display: none;

 

　　是个很老很特殊的属性，语义为example，示例。据说后来被标签取代而废止，实际上，目前，所有的浏览器都是支持的。但是，其跟标签不能划等号。里面有个标签，显示的则是一张图片，而呈现的就是一段HTML代码。不过，与一样，内容不显示的话，还需要额外的设置display: none;

 

　　上面这个标签上没有设置display: none;，注意到了没有。为何？这只是发挥了标签元素的原本特性，天生display:none，同时模板元素内部内容是死活不会呈现的。因此，无需设置隐藏。这就是HTML5 标签元素特征之一：标签内容隐藏性。

 

　　2. 标签位置任意性

 

　　除了上面子元素天然隐藏外，标签还有一个特性，就是位置任意性，这非常类似