详解HTML5中的<template>标签
一、HTML5 template元素初面

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

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

事实上,并不存在type="text/template"这样的标准写法,元素的浮现旨在让HTML模板HTML变得越发标准与规范。

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


二、HTML5 template元素复面

看下下面四种嵌套HTML,同时内容不显示,不会有哀求的写法:

1. 标签内容躲藏性
政府html5模板
这个很厌烦的。

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

是个很老很特别的属性,语义为example,示例。据说后来被标签取代而废止,事实上,目前,全部的扫瞄器都是支持的。但是,其跟标签不能划等号。里面有个标签,显示的则是一张,而展现的就是一段HTML代码。不过,与一样,内容不显示的话,还需要额外的设置dis
play: none;

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

2. 标签位置随意性

除了上面子元素自然 躲藏外,标签还有一个特性,就是位置随意性,这十分类似