HTML 5标准中最新引入的template标签介绍

2023-06-24 19:34:19

现在，W3C没闲着，2013年5月，新的标准中，又引入了新的标签template模板，具体

标准见：https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#template-element

下面综合进行小结下，供各位学习

首先，服务端的模板是不少了，大家也用的不少，现在其实就是客户端的模板，先看例子：

上面代码是监测浏览器是否支持这标签了。目前只有chrome 26以上才支持这个标签；

template标签中，给出了模板id，其中这里定义了空的图片，因为这些都是在

运行时动态指定的，

例子中的<SCRIPT>部门，就是通过template.content.querySelector去动态指定

填充模板的内容，记得最后要用：

document.body.appendChild(template.content.cloneNode(true));才算激活模板；

<template>标签可以放置在<head>,<body>或者<frameset>当中，也可以放在象table,tr等标签中，比如

但模板暂时还不支持嵌套。

再来个复杂点的例子：

点按钮，就会每次在模板中，不断显示template used:数字（数字不断＋1），

例子其实也很容易理解。

更详细的介绍可以参考：

http://www.html5rocks.com/en/tutorials/webcomponents/template/?redirect_from_locale=zh

继续阅读