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="mm1.jpg"> </script> <textarea style="display: none;"> <img src="mm1.jpg"> </textarea> <xmp style="display: none;"> <img src="mm1.jpg"> </xmp> <template> <img src="mm1.jpg"> </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</a>, 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.
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; ... }