HTML 5标准中最新引入的template标签介绍
2021-04-06 20:27
标签：标签 org frame select 最新 col 指定 frameset var 现在，W3C没闲着，2013年5月，新的标准中，又引入了新的标签template模板，具体 [/code] 转载：https://my.oschina.net/jackyrong/blog/132763 HTML 5标准中最新引入的template标签介绍 标签：标签 org frame select 最新 col 指定 frameset var 原文地址：https://www.cnblogs.com/PasserByOne/p/12492642.html
标准见：https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#template-element
下面综合进行小结下，供各位学习
首先，服务端的模板是不少了，大家也用的不少，现在其实就是客户端的模板，先看例子：
[code="java"]1 function supportsTemplate() {
2 return ‘content‘ in document.createElement(‘template‘);
3 }
4
5 if (supportsTemplate()) {
6 //支持标签
7 } else {}
//不支持
[/code]
上面代码是监测浏览器是否支持这标签了。目前只有chrome 26以上才支持这个标签；
[code="java"]template id="hhhhold-template">
img src="" alt="random hhhhold image">
h3 class="title">h3>
template>
script>
var template = document.querySelector(‘#hhhhold-template‘);
template.content.querySelector(‘img‘).src = ‘http://hhhhold.com/350x200‘;
template.content.querySelector(‘.title‘).textContent = ‘Random image from hhhhold.com‘
document.body.appendChild(template.content.cloneNode(true));
script>
template标签中，给出了模板id，其中这里定义了空的图片，因为这些都是在
运行时动态指定的，
例子中的1 table>
2 tr>
3 template id="cells-to-repeat">
4 td>some contenttd>
5 template>
6 tr>
7 table>
[/code]
但模板暂时还不支持嵌套。
再来个复杂点的例子：
[code="java"] 1 button onclick="useIt()">Use mebutton>
2 div id="container">div>
3 script>
4 function useIt() {
5 var content = document.querySelector(‘template‘).content;
6
7 var span = content.querySelector(‘span‘);
8 span.textContent = parseInt(span.textContent) + 1;
9 document.querySelector(‘#container‘).appendChild(
10 content.cloneNode(true));
11 }
12 script>
1 template>
2 div>Template used: span>0span>div>
3 script>alert(‘Thanks!‘)script>
4 template>
[/code]
点按钮，就会每次在模板中，不断显示template used:数字 （数字不断＋1），
例子其实也很容易理解。
更详细的介绍可以参考：
http://www.html5rocks.com/en/tutorials/webcomponents/template/?redirect_from_locale=zh
下一篇：http的请求协议
文章标题：HTML 5标准中最新引入的template标签介绍
文章链接：http://soscw.com/index.php/essay/72143.html