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. INTERVIEW #1

    一.数据对齐存储 在32位系统中:int占4Bytes,short占2Bytes,char占1Byte,加起来应该是7Bytes,但是下面这段代码输出却是8. #define _CRT_SECURE_ ...

  2. Codeforces Round #618 (Div. 2)-Non-zero

    Guy-Manuel and Thomas have an array a of n integers [a1,a2,-,an]. In one step they can add 1 to any ...

  3. 顺序表的C语言实现

    在现实应用中,有两种实现线性表数据元素存储功能的方法,分别是顺序存储结构和链式存储结构.顺序表操作是最简单的操作线性表的方法.下面的代码实现了顺序表的几种简单的操作.代码如下 //start from ...

  4. Dubbo（六）：zookeeper注册中心的应用

    Dubbo中有一个非常本质和重要的功能,那就是服务的自动注册与发现,而这个功能是通过注册中心来实现的.而dubbo中考虑了外部许多的注册组件的实现,zk,redis,etcd,consul,eurek ...

  5. 如何 Laravel 中验证 zip 压缩包里的文件？

    在 Laravel 程序中上传文件时,请求验证可以很好验证上传的文件.你可以要求上传文件必须为 图片 , 也可以限制文件字节 大小 , 也可以根据 mime types 或者 文件扩展名 过滤文件. ...

  6. F. Cards and Joy

    F. Cards and Joy 题目大意: 给你n个人,每一个人恰好选k张牌. 第一行是 n 和 k 第二行有n*k个数,代表有n*k张牌,每张牌上的数字 第三行有n个数,代表第i个人喜欢的数字 第 ...

  7. crontab自动启动小任务例子(每一分钟将当前日期打入一个文件)

      crontab -l #查看当前定时任务列表 显示没有,那么我们来安装一下(必须在root用户下) – yum install vixie-cron  – yum install crontabs ...

  8. 给大家发个Python和Django的福利吧，不要钱的那种~~~

    前言一: 这篇是一个发放福利的文章,但是发放之前,我还是想跟大家聊聊我为什么要发这样的福利. 我第一份工作是做的IT桌面支持,日常工作就是给同事修修电脑.装装软件.开通账号.维护内部系统之类的基础工作 ...

  9. YOLOV4在linux下训练自己数据集（亲测成功）

    最近推出了yolo-v4我也准备试着跑跑实验看看效果,看看大神的最新操作 这里不做打标签工作和配置cuda工作,需要的可以分别百度搜索   VOC格式数据集制作,cuda和cudnn配置 我们直接利用 ...

  10. Mysql常用sql语句（21）- regexp 正则表达式查询

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 正则的强大不言而喻,Mysql中也提供了 reg ...