HTML5中<template>标签的详细介绍

最新推荐文章于 2024-08-14 18:50:50 发布

weixin_30875157

最新推荐文章于 2024-08-14 18:50:50 发布

阅读量938

点赞数

文章标签：面试前端测试 ViewUI

原文链接：http://www.cnblogs.com/hanguidong/p/9381317.html

版权

本文详细介绍了HTML5中的<template>标签，它用于声明模板元素，提供了一种标准化的HTML模板方式。<template>标签内容天生隐藏且位置任意，其内部内容不会被解析或显示，需通过特定方式获取。文章探讨了<template>的childNodes无效性、CSS渲染特点以及与其它标签的对比，同时提及了其在不同浏览器的兼容性情况。

摘要由CSDN通过智能技术生成

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

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

一、HTML5 template元素初面

<template>元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是“模板元素”。

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

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

实际上，并不存在type="text/template"这样的标准写法，<template>元素的出现旨在让HTML模板HTML变得更加标准与规范。

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

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