Home >Web Front-end >H5 Tutorial >Detailed introduction of tag in HTML5 (picture and text)
Detailed introduction of tag in HTML5 (picture and text)
- 黄舟Original
- 2018-05-15 15:46:2115196browse
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
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:
<script type="text/template"> // ... </script>
In fact, type= does not exist The standard writing method of "text/template" and the appearance of the element are intended to make HTML template HTML more standard and standardized.
Before, we may have used
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 <template> 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 <template> 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 <template> tag in HTML5 (picture and text)" > </xmp> <template> <img src="/static/imghwm/default1.png" data-src="mm1.jpg" class="lazy" alt="Detailed introduction of <template> 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.
2. The arbitrary position of the tag
In addition to the natural hiding of the sub-elements above , the tag also has a feature, which is the arbitrary position. This is very similar to the <script> or <style> tag, which can be in <<a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head> or in < body> or <frameset>. </script>
3. Invalidity of childNodes
Although it seems to the naked eye that there are many sub-tags in the tag, this kind of inertial thinking is not applicable here. Assume that the variabletemplate is a 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 tag. For example, to obtain the first image element is:
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 is just an ordinary custom element, it will be displayed as follows, and the internal tags will be rendered according to ordinary tags.
如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如Chrome:
也就是说，虽然从CSS的角度看，就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。
默认情况下，是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：
window.getComputedStyle(template).display; // 结果是"none"
因此，demo中才设置了如下的CSS声明：
CSS Code复制内容到剪贴板
template { display: block; ... }-
模板的克隆
如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，比<script>强大之处在于，<script>内部内容只能当做字符串来获取，而<template>虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：</script>
CSS Code复制内容到剪贴板
var clone = document.importNode(template.content, true);
然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。
四、HTML5 template面试小结
至此，元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比之类的HTML5元素更受欢迎更受关注也更有潜力。
临近最后，放上兼容性表，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!
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server