Detailed explanation of the tag in HTML5_html5 tutorial skills

1. First look at HTML5 template elements

The

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

XML/HTML CodeCopy content to clipboard

1. script type="text/template"> 
2. // ...
3. script>

In fact, there is no standard way of writing type="text/template". The appearance of the

In the past, we may have used or <xmp> (obsolete but still available) to nest unescaped HTML tag codes to achieve some specific front-end functions, but, again, the same as above Popular usage is the same, both are 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 duplication</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:

XML/HTML CodeCopy content to clipboard

1. script type="text/template">  
2. img src="mm1.jpg">  
3. script>  
4.   
5. textarea style="display: none;">  
6. img src="mm1.jpg">  
7. textarea>  
8.   
9. xmp style="display: none;">  
10. img src="mm1.jpg">  
11. xmp>  
12.   
13. template>  
14. img src="mm1.jpg">  
15. template>  

1. Hiddenness of tag content

The specificity of <script> allows internal HTML tags to be processed as strings, so the generated content is not displayed. 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 are required. display: none;<br> <xmp> is a very old and special attribute 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 explanation of the tag in HTML5_html5 tutorial skills" > 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 required. Display: none; is not set on the <template> tag above. Did you notice? Why? This just takes advantage of the original characteristics of the <template> tag element, which is born 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: tag content hiding.</template></template></template></textarea></xmp></pre></pre></pre></xmp>

2. Tag position arbitrariness
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 sub-elements" in the

CSS CodeCopy content to clipboard

1. var image_first = template.content.querySelector("img");

3. HTML5 template element final page

You can click here: HTML5 template element experience demo

Template elements and CSS
If the browser is blind and thinks that

If the browser keeps pace with the times, the display will be as follows, with its own CSS rendering, and the internal tags will be directly rendered in different spaces, such as Chrome:

In other words, although from the perspective of CSS,

By default,

window.getComputedStyle(template).display; // The result is "none"

Therefore, the following CSS statement is set in the demo:

CSS CodeCopy content to clipboard

1. template { display: block; ... }

Clone of template
If you are dealing with HTML strings, similar to the now popular MVC framework or template technology, template.innerHTML is sufficient. Of course,

CSS CodeCopy content to clipboard

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

Then, you can use append node (appendChild) to load template content instead of (no choice) append string to load template content. The title is "Introduction", so I won't expand on it and won't include specific examples (if you are interested, you can refer to the reference article at the end of the article). It's good that everyone knows that such a thing exists.
4. HTML5 template interview summary

At this point, I basically have a general understanding of the behavior, performance and some methods of the

Towards the end, I put up the compatibility table. IE browser was a big hindrance, but I was very calm because I was already numb to IE!

Compatibility