Detailed introduction of tag in HTML5 (picture and text)

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

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

1. <script type="text/template">
   // ...   
   </script>

In fact, type= does not exist The standard writing method of "text/template" and the appearance of the

Before, we may have used or <xmp> (obsolete but still available) to nest unescaped <a href="http://www.php.cn/code/427.html" target="_blank">HTML tags</a> 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 <template> 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. <br><strong>2. HTML5 template element overlay</strong></template></xmp>

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:

<script type="text/template">
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="Detailed introduction of  tag in HTML5 (picture and text)" >
</script>
<textarea style="display: none;">
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="Detailed introduction of  tag in HTML5 (picture and text)" >
</textarea>
<xmp style="display: none;">
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="Detailed introduction of  tag in HTML5 (picture and text)" >
</xmp>
<template>
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="Detailed introduction of  tag in HTML5 (picture and text)" >
</template>

1. Tag content hiding property

The specificity of <script> itself means that the internal HTML tags are processed according to the <a href="http://www.php.cn/wiki/57.html" target="_blank">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 </script>, which is very annoying.
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;<br> <xmp> is a very old and special <a href="http://www.php.cn/wiki/169.html" target="_blank"> attribute</a>, with the semantics of example. It is said that it was later replaced and abolished by the <pre class="brush:php;toolbar:false"> tag. In fact, currently, all browsers support it. However, it cannot be equated with the <pre class="brush:php;toolbar:false"> tag. There is an <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201506/2015619175843048.png?2015519175852?x-oss-process=image/resize,p_40" class="lazy" alt="Detailed introduction of tag in HTML5 (picture and text)" > tag inside <pre class="brush:php;toolbar:false">, which displays an image, while <xmp> displays a piece of HTML code. However, like <textarea>, if the content is not displayed, additional settings display: none;<br> are not set on the <template> tag above. Did you notice that display: none; is not set. Why? This just takes advantage of the original characteristics of the <template> 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 <template> tag element: the hidden content of the tag.</template></template></template></textarea></xmp></pre></pre></pre></xmp>

2. The arbitrary position of the tag
In addition to the natural hiding of the

3. Invalidity of childNodes
Although it seems to the naked eye that there are many sub-tags in the

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

CSS CodeCopy 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

如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如Chrome:

也就是说，虽然从CSS的角度看，

默认情况下，

window.getComputedStyle(template).display;    // 结果是"none"

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

CSS Code复制内容到剪贴板

template { display: block; ... }

模板的克隆


1. 如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，

CSS Code复制内容到剪贴板

var clone = document.importNode(template.content, true);

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

四、HTML5 template面试小结

至此，

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

兼容性

The above is the detailed content of Detailed introduction of tag in HTML5 (picture and text). For more information, please follow other related articles on the PHP Chinese website!