详解HTML5中的template标签
|
副标题[/!--empirenews.page--]
一、HTML5 template元素初面 <template>元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是“模板元素”。 目前，我们在HTML中嵌入模板HTML，往往是类似这样的写法：
XML/HTML Code复制内容到剪贴板
<script type="text/template"> // ... </script> 实际上，并不存在type="text/template"这样的标准写法，<template>元素的出现旨在让HTML模板HTML变得更加标准与规范。 以前，我们可能还使用过<textarea>或者<xmp>(废止但依然可用)嵌套非转义的HTML标签代码，实现一些特定的前端功能，但，同样的，跟上面的流行用法一样，都是不规范的。从未来趋势来讲，显然<template>标签才是王道。但是，兼容性是个不可忽略的问题，因此，就算扯得很多很少，实际价值有有限，因此，这里仅仅简单介绍下。 看下下面四种嵌套图片HTML，同时图片内容不显示，不会有请求的写法：
XML/HTML Code复制内容到剪贴板
<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. 标签内容隐藏性 <script>本身的特定，让内部的HTML标签是按照字符串处理的，因此，天生内容不显示。但是，在DreamWeaver中，这种写法有个很大的问题，就是在script中书写模板HTML时候，标签自动闭合的永远是</script>这个很讨厌的。 2. 标签位置任意性 3. childNodes无效性 template.content会返回一个文档片段，你可以理解为另外一个document，然后，使用document下的一些查询API就可以获得<template>标签里面的“伪子元素”了。例如，获得第一张图片元素则是：
CSS Code复制内容到剪贴板
var image_first = template.content.querySelector("img"); 三、HTML5 template元素终面 您可以狠狠地点击这里：HTML5 template模板元素体验demo 模板元素与CSS （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
