Detailed introduction of <template> tag in HTML5 (picture and text)-H5 Tutorial-php.cn

This article mainly introduces the template tag in HTML5 , which is an important knowledge for getting started with HTML5. Friends who need it can refer to

1. HTML5 template element preliminary The face

d477f9ce7bf77f53fbcf36bec1b69b7a element can basically be determined to have only appeared in 2013. What is it used for? As the name implies, it is used to declare that it is a "template element".

Currently, we embed template HTML in HTML, which is often written like this:

// ... In fact, type= does not exist The standard writing method of "text/template" and the appearance of the d477f9ce7bf77f53fbcf36bec1b69b7a element are intended to make HTML template HTML more standard and standardized.

Before, we may have used 4750256ae76b6b9d804861d8f69e79d3 or 43e1fc467495bab219a3286f74139f6a (obsolete but still available) to nest unescaped HTML tags code to implement some specific front-end functions , but, again, just like the popular usage above, they are all irregular. In terms of future trends, it is obvious that the d477f9ce7bf77f53fbcf36bec1b69b7a tag is the way to go. However, compatibility is an issue that cannot be ignored. Therefore, even if there is a lot of talk, the actual value is limited, so here is just a brief introduction. 2. HTML5 template element overlay

Look at the following four nested image HTMLs. At the same time, the image content is not displayed and there is no request for writing:

1. Tag content hiding property

The specificity of 3f1c4e4b6b16bbbd69b2ee476dc4f83a itself means that the internal HTML tags are processed according to the string , so the generated content Do not show. However, in DreamWeaver, this writing method has a big problem, that is, when writing template HTML in script, the tag automatically closed is always 2cacc6d41bbb37262a98f745aa00fbf0, which is very annoying. 4750256ae76b6b9d804861d8f69e79d3 is a text area, and the HTML fragment nested inside will be used as the value of the text area. However, the text field itself is visible, so additional settings display: none; 43e1fc467495bab219a3286f74139f6a is a very old and special attribute , with the semantics of example. It is said that it was later replaced and abolished by the e03b848252eb9375d56be284e690e873 tag. In fact, currently, all browsers support it. However, it cannot be equated with the e03b848252eb9375d56be284e690e873 tag. There is an a1f02c36ba31691bcfe87b2722de723b tag inside e03b848252eb9375d56be284e690e873, which displays an image, while 43e1fc467495bab219a3286f74139f6a displays a piece of HTML code. However, like 4750256ae76b6b9d804861d8f69e79d3, if the content is not displayed, additional settings display: none; are not set on the d477f9ce7bf77f53fbcf36bec1b69b7a tag above. Did you notice that display: none; is not set. Why? This just takes advantage of the original characteristics of the d477f9ce7bf77f53fbcf36bec1b69b7a tag element, which is generated with display:none. At the same time, the internal content of the template element will not be displayed. Therefore, there is no need to set up hiding. This is one of the characteristics of the HTML5 d477f9ce7bf77f53fbcf36bec1b69b7a tag element: the hidden content of the tag.

2. The arbitrary position of the tag In addition to the natural hiding of the d477f9ce7bf77f53fbcf36bec1b69b7a sub-elements above , the d477f9ce7bf77f53fbcf36bec1b69b7a tag also has a feature, which is the arbitrary position. This is very similar to the 3f1c4e4b6b16bbbd69b2ee476dc4f83a or c9ccee2e6ea535a969eb3f532ad9fe89 tag, which can be in 8cea2e99ba256aa9b779f5ab5949ca21 or in 1d6e7d87652dd104f173dbf7284e2799 or f900b4fc197b16ab214eecf015bb6bd2.

3. Invalidity of childNodes Although it seems to the naked eye that there are many sub-tags in the d477f9ce7bf77f53fbcf36bec1b69b7a tag, this kind of inertial thinking is not applicable here. Assume that the variable template is a d477f9ce7bf77f53fbcf36bec1b69b7a tag DOM we obtained (a lot of HTML code in it), you will find: template.childNodes is empty. We can use template.innerHTML to get the complete HTML fragment. If you have to get "pseudo child elements". There is a way, OK, keep your eyes open and use the content attribute.

template.content will return a document fragment, which you can understand as another document. Then, you can use some query APIs under the document to obtain the "pseudo child elements" in the d477f9ce7bf77f53fbcf36bec1b69b7a tag. For example, to obtain the first image element is:

CSS Code Copy content to clipboard

var image_first = template.content.querySelector("img"); 3. HTML5 template Element end page You can click here: HTML5 template template element experience demo

Template element and CSS If you browse If you think that d477f9ce7bf77f53fbcf36bec1b69b7a is just an ordinary custom element, it will be displayed as follows, and the internal tags will be rendered according to ordinary tags.

如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如 Chr ome: tag in HTML5 (picture and text)" >

也就是说，虽然从CSS的角度看，d477f9ce7bf77f53fbcf36bec1b69b7a就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。

默认情况下，d477f9ce7bf77f53fbcf36bec1b69b7a是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：

window.getComputedStyle(template).display; // 结果是"none" tag in HTML5 (picture and text)" >

因此，demo中才设置了如下的CSS声明：

CSS Code 复制内容到剪贴板

template { display: block; ... } 模板的克隆 如果你是在HTML字符串上处理，类似于现在流行的 MVC 框架 或 模板技术 ，则template.innerHTML足矣。然，d477f9ce7bf77f53fbcf36bec1b69b7a比3f1c4e4b6b16bbbd69b2ee476dc4f83a强大之处在于，3f1c4e4b6b16bbbd69b2ee476dc4f83a内部内容只能当做字符串来获取，而d477f9ce7bf77f53fbcf36bec1b69b7a虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：

CSS Code 复制内容到剪贴板

var clone = document.importNode(template.content, true); 然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。

四、HTML5 template面试小结 至此，d477f9ce7bf77f53fbcf36bec1b69b7a元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对d477f9ce7bf77f53fbcf36bec1b69b7a的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比d8eccd9ed644b68a6460a2bb84548c82之类的HTML5元素更受欢迎更受关注也更有潜力。

临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！

兼容性 tag in HTML5 (picture and text)" >

Related articles