{"id":4251,"date":"2014-07-08T11:14:01","date_gmt":"2014-07-08T03:14:01","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=4251"},"modified":"2018-08-22T17:59:25","modified_gmt":"2018-08-22T09:59:25","slug":"hello-html5-template-tag","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2014\/07\/hello-html5-template-tag\/","title":{"rendered":"HTML5 <template>\u6807\u7b7e\u5143\u7d20\u7b80\u4ecb"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/?p=4251<\/a><\/p>\n

\u4e00\u3001HTML5 template\u5143\u7d20\u521d\u9762<\/h3>\n

<template><\/code>\u5143\u7d20\uff0c\u57fa\u672c\u4e0a\u53ef\u4ee5\u786e\u5b9a\u662f2013\u5e74\u624d\u51fa\u73b0\u7684\u3002\u5e72\u561b\u7528\u7684\u5462\uff0c\u987e\u540d\u601d\u610f\uff0c\u5c31\u662f\u7528\u6765\u58f0\u660e\u662f\u201c\u6a21\u677f\u5143\u7d20\u201d\u3002<\/p>\n

\u76ee\u524d\uff0c\u6211\u4eec\u5728HTML\u4e2d\u5d4c\u5165\u6a21\u677fHTML\uff0c\u5f80\u5f80\u662f\u7c7b\u4f3c\u8fd9\u6837\u7684\u5199\u6cd5\uff1a<\/p>\n

\n
<script type=\"text\/template\">\n\/\/ ...<\/span>\n<\/script><\/pre>\n<\/div>\n
\u5b9e\u9645\u4e0a\uff0c\u5e76\u4e0d\u5b58\u5728type=\"text\/template\"<\/code>\u8fd9\u6837\u7684\u6807\u51c6\u5199\u6cd5\uff0c<template><\/code>\u5143\u7d20\u7684\u51fa\u73b0\u65e8\u5728\u8ba9HTML\u6a21\u677fHTML\u53d8\u5f97\u66f4\u52a0\u6807\u51c6\u4e0e\u89c4\u8303\u3002<\/p>\n
\u4ee5\u524d\uff0c\u6211\u4eec\u53ef\u80fd\u8fd8\u4f7f\u7528\u8fc7<textarea><\/code>\u6216\u8005<xmp><\/code>(\u5e9f\u6b62\u4f46\u4f9d\u7136\u53ef\u7528)\u5d4c\u5957\u975e\u8f6c\u4e49\u7684HTML\u6807\u7b7e\u4ee3\u7801\uff0c\u5b9e\u73b0\u4e00\u4e9b\u7279\u5b9a\u7684\u524d\u7aef\u529f\u80fd\uff0c\u4f46\uff0c\u540c\u6837\u7684\uff0c\u8ddf\u4e0a\u9762\u7684\u6d41\u884c\u7528\u6cd5\u4e00\u6837\uff0c\u90fd\u662f\u4e0d\u89c4\u8303\u7684\u3002\u4ece\u672a\u6765\u8d8b\u52bf\u6765\u8bb2\uff0c\u663e\u7136<template><\/code>\u6807\u7b7e\u624d\u662f\u738b\u9053\u3002\u4f46\u662f\uff0c\u517c\u5bb9\u6027\u662f\u4e2a\u4e0d\u53ef\u5ffd\u7565\u7684\u95ee\u9898\uff0c\u56e0\u6b64\uff0c\u5c31\u7b97\u626f\u5f97\u5f88\u591a\u5f88\u5c11\uff0c\u5b9e\u9645\u4ef7\u503c\u6709\u6709\u9650\uff0c\u56e0\u6b64\uff0c\u8fd9\u91cc\u4ec5\u4ec5\u7b80\u5355\u4ecb\u7ecd\u4e0b\u3002<\/p>\n
\u4e8c\u3001HTML5 template\u5143\u7d20\u590d\u9762<\/h3>\n
\u770b\u4e0b\u4e0b\u9762\u56db\u79cd\u5d4c\u5957\u56fe\u7247HTML\uff0c\u540c\u65f6\u56fe\u7247\u5185\u5bb9\u4e0d\u663e\u793a\uff0c\u4e0d\u4f1a\u6709\u8bf7\u6c42<\/strong>\u7684\u5199\u6cd5\uff1a<\/p>\n
\n
<script type=\"text\/template\">\n<img src=\"mm1.jpg\"><\/span>\n<\/script><\/pre>\n<\/div>\n
\n
<textarea style=\"display: none;\">\n<img src=\"mm1.jpg\"><\/span>\n<\/textarea><\/pre>\n<\/div>\n
\n
<xmp style=\"display: none;\">\n<img src=\"mm1.jpg\"><\/span>\n<\/xmp><\/pre>\n<\/div>\n
\n
<template>\n<img src=\"mm1.jpg\"><\/span>\n<\/template><\/pre>\n<\/div>\n
1. \u6807\u7b7e\u5185\u5bb9\u9690\u85cf\u6027<\/strong><\/p>\n
    \n
  1. <script><\/code>\u672c\u8eab\u7684\u7279\u5b9a\uff0c\u8ba9\u5185\u90e8\u7684HTML\u6807\u7b7e\u662f\u6309\u7167\u5b57\u7b26\u4e32\u5904\u7406\u7684\uff0c\u56e0\u6b64\uff0c\u5929\u751f\u5185\u5bb9\u4e0d\u663e\u793a\u3002\u4f46\u662f\uff0c\u5728DreamWeaver\u4e2d\uff0c\u8fd9\u79cd\u5199\u6cd5\u6709\u4e2a\u5f88\u5927\u7684\u95ee\u9898\uff0c\u5c31\u662f\u5728script<\/code>\u4e2d\u4e66\u5199\u6a21\u677fHTML\u65f6\u5019\uff0c\u6807\u7b7e\u81ea\u52a8\u95ed\u5408\u7684\u6c38\u8fdc\u662f<\/script><\/code>\u8fd9\u4e2a\u5f88\u8ba8\u538c\u7684\u3002<\/li>\n
  2. <textarea><\/code>\u4e3a\u6587\u672c\u57df\uff0c\u91cc\u9762\u5d4c\u5957\u7684HTML\u7247\u6bb5\u4f1a\u88ab\u5f53\u505a\u6587\u672c\u57df\u7684\u503c\u3002\u4f46\uff0c\u6587\u672c\u57df\u672c\u8eab\u662f\u53ef\u89c1\u7684\uff0c\u56e0\u6b64\u9700\u8981\u989d\u5916\u7684\u8bbe\u7f6edisplay: none;<\/code><\/li>\n
  3. <xmp><\/code>\u662f\u4e2a\u5f88\u8001\u5f88\u7279\u6b8a\u7684\u5c5e\u6027\uff0c\u8bed\u4e49\u4e3aexample<\/code>\uff0c\u793a\u4f8b\u3002\u636e\u8bf4\u540e\u6765\u88ab<pre><\/code>\u6807\u7b7e\u53d6\u4ee3\u800c\u5e9f\u6b62\uff0c\u5b9e\u9645\u4e0a\uff0c\u76ee\u524d\uff0c\u6240\u6709\u7684\u6d4f\u89c8\u5668\u90fd\u662f\u652f\u6301\u7684\u3002\u4f46\u662f\uff0c\u5176\u8ddf<pre><\/code>\u6807\u7b7e\u4e0d\u80fd\u5212\u7b49\u53f7\u3002<pre><\/code>\u91cc\u9762\u6709\u4e2a<img><\/code>\u6807\u7b7e\uff0c\u663e\u793a\u7684\u5219\u662f\u4e00\u5f20\u56fe\u7247\uff0c\u800c<xmp><\/code>\u5448\u73b0\u7684\u5c31\u662f\u4e00\u6bb5HTML\u4ee3\u7801\u3002\u4e0d\u8fc7\uff0c\u4e0e<textarea><\/code>\u4e00\u6837\uff0c\u5185\u5bb9\u4e0d\u663e\u793a\u7684\u8bdd\uff0c\u8fd8\u9700\u8981\u989d\u5916\u7684\u8bbe\u7f6edisplay: none;<\/code><\/li>\n
  4. \u4e0a\u9762\u8fd9\u4e2a<template><\/code>\u6807\u7b7e\u4e0a\u6ca1\u6709\u8bbe\u7f6edisplay: none;<\/code>\uff0c\u6ce8\u610f\u5230\u4e86\u6ca1\u6709\u3002\u4e3a\u4f55\uff1f\u8fd9\u53ea\u662f\u53d1\u6325\u4e86<template><\/code>\u6807\u7b7e\u5143\u7d20\u7684\u539f\u672c\u7279\u6027\uff0c\u5929\u751fdisplay:none<\/code>\uff0c\u540c\u65f6\u6a21\u677f\u5143\u7d20\u5185\u90e8\u5185\u5bb9\u662f\u6b7b\u6d3b\u4e0d\u4f1a\u5448\u73b0\u7684\u3002\u56e0\u6b64\uff0c\u65e0\u9700\u8bbe\u7f6e\u9690\u85cf\u3002\u8fd9\u5c31\u662fHTML5 <template>\u6807\u7b7e\u5143\u7d20\u7279\u5f81\u4e4b\u4e00\uff1a\u6807\u7b7e\u5185\u5bb9\u9690\u85cf\u6027<\/strong>.<\/li>\n<\/ol>\n
    2. \u6807\u7b7e\u4f4d\u7f6e\u4efb\u610f\u6027<\/strong>
    \n\u9664\u4e86\u4e0a\u9762<template><\/code>\u5b50\u5143\u7d20\u5929\u7136\u9690\u85cf\u5916\uff0c<template><\/code>\u6807\u7b7e\u8fd8\u6709\u4e00\u4e2a\u7279\u6027\uff0c\u5c31\u662f\u4f4d\u7f6e\u4efb\u610f\u6027\uff0c\u8fd9\u975e\u5e38\u7c7b\u4f3c<script><\/code>\u6216\u8005<style><\/code>\u6807\u7b7e\uff0c\u53ef\u4ee5\u5728<head><\/code>\u4e2d\uff0c\u4e5f\u53ef\u4ee5\u5728<body><\/code>\u6216\u8005<frameset><\/code>\u4e2d\u3002<\/p>\n
    3. childNodes\u65e0\u6548\u6027<\/strong>
    \n\u867d\u7136\uff0c\u8089\u773c\u770b\u4e0a\u53bb\u662f<template><\/code>\u6807\u7b7e\u91cc\u9762\u8fd8\u6709\u5f88\u591a\u5b50\u6807\u7b7e\uff0c\u8fd9\u79cd\u60ef\u6027\u601d\u7ef4\u5728\u8fd9\u91cc\u662f\u4e0d\u53d7\u7528\u7684\u3002\u5047\u8bbe\u53d8\u91cftemplate<\/code>\u662f\u6211\u4eec\u83b7\u5f97\u7684\u4e00\u4e2a<template><\/code>\u6807\u7b7eDOM\uff08\u91cc\u9762\u4e00\u5927\u5806HTML\u4ee3\u7801\uff09\uff0c\u4f60\u4f1a\u53d1\u73b0\uff1atemplate.childNodes<\/code>\u662f\u4e2a\u7a7a\u5927\u5c41\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528template.innerHTML<\/code>\u83b7\u53d6\u5b8c\u6574\u7684HTML\u7247\u6bb5\u3002\u5982\u679c\u4f60\u975e\u5f97\u83b7\u53d6\u201c\u4f2a\u5b50\u5143\u7d20\u201d\u3002\u4e5f\u662f\u6709\u529e\u6cd5\u7684\uff0cOK\uff0c\u7741\u5927\u773c\u775b\uff0c\u8981\u4f7f\u7528content<\/code>\u5c5e\u6027\u3002<\/p>\n
    template.content<\/code>\u4f1a\u8fd4\u56de\u4e00\u4e2a\u6587\u6863\u7247\u6bb5\uff0c\u4f60\u53ef\u4ee5\u7406\u89e3\u4e3a\u53e6\u5916\u4e00\u4e2adocument<\/code>\uff0c\u7136\u540e\uff0c\u4f7f\u7528document<\/code>\u4e0b\u7684\u4e00\u4e9b\u67e5\u8be2API\u5c31\u53ef\u4ee5\u83b7\u5f97<template><\/code>\u6807\u7b7e\u91cc\u9762\u7684\u201c\u4f2a\u5b50\u5143\u7d20\u201d\u4e86\u3002\u4f8b\u5982\uff0c\u83b7\u5f97\u7b2c\u4e00\u5f20\u56fe\u7247\u5143\u7d20\u5219\u662f\uff1a<\/p>\n
    \n
    var image_first = template.content.querySelector(\"img\");<\/pre>\n<\/div>\n
    \u4e09\u3001HTML5 template\u5143\u7d20\u7ec8\u9762<\/h3>\n
    \u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aHTML5 template\u6a21\u677f\u5143\u7d20\u4f53\u9a8cdemo<\/a><\/p>\n
    \u6a21\u677f\u5143\u7d20\u4e0eCSS<\/strong>
    \n\u5982\u679c\u6d4f\u89c8\u5668\u6709\u773c\u4e0d\u8bc6\u6cf0\u5c71\uff0c\u8ba4\u4e3a<template><\/code>\u5c31\u662f\u4e2a\u666e\u901a\u7684\u81ea\u5b9a\u4e49\u5143\u7d20\uff0c\u5219\u663e\u793a\u7684\u5c31\u4f1a\u4f7f\u4e0b\u9762\u8fd9\u4e2a\u6837\u5b50\uff0c\u5185\u90e8\u7684\u6807\u7b7e\u6309\u7167\u4e00\u822c\u7684\u6807\u7b7e\u6e32\u67d3\u4e86\uff0c\u4f8b\u5982IE11:
    \n\"\u4e0d\u8ba4\u8bc6template\u5143\u7d20\u7684\u6d4f\u89c8\u5668\u7684\u663e\u793a\u6548\u679c<\/p>\n
    \u5982\u679c\u6d4f\u89c8\u5668\u4e0e\u65f6\u4ff1\u8fdb\uff0c\u5219\u663e\u793a\u4f1a\u662f\u4e0b\u9762\u8fd9\u6837\uff0c\u81ea\u8eabCSS\u6e32\u67d3\uff0c\u5185\u90e8\u6807\u7b7e\u76f4\u63a5\u5f02\u7a7a\u95f4\u4e0d\u6e32\u67d3\uff0c\u4f8b\u5982Chrome:
    \n\"\u652f\u6301template\u5143\u7d20\u7684\u663e\u793a\u6548\u679c\"<\/p>\n
    \u4e5f\u5c31\u662f\u8bf4\uff0c\u867d\u7136\u4eceCSS\u7684\u89d2\u5ea6\u770b\uff0c<template><\/code>\u5c31\u662f\u4e2a\u8ddfCSS\u6253\u5f97\u706b\u70ed\u7684\u666e\u901a\u5143\u7d20\uff0c\u4f46\u662f\uff0c\u4eceHTML\u89d2\u5ea6\u770b\uff0c\u5176\u72b9\u5982\u5e26\u571f\u7684\u5199\u8f6e\u773c\uff0c\u53ef\u4ee5\u8ba9\u5185\u90e8\u6807\u7b7e\u8f6c\u79fb\u5230\u5f02\u7a7a\u95f4\uff0c\u8840\u8ff9\u754c\u9650\u822c\u7a00\u6709\u3002<\/p>\n
    \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c<template><\/code>\u662f\u9690\u85cf\u7684\uff0c\u5b9e\u9645\u662f\u9ed8\u8ba4\u5176display<\/code>\u5c5e\u6027\u4e3anone<\/code>. \u4f7f\u7528\u4e0b\u9762\u7684\u4ee3\u7801\u4e00\u6d4b\u4fbf\u77e5\uff1a<\/p>\n
    \n
    window.getComputedStyle(template).display;    \/\/ \u7ed3\u679c\u662f\"none\"<\/span><\/pre>\n<\/div>\n
    \"template\u9ed8\u8ba4display\u5c5e\u6027\u4e3anone\"<\/p>\n
    \u56e0\u6b64\uff0cdemo\u4e2d\u624d\u8bbe\u7f6e\u4e86\u5982\u4e0b\u7684CSS\u58f0\u660e\uff1a<\/p>\n
    \n
    template { display: block; ... }<\/pre>\n<\/div>\n
    \u6a21\u677f\u7684\u514b\u9686<\/strong>
    \n\u5982\u679c\u4f60\u662f\u5728HTML\u5b57\u7b26\u4e32\u4e0a\u5904\u7406\uff0c\u7c7b\u4f3c\u4e8e\u73b0\u5728\u6d41\u884c\u7684MVC\u6846\u67b6\u6216\u6a21\u677f\u6280\u672f\uff0c\u5219template.innerHTML<\/code>\u8db3\u77e3\u3002\u7136\uff0c<template><\/code>\u6bd4<script><\/code>\u5f3a\u5927\u4e4b\u5904\u5728\u4e8e\uff0c<script><\/code>\u5185\u90e8\u5185\u5bb9\u53ea\u80fd\u5f53\u505a\u5b57\u7b26\u4e32\u6765\u83b7\u53d6\uff0c\u800c<template><\/code>\u867d\u7136\u5b58\u5728\u4e8e\u5f02\u7a7a\u95f4\uff0c\u4f46\u662f\uff0c\u4f9d\u7136\u53ef\u4ee5\u8282\u70b9\u83b7\u53d6\uff08\u4e0a\u9762\u6709\u5c55\u793a\uff09\uff0c\u4ee5\u53ca\u5b8c\u6574\u514b\u9686\uff0c\u8bed\u6cd5\u7c7b\u4f3c\u4e0b\u9762\uff1a<\/p>\n
    \n
    var clone = document.importNode(template.content, true);<\/pre>\n<\/div>\n
    \u7136\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u7528append\u8282\u70b9(appendChild)\u7684\u65b9\u5f0f\uff0c\u52a0\u8f7d\u6a21\u677f\u5185\u5bb9\u4e86\uff0c\u800c\u4e0d\u662f\uff08\u6ca1\u5f97\u9009\u62e9\uff09append\u5b57\u7b26\u4e32\u52a0\u8f7d\u6a21\u677f\u5185\u5bb9\u3002\u6807\u9898\u662f\u201c\u7b80\u4ecb\u201d\uff0c\u56e0\u6b64\uff0c\u4e0d\u5c55\u5f00\uff0c\u4e5f\u4e0d\u653e\u5177\u4f53\u7684\u5b9e\u4f8b\u4e86\uff08\u82e5\u6709\u5174\u8da3\uff0c\u53ef\u53c2\u8003\u6587\u672b\u7684\u53c2\u8003\u6587\u7ae0<\/a>\uff09\uff0c\u5927\u5bb6\u77e5\u9053\u6709\u8fd9\u4e48\u56de\u4e8b\u5c31\u597d\u3002<\/p>\n
    \u56db\u3001HTML5 template\u9762\u8bd5\u5c0f\u7ed3<\/h3>\n
    \u81f3\u6b64\uff0c<template><\/code>\u5143\u7d20\u7684\u884c\u4e3a\u3001\u8868\u73b0\u4ee5\u53ca\u4e00\u4e9b\u65b9\u6cd5\u57fa\u672c\u4e0a\u6709\u4e86\u5927\u81f4\u7684\u8ba4\u8bc6\uff0c\u5982\u679c\u8fd9\u662f\u573a\u9762\u8bd5\u7684\u8bdd\uff0c\u5219\u6211\u5bf9<template><\/code>\u7684\u8bc4\u4ef7\u8fd8\u662f\u633a\u9ad8\u7684\uff0c\u7279\u6b8a\u573a\u666f\u4f7f\u7528\u7684\u7279\u6b8a\u5229\u5668\uff0c\u4e00\u4e9b\u7c7b\u4f3c\u201c\u5f02\u7a7a\u95f4\u201d\u7684\u8bbe\u8ba1\u4e5f\u662f\u8ba9\u4eba\u5927\u5f00\u773c\u754c\uff0c\u8fd9\u4e2a\u5143\u7d20\u8981\u6bd4<hgroup><\/code>\u4e4b\u7c7b\u7684HTML5\u5143\u7d20\u66f4\u53d7\u6b22\u8fce\u66f4\u53d7\u5173\u6ce8\u4e5f\u66f4\u6709\u6f5c\u529b\u3002<\/p>\n
    \u4e34\u8fd1\u6700\u540e\uff0c\u653e\u4e0a\u517c\u5bb9\u6027\u8868\uff0cIE13+\u5f00\u59cb\u652f\u6301\uff0c\u4f46\u4f9d\u7136\u62d6\u4e86\u597d\u5927\u7684\u540e\u817f\uff0c\u4e0d\u8fc7\u6709\u4e9b\u9879\u76ee\u53ea\u9700\u8981\u517c\u5bb9webkit\u5185\u6838\u6d4f\u89c8\u5668\uff0c\u5012\u662f\u53ef\u4ee5\u4e00\u8bd5\uff01<\/p>\n
    \u517c\u5bb9\u6027<\/strong>
    \n