首页 > 编程 > HTML > 正文

详解HTML5中的<template>标签

2019-10-26 17:42:07
字体:
来源:转载
供稿:网友

一、HTML5 template元素初面

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

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

XML/HTML Code复制内容到剪贴板
  1. <script type="text/template">   // ...   
  2. </script>  

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <script type="text/template">   <img src="mm1.jpg">  
  2. </script>     
  3. <textarea style="display: none;">   <img src="mm1.jpg">  
  4. </textarea>     
  5. <xmp style="display: none;">   <img src="mm1.jpg">  
  6. </xmp>     
  7. <template>   <img src="mm1.jpg">  
  8. </template>  

1. 标签内容隐藏性

    <script>本身的特定,让内部的HTML标签是按照字符串处理的,因此,天生内容不显示。但是,在DreamWeaver中,这种写法有个很大的问题,就是在script中书写模板HTML时候,标签自动闭合的永远是</script>这个很讨厌的。
    <textarea>为文本域,里面嵌套的HTML片段会被当做文本域的值。但,文本域本身是可见的,因此需要额外的设置display: none;
    <xmp>是个很老很特殊的属性,语义为example,示例。据说后来被<pre>标签取代而废止,实际上,目前,所有的浏览器都是支持的。但是,其跟<pre>标签不能划等号。<pre>里面有个<img>标签,显示的则是一张图片,而<xmp>呈现的就是一段HTML代码。不过,与<textarea>一样,内容不显示的话,还需要额外的设置display: none;

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表