大佬教程收集整理的这篇文章主要介绍了详解HTML5中的<template>标签，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
一、HTML5 template元素初面
元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是“模板元素”。
目前，我们在HTML中嵌入模板HTML，往往是类似这样的写法：
false;"> // ...
实际上，并不存在type="text/template"这样的标准写法，元素的出现旨在让HTML模板HTML变得更加标准与规范。
以前，我们可能还使用过或者<xmp>(废止但依然可用)嵌套非转义的HTML标签代码，实现一些特定的前端功能，但，同样的，跟上面的流行用法一样，都是不规范的。从未来趋势来讲，显然<template>标签才是王道。但是，兼容性是个不可忽略的问题，因此，就算扯得很多很少，实际价值有有限，因此，这里仅仅简单介绍下。</p><p><strong>二、HTML5 template元素复面</strong></p><p>看下下面四种嵌套图片HTML，同时图片内容不显示，不会有请求的写法：</p><pre class="brush:html;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se"><script type="text/template"> <img src="mm1.jpg"> </script> <textarea style="display: none;"> <img src="mm1.jpg"> 1. 标签内容隐藏性 这个很讨厌的。 为文本域，里面嵌套的HTML片段会被当做文本域的值。但，文本域本身是可见的，<a href="http://code.js-code.com/tag/yincixu/" target="_blank" class="keywords">因此需</a>要额外的设置display: none;</p><p> <xmp>是个很老很特殊的属性，语义为example，示例。据说后来被<pre>标签取代而废止，实际上，目前，所有的浏览器都是支持的。但是，其跟<pre>标签不能划等号。<pre>里面有个<img>标签，显示的则是一张图片，而<xmp>呈现的就是一段HTML代码。不过，与<textarea>一样，内容不显示的话，还需要额外的设置display: none;</p><p> 上面这个<template>标签上没有设置display: none;，注意到了没有。为何？这只是发挥了<template>标签元素的原本特性，天生display:none，同时模板元素内部内容是死活不会呈现的。因此，无需设置隐藏。这就是HTML5 <template>标签元素特征之一：标签内容隐藏性.</p><h3>2. 标签位置任意性</h3><p>除了上面<template>子元素天然隐藏外，<template>标签<a href="http://code.js-code.com/tag/huanyouyi/" target="_blank" class="keywords">还有一</a>个特性，就是位置任意性，这<a href="http://code.js-code.com/tag/feichangleisi/" target="_blank" class="keywords">非常类似</a><script>或者<style>标签，可以在<head>中，也可以在<body>或者<frameset>中。</p><h3>3. childNodes无效性</h3><p><a href="http://code.js-code.com/tag/sui/" target="_blank" class="keywords">虽</a>然，肉眼看上去是<template>标签里面还有很多子标签，这种惯性思维在这里是不受用的。假设变量template是我们获得的一个<template>标签DOM（里面一大堆HTML代码），你会发现：template.childNodes是个空大屁。我们可以使用template.innerHTML获取完整的HTML片段。如果你非得获取“伪子元素”。也是有办法的，OK，睁大眼睛，要<a href="http://code.js-code.com/tag/shiyongCO/" target="_blank" class="keywords">使用CO</a>ntent属性。</p><p>template.content会返回一个文档片段，你可以理解为另外一个document，然后，使用document下的一些查询API就<a href="http://code.js-code.com/tag/keyihuo/" target="_blank" class="keywords">可以获</a>得<template>标签里面的“伪子元素”了。例如，获得第一张图片元素则是：</p><pre class="brush:js;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">var image_first = template.content.query<a href="http://code.js-code.com/tag/SELE/" target="_blank" class="keywords">SELE</a>ctor("img"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a></pre><h3><strong>三、HTML5 template元素终面</strong></h3><p>您可以狠狠地点击这里：HTML5 template模板元素体验demo</p><h3>模板元素与CSS</h3><p>如果浏览器有眼不识泰山，认为<template>就是个普通的自定义元素，则显示的就会使下面这个样子，<a href="http://code.js-code.com/tag/neibude/" target="_blank" class="keywords">内部的</a>标签按照<a href="http://code.js-code.com/tag/yibande/" target="_blank" class="keywords">一般的</a>标签渲染了。</p><p>如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如Chrome:</p><p><img src="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>s://cn.js-code.com/res/2018/12-29/16/c2b2a7e1f99e0e8f4acadc952973ba3e.png"/></p><p>也就是说，<a href="http://code.js-code.com/tag/sui/" target="_blank" class="keywords">虽</a>然从CSS的角度看，<template>就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。</p><p>默认情况下，<template>是隐藏的，实际是默认其display属性为none. 使用下面的代码一测<a href="http://code.js-code.com/tag/bian/" target="_blank" class="keywords">便</a>知：</p><pre class="brush:js;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">window.getComputedStyle(templat<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>.display;// 结果是"none"</pre><p><p class="pic_center"><p class="pic_center"><img <a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>e="详解HTML5中的<template>标签" alt="详解HTML5中的<template>标签" src="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>s://cn.js-code.com/res/2018/12-29/16/cf6519ee8541c7da3759343e2c992cfe.png"/></p></p></p><p>因此，demo中才设置了如下的CSS声明：</p><pre class="brush:css;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">template <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> display: block; ... }</pre><h3>模板的克隆</h3><p>如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，<template>比<script>强大之处在于，<script>内部内容只能当做字符串来获取，而<template><a href="http://code.js-code.com/tag/sui/" target="_blank" class="keywords">虽</a>然存在于异空间，但是，依然可以节点获取（<a href="http://code.js-code.com/tag/shangmianyou/" target="_blank" class="keywords">上面有</a>展示），以及完整克隆，语法类似下面：</p><pre class="brush:js;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">var clone = document.importNode(template.content, tru<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>;</pre><p>然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参<a href="http://code.js-code.com/tag/kao/" target="_blank" class="keywords">考</a>文末的参<a href="http://code.js-code.com/tag/kao/" target="_blank" class="keywords">考</a>文章），大家知道有这么回事就好。</p><h3><strong>四、HTML5 template面试小结</strong></h3><p>至此，<template>元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对<template>的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比<hgroup>之类的HTML5元素更受欢迎更受关注也更有潜力。</p><p>临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！</p><h3>兼容性</h3><p><p class="pic_center"><p class="pic_center"><img <a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>e="详解HTML5中的<template>标签" alt="详解HTML5中的<template>标签" src="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>s://cn.js-code.com/res/2018/12-29/16/7a46f8def8943c420c3ecfb87de6d590.png"/></p></p></p> <h2>大佬总结</h2> <p>以上是<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>为你收集整理的<a href="http://code.js-code.com/html5/1181.html" class="article_link" target="_blank">详解HTML5中的<template>标签</a>全部内容，希望文章能够帮你解决<a href="http://code.js-code.com/html5/1181.html" class="article_link" target="_blank">详解HTML5中的<template>标签</a>所遇到的程序开发问题。</p> <p>如果觉得<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>网站内容还不错，欢迎将<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>推荐给程序员好友。</p> <blockquote>本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。<br>如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。</blockquote> </div> <div class="tags text-center clearfix center-block">标签：<a href="http://code.js-code.com/tag/template/" class="tag_link" target="_blank">template</a></div> </div> <div class="panel panel-default"> <ul class="list-group"> <li class="list-group-item"><a href="http://code.js-code.com/html5/1180.html" class="prev" target="_self"> 上一篇: HTML5 Canvas实现玫瑰曲线和心形...</a><a href="http://code.js-code.com/html5/1182.html" class="text-muted pull-right" target="_self"> 下一篇:使用HTML5捕捉音频与视频信息概述...</a></li> </ul> </div> <div class="panel panel-default"> </div> <div class="panel panel-default"> <div class="panel-heading font-weight-bold">猜你在找的HTML5相关文章</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/html5/1177.html" title="详解HTML5表单新增属性">详解HTML5表单新增属性</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1175.html" title="详解HTML5通讯录获取指定多个人的信息">详解HTML5通讯录获取指定多个人的信息</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1184.html" title="html5+css如何实现中间大两头小的轮播效果">html5+css如何实现中间大两头小的轮播效果</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1183.html" title="Html5 Canvas动画基础碰撞检测的实现">Html5 Canvas动画基础碰撞检测的实现</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1182.html" title="使用HTML5捕捉音频与视频信息概述及实例">使用HTML5捕捉音频与视频信息概述及实例</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1181.html" title="详解HTML5中的<template>标签">详解HTML5中的<template>标签</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1180.html" title="HTML5 Canvas实现玫瑰曲线和心形图案的代码实例">HTML5 Canvas实现玫瑰曲线和心形图案的代码实例</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1179.html" title="HTML5应用之文件上传">HTML5应用之文件上传</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1178.html" title="详解HTML5 LocalStorage 本地存储">详解HTML5 LocalStorage 本地存储</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379014.html" title="MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7">MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7</a> <span class="text-muted pull-right">2022-04-27</span> </li></ul> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="https://www.js-code.com/all" class="font-weight-bold">其他相关热搜词</a><span class="pull-right"><a href="https://www.js-code.com/all">更多</a></span></div> <div class="panel-body list-cloud"><a href="http://code.js-code.com/tag/php/">php</a><a href="http://code.js-code.com/tag/Java/">Java</a><a href="http://code.js-code.com/tag/Python/">Python</a><a href="http://code.js-code.com/tag/chengxuyuan/">程序员</a><a href="http://code.js-code.com/tag/load/">load</a><a href="http://code.js-code.com/tag/zhong/">中</a><a href="http://code.js-code.com/tag/ruhe/">如何</a><a href="http://code.js-code.com/tag/string/">string</a><a href="http://code.js-code.com/tag/shiyong/">使用</a><a href="http://code.js-code.com/tag/canshu/">参数</a><a href="http://code.js-code.com/tag/jquery/">jquery</a><a href="http://code.js-code.com/tag/kaifa/">开发</a><a href="http://code.js-code.com/tag/anzhuang/">安装</a><a href="http://code.js-code.com/tag/list/">list</a><a href="http://code.js-code.com/tag/linux/">linux</a><a href="http://code.js-code.com/tag/ios/">ios</a><a href="http://code.js-code.com/tag/android/">android</a><a href="http://code.js-code.com/tag/gongju/">工具</a><a href="http://code.js-code.com/tag/javascript/">javascript</a><a href="http://code.js-code.com/tag/cap/">cap</a></div> </div> </div> <div class="col-sm-3"> <div style="position:fixed!important;top:334px;height:550px;z-index:9999;"> <div class="_wfhdnfcjs9"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6828100", container: "_wfhdnfcjs9", async: true }); </script> <!-- 多条广告如下脚本只需引入一次 --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">最新HTML5教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/html5/379014.html" title="MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7">MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379013.html" title="ios – NSIndexPath和IndexPath在Swift 3.0中">ios – NSIndexPath和IndexPath在Swift 3.0中</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379012.html" title="如何知道该应用程序在iOS8中具有摄像头访问权限或不能以编程方式">如何知道该应用程序在iOS8中具有摄像头访问权限或不能以编程方式</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379011.html" title="具有许多按钮的Xcode iPad UIActionSheet不能正确显示iOS7">具有许多按钮的Xcode iPad UIActionSheet不能正确显示iOS7</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379010.html" title="ios – WCSession sendMessage：replyHandler错误代码7014(WCErrorCodeDeliveryFailed)">ios – WCSession sendMessage：replyHandler错误代码7014(WCErrorCodeDeliveryFailed...</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379009.html" title="ios – 如何从Core Data中的持久存储中删除所有对象？">ios – 如何从Core Data中的持久存储中删除所有对象？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379008.html" title="ios – 如何控制阴影传播和模糊？">ios – 如何控制阴影传播和模糊？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379007.html" title="iOS：实时摄像机上的实时OCR(类似于iTunes兑换礼品卡)">iOS：实时摄像机上的实时OCR(类似于iTunes兑换礼品卡)</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379006.html" title="更改为iOS6 – ucol_getVersion后,应用程序崩溃">更改为iOS6 – ucol_getVersion后,应用程序崩溃</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379005.html" title="ios – NSUserDefaults initWithSuiteName在删除应用程序后仍然存在">ios – NSUserDefaults initWithSuiteName在删除应用程序后仍然存在</a> </li></ul> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">热门HTML5教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/html5/1184.html" title="html5+css如何实现中间大两头小的轮播效果">html5+css如何实现中间大两头小的轮播效果</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1186.html" title="localStorage的过期时间设置的方法详解">localStorage的过期时间设置的方法详解</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1182.html" title="使用HTML5捕捉音频与视频信息概述及实例">使用HTML5捕捉音频与视频信息概述及实例</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1177.html" title="详解HTML5表单新增属性">详解HTML5表单新增属性</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1175.html" title="详解HTML5通讯录获取指定多个人的信息">详解HTML5通讯录获取指定多个人的信息</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1189.html" title="html5 postMessage前端跨域并前端监听的方法示例">html5 postMessage前端跨域并前端监听的方法示例</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1188.html" title="canvas压缩图片以及卡片制作的方法示例">canvas压缩图片以及卡片制作的方法示例</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1183.html" title="Html5 Canvas动画基础碰撞检测的实现">Html5 Canvas动画基础碰撞检测的实现</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379014.html" title="MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7">MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379013.html" title="ios – NSIndexPath和IndexPath在Swift 3.0中">ios – NSIndexPath和IndexPath在Swift 3.0中</a> </li></ul> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-4 site-link"> <dt>最近更新</dt><dd> <a href="http://code.js-code.com/chengxubiji/919675.html" title="Linux——（1）基本命令">Linux——（1）基本命令</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919674.html" title="【UNIAPP】上传视频，进度条的前台与后端">【UNIAPP】上传视频，进度条的前...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919673.html" title="You can't specify target table 'xxx' for update in FROM clause的解决">You can't specify target t...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919672.html" title="jmeter压测，将jmeter返回数据，保存到表格">jmeter压测，将jmeter返回数据，...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919671.html" title="经典区间dp 【方块消除】">经典区间dp 【方块消除】</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919670.html" title="java-day02">java-day02</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919669.html" title="【异常】 'ascii' codec can't decode byte 0xe8 in position 2: ordinal not in range(128)">【异常】 'ascii' cod...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919668.html" title="Django后台admin常用设置">Django后台admin常用设置</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919667.html" title="docker安装nacos单机版（无数据库）">docker安装nacos单机版（无数据库...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919666.html" title="Intel® RealSense™ LiDAR camera L515使用体验">Intel® RealSense!...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd></dl> <dl class="col-sm-4 site-link"> <dt>热门文章</dt><dd> <a href="http://code.js-code.com/php/8105.html" title="php实现mysql数据库分表分段备份">php实现mysql数据库分表分段备份</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/9790.html" title="php基于base64解码图片与加密图片还原实例">php基于base64解码图片与加密图片...</a> <span class="text-muted pull-right">2019-11-13 </span> </dd><dd> <a href="http://code.js-code.com/php/6138.html" title="自定义min版smarty模板引擎MinSmarty.class.php文件及用法">自定义min版smarty模板引擎MinSm...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/6073.html" title="php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例">php自定义中文字符串截取函数sub...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/4608.html" title="PHP使用preg_split()分割特殊字符(元字符等)的方法分析">PHP使用preg_split()分割特殊字符...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4416.html" title="PHP利用正则表达式将相对路径转成绝对路径的方法示例">PHP利用正则表达式将相对路径转成...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4124.html" title="PHP删除二维数组中相同元素及数组重复值的方法示例">PHP删除二维数组中相同元素及数组...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4079.html" title="php对xml文件的增删改查操作实现方法分析">php对xml文件的增删改查操作实现...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4028.html" title="PHP判断密码强度的方法详解">PHP判断密码强度的方法详解</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/3899.html" title="PHP简单计算两个时间差的方法示例">PHP简单计算两个时间差的方法示例</a> <span class="text-muted pull-right">2019-11-11 </span> </dd></dl> <dl class="col-sm-2 site-link"> <dt>好站推荐</dt> <dd><a target="_blank" href="http://www.js-code.com">脚本宝典</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 大佬教程<br> <a href="http://www.miibeian.gov.cn/" rel="nofollow"></a> <span class="ml5">大佬教程 版权所有 <a href="https://www.miitbeian.gov.cn" target="_blank">豫ICP备15014364号-1</a></span> </div> </div> </footer> <script> (function(){ var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7e7b41e04f68f42525f709a1dfb50437"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1281094757'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1281094757%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script> <script src="http://code.js-code.com/template/www/desktop/static/r_js/readmore.js" type="text/javascript"></script> <script> const btw = new BTWPlugin(); btw.init({ id: 'codeContent', blogId: '29457-1651677100115-362', name: 'DearMrGao', qrcode: 'http://code.js-code.com/res/2022/05-04/23/ea106a76a9b6f2bfc9374cb2e57301e4.jpg', keyword: '暗号', }); </script> <script type="text/javascript"> let ad = sessionStorage.getItem('codejdad') if(ad=='y'){ $("#jdad").hide(); }else{ $("#jdad").show(); } $("#jdad").click(function(){ { sessionStorage.setItem('codejdad','y') $("#jdad").hide(); window.open('https://u.jd.com/cM7PKuj'); } }) </script> </body> </html>
这个很讨厌的。
为文本域，里面嵌套的HTML片段会被当做文本域的值。但，文本域本身是可见的，<a href="http://code.js-code.com/tag/yincixu/" target="_blank" class="keywords">因此需</a>要额外的设置display: none;</p><p> <xmp>是个很老很特殊的属性，语义为example，示例。据说后来被<pre>标签取代而废止，实际上，目前，所有的浏览器都是支持的。但是，其跟<pre>标签不能划等号。<pre>里面有个<img>标签，显示的则是一张图片，而<xmp>呈现的就是一段HTML代码。不过，与<textarea>一样，内容不显示的话，还需要额外的设置display: none;</p><p> 上面这个<template>标签上没有设置display: none;，注意到了没有。为何？这只是发挥了<template>标签元素的原本特性，天生display:none，同时模板元素内部内容是死活不会呈现的。因此，无需设置隐藏。这就是HTML5 <template>标签元素特征之一：标签内容隐藏性.</p><h3>2. 标签位置任意性</h3><p>除了上面<template>子元素天然隐藏外，<template>标签<a href="http://code.js-code.com/tag/huanyouyi/" target="_blank" class="keywords">还有一</a>个特性，就是位置任意性，这<a href="http://code.js-code.com/tag/feichangleisi/" target="_blank" class="keywords">非常类似</a><script>或者<style>标签，可以在<head>中，也可以在<body>或者<frameset>中。</p><h3>3. childNodes无效性</h3><p><a href="http://code.js-code.com/tag/sui/" target="_blank" class="keywords">虽</a>然，肉眼看上去是<template>标签里面还有很多子标签，这种惯性思维在这里是不受用的。假设变量template是我们获得的一个<template>标签DOM（里面一大堆HTML代码），你会发现：template.childNodes是个空大屁。我们可以使用template.innerHTML获取完整的HTML片段。如果你非得获取“伪子元素”。也是有办法的，OK，睁大眼睛，要<a href="http://code.js-code.com/tag/shiyongCO/" target="_blank" class="keywords">使用CO</a>ntent属性。</p><p>template.content会返回一个文档片段，你可以理解为另外一个document，然后，使用document下的一些查询API就<a href="http://code.js-code.com/tag/keyihuo/" target="_blank" class="keywords">可以获</a>得<template>标签里面的“伪子元素”了。例如，获得第一张图片元素则是：</p><pre class="brush:js;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">var image_first = template.content.query<a href="http://code.js-code.com/tag/SELE/" target="_blank" class="keywords">SELE</a>ctor("img"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a></pre><h3><strong>三、HTML5 template元素终面</strong></h3><p>您可以狠狠地点击这里：HTML5 template模板元素体验demo</p><h3>模板元素与CSS</h3><p>如果浏览器有眼不识泰山，认为<template>就是个普通的自定义元素，则显示的就会使下面这个样子，<a href="http://code.js-code.com/tag/neibude/" target="_blank" class="keywords">内部的</a>标签按照<a href="http://code.js-code.com/tag/yibande/" target="_blank" class="keywords">一般的</a>标签渲染了。</p><p>如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如Chrome:</p><p><img src="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>s://cn.js-code.com/res/2018/12-29/16/c2b2a7e1f99e0e8f4acadc952973ba3e.png"/></p><p>也就是说，<a href="http://code.js-code.com/tag/sui/" target="_blank" class="keywords">虽</a>然从CSS的角度看，<template>就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。</p><p>默认情况下，<template>是隐藏的，实际是默认其display属性为none. 使用下面的代码一测<a href="http://code.js-code.com/tag/bian/" target="_blank" class="keywords">便</a>知：</p><pre class="brush:js;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">window.getComputedStyle(templat<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>.display;// 结果是"none"</pre><p><p class="pic_center"><p class="pic_center"><img <a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>e="详解HTML5中的<template>标签" alt="详解HTML5中的<template>标签" src="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>s://cn.js-code.com/res/2018/12-29/16/cf6519ee8541c7da3759343e2c992cfe.png"/></p></p></p><p>因此，demo中才设置了如下的CSS声明：</p><pre class="brush:css;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">template <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> display: block; ... }</pre><h3>模板的克隆</h3><p>如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，<template>比<script>强大之处在于，<script>内部内容只能当做字符串来获取，而<template><a href="http://code.js-code.com/tag/sui/" target="_blank" class="keywords">虽</a>然存在于异空间，但是，依然可以节点获取（<a href="http://code.js-code.com/tag/shangmianyou/" target="_blank" class="keywords">上面有</a>展示），以及完整克隆，语法类似下面：</p><pre class="brush:js;toolbar:<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se">var clone = document.importNode(template.content, tru<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>;</pre><p>然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参<a href="http://code.js-code.com/tag/kao/" target="_blank" class="keywords">考</a>文末的参<a href="http://code.js-code.com/tag/kao/" target="_blank" class="keywords">考</a>文章），大家知道有这么回事就好。</p><h3><strong>四、HTML5 template面试小结</strong></h3><p>至此，<template>元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对<template>的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比<hgroup>之类的HTML5元素更受欢迎更受关注也更有潜力。</p><p>临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！</p><h3>兼容性</h3><p><p class="pic_center"><p class="pic_center"><img <a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>e="详解HTML5中的<template>标签" alt="详解HTML5中的<template>标签" src="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>s://cn.js-code.com/res/2018/12-29/16/7a46f8def8943c420c3ecfb87de6d590.png"/></p></p></p> <h2>大佬总结</h2> <p>以上是<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>为你收集整理的<a href="http://code.js-code.com/html5/1181.html" class="article_link" target="_blank">详解HTML5中的<template>标签</a>全部内容，希望文章能够帮你解决<a href="http://code.js-code.com/html5/1181.html" class="article_link" target="_blank">详解HTML5中的<template>标签</a>所遇到的程序开发问题。</p> <p>如果觉得<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>网站内容还不错，欢迎将<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>推荐给程序员好友。</p> <blockquote>本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。<br>如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。</blockquote> </div> <div class="tags text-center clearfix center-block">标签：<a href="http://code.js-code.com/tag/template/" class="tag_link" target="_blank">template</a></div> </div> <div class="panel panel-default"> <ul class="list-group"> <li class="list-group-item"><a href="http://code.js-code.com/html5/1180.html" class="prev" target="_self"> 上一篇: HTML5 Canvas实现玫瑰曲线和心形...</a><a href="http://code.js-code.com/html5/1182.html" class="text-muted pull-right" target="_self"> 下一篇:使用HTML5捕捉音频与视频信息概述...</a></li> </ul> </div> <div class="panel panel-default"> </div> <div class="panel panel-default"> <div class="panel-heading font-weight-bold">猜你在找的HTML5相关文章</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/html5/1177.html" title="详解HTML5表单新增属性">详解HTML5表单新增属性</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1175.html" title="详解HTML5通讯录获取指定多个人的信息">详解HTML5通讯录获取指定多个人的信息</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1184.html" title="html5+css如何实现中间大两头小的轮播效果">html5+css如何实现中间大两头小的轮播效果</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1183.html" title="Html5 Canvas动画基础碰撞检测的实现">Html5 Canvas动画基础碰撞检测的实现</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1182.html" title="使用HTML5捕捉音频与视频信息概述及实例">使用HTML5捕捉音频与视频信息概述及实例</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1181.html" title="详解HTML5中的<template>标签">详解HTML5中的<template>标签</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1180.html" title="HTML5 Canvas实现玫瑰曲线和心形图案的代码实例">HTML5 Canvas实现玫瑰曲线和心形图案的代码实例</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1179.html" title="HTML5应用之文件上传">HTML5应用之文件上传</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1178.html" title="详解HTML5 LocalStorage 本地存储">详解HTML5 LocalStorage 本地存储</a> <span class="text-muted pull-right">2019-10-08</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379014.html" title="MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7">MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7</a> <span class="text-muted pull-right">2022-04-27</span> </li></ul> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="https://www.js-code.com/all" class="font-weight-bold">其他相关热搜词</a><span class="pull-right"><a href="https://www.js-code.com/all">更多</a></span></div> <div class="panel-body list-cloud"><a href="http://code.js-code.com/tag/php/">php</a><a href="http://code.js-code.com/tag/Java/">Java</a><a href="http://code.js-code.com/tag/Python/">Python</a><a href="http://code.js-code.com/tag/chengxuyuan/">程序员</a><a href="http://code.js-code.com/tag/load/">load</a><a href="http://code.js-code.com/tag/zhong/">中</a><a href="http://code.js-code.com/tag/ruhe/">如何</a><a href="http://code.js-code.com/tag/string/">string</a><a href="http://code.js-code.com/tag/shiyong/">使用</a><a href="http://code.js-code.com/tag/canshu/">参数</a><a href="http://code.js-code.com/tag/jquery/">jquery</a><a href="http://code.js-code.com/tag/kaifa/">开发</a><a href="http://code.js-code.com/tag/anzhuang/">安装</a><a href="http://code.js-code.com/tag/list/">list</a><a href="http://code.js-code.com/tag/linux/">linux</a><a href="http://code.js-code.com/tag/ios/">ios</a><a href="http://code.js-code.com/tag/android/">android</a><a href="http://code.js-code.com/tag/gongju/">工具</a><a href="http://code.js-code.com/tag/javascript/">javascript</a><a href="http://code.js-code.com/tag/cap/">cap</a></div> </div> </div> <div class="col-sm-3"> <div style="position:fixed!important;top:334px;height:550px;z-index:9999;"> <div class="_wfhdnfcjs9"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6828100", container: "_wfhdnfcjs9", async: true }); </script> <!-- 多条广告如下脚本只需引入一次 --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">最新HTML5教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/html5/379014.html" title="MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7">MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379013.html" title="ios – NSIndexPath和IndexPath在Swift 3.0中">ios – NSIndexPath和IndexPath在Swift 3.0中</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379012.html" title="如何知道该应用程序在iOS8中具有摄像头访问权限或不能以编程方式">如何知道该应用程序在iOS8中具有摄像头访问权限或不能以编程方式</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379011.html" title="具有许多按钮的Xcode iPad UIActionSheet不能正确显示iOS7">具有许多按钮的Xcode iPad UIActionSheet不能正确显示iOS7</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379010.html" title="ios – WCSession sendMessage：replyHandler错误代码7014(WCErrorCodeDeliveryFailed)">ios – WCSession sendMessage：replyHandler错误代码7014(WCErrorCodeDeliveryFailed...</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379009.html" title="ios – 如何从Core Data中的持久存储中删除所有对象？">ios – 如何从Core Data中的持久存储中删除所有对象？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379008.html" title="ios – 如何控制阴影传播和模糊？">ios – 如何控制阴影传播和模糊？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379007.html" title="iOS：实时摄像机上的实时OCR(类似于iTunes兑换礼品卡)">iOS：实时摄像机上的实时OCR(类似于iTunes兑换礼品卡)</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379006.html" title="更改为iOS6 – ucol_getVersion后,应用程序崩溃">更改为iOS6 – ucol_getVersion后,应用程序崩溃</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379005.html" title="ios – NSUserDefaults initWithSuiteName在删除应用程序后仍然存在">ios – NSUserDefaults initWithSuiteName在删除应用程序后仍然存在</a> </li></ul> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">热门HTML5教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/html5/1184.html" title="html5+css如何实现中间大两头小的轮播效果">html5+css如何实现中间大两头小的轮播效果</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1186.html" title="localStorage的过期时间设置的方法详解">localStorage的过期时间设置的方法详解</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1182.html" title="使用HTML5捕捉音频与视频信息概述及实例">使用HTML5捕捉音频与视频信息概述及实例</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1177.html" title="详解HTML5表单新增属性">详解HTML5表单新增属性</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1175.html" title="详解HTML5通讯录获取指定多个人的信息">详解HTML5通讯录获取指定多个人的信息</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1189.html" title="html5 postMessage前端跨域并前端监听的方法示例">html5 postMessage前端跨域并前端监听的方法示例</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1188.html" title="canvas压缩图片以及卡片制作的方法示例">canvas压缩图片以及卡片制作的方法示例</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/1183.html" title="Html5 Canvas动画基础碰撞检测的实现">Html5 Canvas动画基础碰撞检测的实现</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379014.html" title="MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7">MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/html5/379013.html" title="ios – NSIndexPath和IndexPath在Swift 3.0中">ios – NSIndexPath和IndexPath在Swift 3.0中</a> </li></ul> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-4 site-link"> <dt>最近更新</dt><dd> <a href="http://code.js-code.com/chengxubiji/919675.html" title="Linux——（1）基本命令">Linux——（1）基本命令</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919674.html" title="【UNIAPP】上传视频，进度条的前台与后端">【UNIAPP】上传视频，进度条的前...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919673.html" title="You can't specify target table 'xxx' for update in FROM clause的解决">You can't specify target t...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919672.html" title="jmeter压测，将jmeter返回数据，保存到表格">jmeter压测，将jmeter返回数据，...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919671.html" title="经典区间dp 【方块消除】">经典区间dp 【方块消除】</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919670.html" title="java-day02">java-day02</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919669.html" title="【异常】 'ascii' codec can't decode byte 0xe8 in position 2: ordinal not in range(128)">【异常】 'ascii' cod...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919668.html" title="Django后台admin常用设置">Django后台admin常用设置</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919667.html" title="docker安装nacos单机版（无数据库）">docker安装nacos单机版（无数据库...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919666.html" title="Intel® RealSense™ LiDAR camera L515使用体验">Intel® RealSense!...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd></dl> <dl class="col-sm-4 site-link"> <dt>热门文章</dt><dd> <a href="http://code.js-code.com/php/8105.html" title="php实现mysql数据库分表分段备份">php实现mysql数据库分表分段备份</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/9790.html" title="php基于base64解码图片与加密图片还原实例">php基于base64解码图片与加密图片...</a> <span class="text-muted pull-right">2019-11-13 </span> </dd><dd> <a href="http://code.js-code.com/php/6138.html" title="自定义min版smarty模板引擎MinSmarty.class.php文件及用法">自定义min版smarty模板引擎MinSm...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/6073.html" title="php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例">php自定义中文字符串截取函数sub...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/4608.html" title="PHP使用preg_split()分割特殊字符(元字符等)的方法分析">PHP使用preg_split()分割特殊字符...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4416.html" title="PHP利用正则表达式将相对路径转成绝对路径的方法示例">PHP利用正则表达式将相对路径转成...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4124.html" title="PHP删除二维数组中相同元素及数组重复值的方法示例">PHP删除二维数组中相同元素及数组...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4079.html" title="php对xml文件的增删改查操作实现方法分析">php对xml文件的增删改查操作实现...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4028.html" title="PHP判断密码强度的方法详解">PHP判断密码强度的方法详解</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/3899.html" title="PHP简单计算两个时间差的方法示例">PHP简单计算两个时间差的方法示例</a> <span class="text-muted pull-right">2019-11-11 </span> </dd></dl> <dl class="col-sm-2 site-link"> <dt>好站推荐</dt> <dd><a target="_blank" href="http://www.js-code.com">脚本宝典</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 大佬教程<br> <a href="http://www.miibeian.gov.cn/" rel="nofollow"></a> <span class="ml5">大佬教程 版权所有 <a href="https://www.miitbeian.gov.cn" target="_blank">豫ICP备15014364号-1</a></span> </div> </div> </footer> <script> (function(){ var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7e7b41e04f68f42525f709a1dfb50437"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1281094757'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1281094757%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script> <script src="http://code.js-code.com/template/www/desktop/static/r_js/readmore.js" type="text/javascript"></script> <script> const btw = new BTWPlugin(); btw.init({ id: 'codeContent', blogId: '29457-1651677100115-362', name: 'DearMrGao', qrcode: 'http://code.js-code.com/res/2022/05-04/23/ea106a76a9b6f2bfc9374cb2e57301e4.jpg', keyword: '暗号', }); </script> <script type="text/javascript"> let ad = sessionStorage.getItem('codejdad') if(ad=='y'){ $("#jdad").hide(); }else{ $("#jdad").show(); } $("#jdad").click(function(){ { sessionStorage.setItem('codejdad','y') $("#jdad").hide(); window.open('https://u.jd.com/cM7PKuj'); } }) </script> </body> </html>
