文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

首页 > web前端 > H5教程 > 正文

HTML5中<template>标签的详细介绍（图文）

黄舟

发布： 2018-05-15 15:46:21

原创

15388人浏览过

这篇文章主要介绍了html5中的template标签,是html5入门中的重要知识,需要的朋友可以参考下

一、HTML5 template元素初面

目前，我们在HTML中嵌入模板HTML，往往是类似这样的写法：

<script type="text/template">
// ...   
</script>

登录后复制

实际上，并不存在type="text/template"这样的标准写法，

立即学习“前端免费学习笔记（深入）”；

以前，我们可能还使用过或者<xmp>(废止但依然可用)嵌套非转义的<a href="http://www.php.cn/code/427.html" target="_blank">HTML标签</a>代码，实现一些特定的前端功能，但，同样的，跟上面的流行用法一样，都是不规范的。从未来趋势来讲，显然<template>标签才是王道。但是，兼容性是个不可忽略的问题，因此，就算扯得很多很少，实际价值有有限，因此，这里仅仅简单介绍下。<br><strong>二、HTML5 template元素复面</strong></template></xmp>

看下下面四种嵌套图片HTML，同时图片内容不显示，不会有请求的写法：

<script type="text/template">
@@##@@
</script>
<textarea style="display: none;">
@@##@@
</textarea>
<xmp style="display: none;">
@@##@@
</xmp>
<template>
@@##@@
</template>

登录后复制

1. 标签内容隐藏性

<script>本身的特定，让内部的HTML标签是按照<a href="http://www.php.cn/wiki/57.html" target="_blank">字符串处理的，因此，天生内容不显示。但是，在DreamWeaver中，这种写法有个很大的问题，就是在script中书写模板HTML时候，标签自动闭合的永远是</script>这个很讨厌的。
为文本域，里面嵌套的HTML片段会被当做文本域的值。但，文本域本身是可见的，因此需要额外的设置display: none;<br> <xmp>是个很老很特殊的<a href="http://www.php.cn/wiki/169.html" target="_blank">属性</a>，语义为example，示例。据说后来被<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">标签取代而废止，实际上，目前，所有的浏览器都是支持的。但是，其跟<pre class="brush:php;toolbar:false">标签不能划等号。<pre class="brush:php;toolbar:false">里面有个@@##@@标签，显示的则是一张图片，而<xmp>呈现的就是一段HTML代码。不过，与<textarea>一样，内容不显示的话，还需要额外的设置display: none;<br/> 上面这个<template>标签上没有设置display: none;，注意到了没有。为何？这只是发挥了<template>标签元素的原本特性，天生display:none，同时模板元素内部内容是死活不会呈现的。因此，无需设置隐藏。这就是HTML5 <template>标签元素特征之一：标签内容隐藏性.</p><p><strong>2. 标签位置任意性<br/></strong>除了上面<template>子元素天然隐藏外，<template>标签还有一个特性，就是位置任意性，这非常类似<script>或者<style>标签，可以在<<a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a>>中，也可以在<body>或者<frameset>中。</p><p><strong>3. childNodes无效性<br/></strong>虽然，肉眼看上去是<template>标签里面还有很多子标签，这种惯性思维在这里是不受用的。假设<a href="http://www.php.cn/wiki/70.html" target="_blank">变量</a>template是我们获得的一个<template>标签DOM（里面一大堆HTML代码），你会发现：template.childNodes是个空大屁。我们可以使用template.innerHTML获取完整的HTML片段。如果你非得获取“伪子元素”。也是有办法的，OK，睁大眼睛，要使用content属性。</p><p>template.content会返回一个文档片段，你可以理解为另外一个document，然后，使用document下的一些查询API就可以获得<template>标签里面的“伪子元素”了。例如，获得第一张图片元素则是：</p><p class="codeHead"><span class="lantxt">CSS Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p><pre class="brush:html;toolbar:false">var image_first = template.content.querySelector("img");</pre><div class="contentsignin">登录后复制</div></div><ol class="dp-css list-paddingleft-2"> <strong>三、HTML5 template元素终面</strong><br> </ol> <p>您可以狠狠地点击这里：HTML5 template模板元素体验demo</p> <p><strong>模板元素与CSS<br></strong>如果浏览器有眼不识泰山，认为<template>就是个普通的自定义元素，则显示的就会使下面这个样子，内部的标签按照一般的标签渲染了。</template></p> <p>如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如<a href="http://www.php.cn/wiki/1332.html" target="_blank">Chr</a>ome:<br><img alt="HTML5中<template>标签的详细介绍（图文）" ></p> <p>也就是说，虽然从CSS的角度看，<template>就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。</template></p> <p>默认情况下，<template>是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：</template></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">window.getComputedStyle(template).display; // 结果是"none"</pre><div class="contentsignin">登录后复制</div></div><p><img alt="HTML5中<template>标签的详细介绍（图文）" ><br></p> <p>因此，demo中才设置了如下的CSS声明：</p> <p class="codeHead"><span class="lantxt">CSS Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">template { display: block; ... }</pre><div class="contentsignin">登录后复制</div></div><ol class="dp-css list-paddingleft-2"> <strong>模板的克隆<br></strong><li><p>如果你是在HTML字符串上处理，类似于现在流行的<a href="http://www.php.cn/wiki/1536.html" target="_blank">MVC</a><a href="http://www.php.cn/css/css-rwd-frameworks.html" target="_blank">框架</a>或<a href="http://www.php.cn/code/12248.html" target="_blank">模板技术</a>，则template.innerHTML足矣。然，<template>比<script>强大之处在于，<script>内部内容只能当做字符串来获取，而<template>虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：</script></template></p></li> </ol> <p class="codeHead"><span class="lantxt">CSS Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">var clone = document.importNode(template.content, true);</pre><div class="contentsignin">登录后复制</div></div><ol class="dp-css list-paddingleft-2"> <li><p>然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。</p></li> <strong>四、HTML5 template面试小结</strong><br> </ol> <p>至此，<template>元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对<template>的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比<hgroup>之类的HTML5元素更受欢迎更受关注也更有潜力。</hgroup></template></template></p> <p>临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！</p> <p><strong>兼容性<br></strong><img alt="HTML5中<template>标签的详细介绍（图文）" ></p> <img alt="HTML5中<template>标签的详细介绍（图文）" ><img alt="HTML5中<template>标签的详细介绍（图文）" ><img src="http://files.jb51.net/file_images/article/201506/2015619175843048.png?2015519175852" alt="HTML5中<template>标签的详细介绍（图文）" ><img src="http://files.jb51.net/file_images/article/201506/2015619175903356.png?2015519175912" alt="HTML5中<template>标签的详细介绍（图文）" ><img src="http://files.jb51.net/file_images/article/201506/2015619175925620.png?2015519175933" alt="HTML5中<template>标签的详细介绍（图文）" ></xmp>

以上就是HTML5中<template>标签的详细介绍（图文）的详细内容，更多请关注php中文网其它相关文章！

HTML速学教程(入门课程)

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：HTML5应用之文件上传的详细介绍下一篇：Html5上传图片移动端、PC端的通用代码分享

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

jQuery中关于bind()函数详解

1970-01-01 08:00:00
php实现字符串匹配算法之sunday算法的示例

2023-03-17 20:02:01
css中关于hideFocus的使用详解

1970-01-01 08:00:00
JavaScript中filter函数的详细介绍

1970-01-01 08:00:00
MySQL实现查看与创建以及删除索引的方法介绍

1970-01-01 08:00:00
php使用指针进行函数操作的实例分析

2023-03-17 19:54:01
JavaScript实现字符串转换成数字的三种方法介绍

1970-01-01 08:00:00
MySQL中explain的使用以及性能分析

1970-01-01 08:00:00
JavaScript中split函数由浅到深的使用介绍

1970-01-01 08:00:00
详解SQL中distinct的使用方法

1970-01-01 08:00:00

最新问题

H5页面如何实现响应式布局设计响应式布局的完整实现指南 H5页面实现响应式布局需从视口设置、弹性布局、媒体查询和相对单位入手。1.设置视口：在HTMLhead中加入，确保浏览器使用设备真实宽度渲染页面；2.使用Flexbox和Grid布局：Flexbox适合一维布局如导航栏，Grid适用于二维复杂布局如卡片式界面，并建议使用flex-wrap、gap属性及统一对齐方式；3.应用媒体查询：通过检测屏幕宽度为不同设备应用样式，常见断点为手机小于768px、平板768px-1024px、桌面大于1024px，遵循移动优先原则；4.采用相对单位：使用rem（

2025-07-01 12:17:01

859

H5页面制作中如何集成支付接口支付功能接入全流程解析要在H5页面集成支付接口，首先要选择合适的支付渠道并配置好前后端交互流程，同时确保安全性。一、根据业务类型和用户习惯选择支付方式，如微信支付适用于微信生态内，支付宝适合PC或非微信环境，银联云闪付等则按行业需求灵活选用；二、准备开发环境和资质材料，包括注册商户账号、提交资料审核、获取API密钥与商户号、配置域名白名单及下载SDK；三、前端触发支付流程，点击按钮后跳转至支付页面，注意微信H5支付需通过指定协议头唤起；四、后端生成签名并调用统一下单接口，接收订单信息后传递必要参数并生成加密后的支付链

2025-06-30 11:40:02

868

H5页面制作中如何设计自适应按钮按钮自适应设计的黄金法则 H5页面中实现按钮自适应需从多个角度综合设计。1.使用相对单位控制按钮大小：宽高、字体、边距等使用rem、em、vw或%，实现按钮在不同分辨率下的比例协调；2.设置最小/最大宽度防止变形：如min-width:100px;max-width:300px;避免按钮过窄或过宽影响可读性；3.文字与按钮高度的适配技巧：通过line-height和height配合确保文字垂直居中，建议按钮高度在44px到60px之间，图标与文字留出足够间距；4.触控区域也要“看得见”：点击区域不小于44x44px，可通

2025-06-29 10:05:01

269

H5页面如何实现离线访问功能 Service Worker实现离线应用指南 H5页面实现离线访问的关键在于使用ServiceWorker技术。它是一种运行在浏览器后台的脚本，能够拦截网络请求、缓存资源并控制页面加载行为。核心能力包括网络请求拦截、资源缓存与更新、推送消息和后台同步。要实现离线访问，需完成以下步骤：1.注册ServiceWorker，通过navigator.serviceWorker.register注册sw.js脚本；2.编写sw.js文件，在install事件中缓存关键资源；3.在fetch事件中拦截请求，优先从缓存中返回内容。注意事项包括：需HTTP

2025-06-28 13:30:02

563

H5页面制作中如何嵌入视频播放器主流视频播放器集成方法大全在H5页面中嵌入视频播放器的方法包括使用video.js、DPlayer或云厂商播放器。1.使用video.js时需引入库和样式，添加video标签并初始化实例，支持HLS需加载插件；2.DPlayer适合互动场景，通过容器初始化并配置视频和弹幕参数；3.腾讯云或阿里云播放器适合企业级应用，引入SDK后调用构造函数并传入配置；注意事项包括处理移动端自动播放限制、视频格式适配、启用懒加载与合理设置预加载策略以优化性能。

2025-06-27 08:32:05

890

H5页面如何实现二维码生成与识别二维码功能完整实现教程 H5页面中可通过引入第三方库实现二维码生成与识别。一、生成二维码推荐使用qrcode.js，步骤包括：1.引入库文件；2.创建DOM容器；3.调用方法传入内容和参数，可调整颜色、尺寸等，并支持下载保存。二、识别二维码常用jsQR或QuaggaJS，流程为：1.添加video元素并调用摄像头；2.将视频帧绘制到canvas；3.使用jsQR解析图像数据获取结果。需注意浏览器兼容性及HTTPS环境要求。三、常见应用场景包括扫码登录、支付入口等，建议用户触发操作、优化画面清晰度，企业级应用可考虑后端处

2025-06-26 15:50:02

953

H5页面制作中如何添加页面访问统计访问数据统计接入指南添加H5页面访问统计的核心是接入合适的统计代码或SDK，具体步骤如下：1.选择适合项目的统计工具，如百度统计（国内友好）、GoogleAnalytics（国际通用）、友盟+（移动端适配）、GrowingIO（无埋点）；2.将统计平台提供的JavaScript代码嵌入页面的或中，或在前端框架中使用封装组件确保路由切换时仍能触发统计；3.可选设置自定义事件追踪用户行为，如按钮点击、表单提交等，并通过开发者工具验证统计是否生效。正确部署后需检查请求、缓存、冲突及事件格式等问题以确保数据准确采集和分析。

2025-06-25 17:18:02

819

H5页面制作中如何优化动画流畅度 60FPS流畅动画实现秘诀要实现H5页面60FPS流畅动画，关键在于优化渲染、控制复杂度和合理使用API。一、减少重绘重排，优先使用transform和opacity属性，并通过will-change或translateZ(0)启用硬件加速；二、用requestAnimationFrame代替setTimeout/setInterval，保持与屏幕刷新同步，复杂计算移至WebWorker；三、控制并发动画数量，建议不超过3~5个，动效复杂时降级处理，结合懒加载和IntersectionObserver优化触发时机；四、使

2025-06-24 13:21:02

353

H5页面如何实现下拉刷新功能下拉刷新功能完整实现教程实现H5页面下拉刷新功能的核心在于监听触摸事件并判断下拉距离，具体步骤如下：1.监听touchstart、touchmove和touchend三个事件，记录起始位置和移动距离，若下拉超过设定阈值（如100px），则触发刷新逻辑；2.添加视觉反馈区域，通过动态调整样式提示用户正在下拉操作；3.在判断满足刷新条件时执行数据请求，并更新界面状态，防止重复触发，同时刷新完成后恢复提示区域；4.可选使用第三方库如Pulltorefresh.js或better-scroll简化开发流程。通过上述方法可实现一

2025-06-23 12:40:02

557

H5页面如何实现本地缓存功能本地存储技术让H5应用更流畅 H5页面实现本地缓存主要依赖浏览器提供的本地存储技术，包括localStorage、sessionStorage和IndexedDB。1.localStorage用于长期保存静态数据，适合存储不常变化的信息如用户设置，最大存储约5MB，数据不会随页面关闭清除；2.sessionStorage用于临时缓存，生命周期仅限当前会话，适用于多步骤表单中的中间状态保存；3.IndexedDB适用于复杂结构化数据的存储和查询，支持索引和增删改查操作，适合大量数据场景；4.缓存策略建议根据数据时效性决定是否缓

2025-06-22 14:33:02

744

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

ThinkPHP5快速开发企业站点[全程实录]

400282次学习
收藏
PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

52062次学习
收藏
Thinkphp3.2.3个人博客开发

213068次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部