template标签介绍和使用

1.介绍：template标签是html5新出来的标签，具有3个特点，（1）随意性：可以写在页面中的任何地方、（2）不可见性：它里面的元素都是不可见的、（3）页面也不会渲染它

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

    <-- 定义模板和内容，可以定义在任何地方 -->

  <template id="temp">

    <div>你好模板</div>

  </template>

</head>

<body>

  <div id="root"></div>

</body>

<script>

    <!-- 通过js来动态渲染该模板中的内容  -->

  const fragment = document.getElementById('temp').content.cloneNode(true)

  document.getElementById('root').appendChild(fragment)

</script>

</html>

template标签介绍和使用的更多相关文章

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

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

  2. vue学习之template标签

    HTML5提供的新标签,具有以下特性: 1.该元素天生display:none,同时模板元素内部内容也是隐藏的 2.位置任意,可以在<head>中,也可以在<body>或者&l ...

  3. HTML5 <template>标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...

  4. 还在拼字符串？试试HTML5的template标签

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

  5. java web学习总结(二十七) -------------------JSP标签介绍

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  6. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  7. Vue中的template标签的使用和在template标签上使用v-for

    我们知道  .vue 文件的基本结构是: <template> ........ </template> <script> export default { nam ...

  8. 一、JSP标签介绍,自定义标签

    一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...

  9. 前端入门html（标签介绍）

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质 示例 import socket sk = socket.socke ...

随机推荐

  1. Vim Install-Could not get lock......

    在Ubuntu下安装Vim编辑器时,出现错误: 可能原因: 上次安装或更新没有正常完成,导致资源被锁. 解决方案: 删除异常资源,重新下载: 注意 删除异常资源时,一定要切换到root用户,否则操作无 ...

  2. 难道你现在还不知道：C/S和B/S

    随着网络技术的不断发展,各种各样的网络应用程序大爆发.运用最多的架构是基于浏览器+服务器的B/S结构,另一种是基于的 C/S结构. 概述: BS = Browser / Server =浏览器+服务器 ...

  3. 图论--网络流--费用流POJ 2195 Going Home

    Description On a grid map there are n little men and n houses. In each unit time, every little man c ...

  4. 老师，你确定Java注释不会被执行吗？

    之前在博客上分享过一篇文章,涉及到 Java 中的注释,就信誓旦旦地写了一句话:"注释是不会被执行的!"结果,有小伙伴留言说,"老师,你确定吗?" 我这个人一直 ...

  5. uiautomatorviewer 出现安卓8.0级以上无法打开的解决方法

    一..本人在使用Android自带的uiautomatorviewer工具来进行app元素定位时,出现了Android 9.0打开不了.出现了如下图错误提示: 经过网上的查阅,总结了几个解决的方法. ...

  6. 清北学堂—2020.3NOIP数学精讲营—Day 1 morning 重点笔记

    qbxt Day 1 morning 重点笔记 --2020.3.8 济南 主讲:钟皓曦 1 正数%负数==正数 负数%正数==负数 负数%负数==负数 a%b的答案的符号取决于a的符号. 2 快速幂 ...

  7. AIDL原理分析

    季春初始,天气返暖,新冠渐去,正值学习好时机.在Android系统中,AIDL一直在Framework和应用层上扮演着很重要的角色,今日且将其原理简单分析.(文2020.03.30) 一.开篇介绍 1 ...

  8. HDU-6030 Happy Necklace 打表+矩阵快速幂

    Happy Necklace 前天个人赛规律都找出来了,n的范围是\(10^{18}\),我一想GG,肯定是矩阵快速幂,然后就放弃了. 昨天学了一下矩阵快速幂. 题意 现在小Q要为他的女朋友一个有n个 ...

  9. python3语法学习第五天--函数（1）

    函数:函数能提高应用的模块性,和代码的重复利用率,是一段可重复使用的代码块 自定义函数: 1.函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). 2.任何传入参数和自变量必须放在圆括 ...

  10. [hdu5439 Aggregated Counting]公式化简，预处理

    题意:按下列规则生成一组序列,令f(n)为n这个数在序列中出现的最后一个位置,求f(f(n))的值. 1. First, write down 1, 2 on a paper.2. The 2nd n ...