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. vue无法自动打开浏览器

    原文链接: 点我 如果不能自动打开浏览器,是因为没有安装插件. 插件安装的方法1.安装插件,在cmd中输入: $ npm i open-browser-webpack-plugin --save这里的 ...

  2. HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）

    我要正经的讲一节课,咳咳! HTML简介(废话) HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签．通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整 ...

  3. 图论--网络流--最小割 HDU 2485 Destroying the bus stations（最短路+限流建图）

    Problem Description Gabiluso is one of the greatest spies in his country. Now he's trying to complet ...

  4. The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 B so easy

    题目链接:https://nanti.jisuanke.com/t/41384 这题暴力能过,我用的是并查集的思想,这个题的数据是为暴力设置的,所以暴力挺快的,但是当他转移的点多了之后,我觉得还是我这 ...

  5. 基于TCP的客户端和服务器端的代码设计

    实验平台 linux 实验内容 编写TCP服务器和客户端程序,程序运行时服务器等待客户端连接.一旦连接成功,服务器显示客户端的IP地址和端口号,并向客户端发送字符串 实验原理 TCP是面向连接的通信, ...

  6. Nginx模块开发（2）————下载文件

    Nginx的HTTP模块下载文件和传送缓冲区的字符串差不多,只需将文件标志置为1即可,我转送的文件是mp3的,所以HTTP的那个mine 类型要写为audio/mp3,二话不说了,贴代码,代码和之前那 ...

  7. [LiDAR数据模拟]系列(1) HELIOS模拟平台介绍

    关键词:LiDAR 激光雷达 点云模拟 作者:李二 日期:06/05/2020 - 07/05/2020 写在前面:我前段时间的一个工作(地基激光雷达TLS的新型布站策略)需要用到模拟的TLS点云数据 ...

  8. P2308 添加括号(dfs记录dp路径)

    传送门 \(一看肯定是区间DP(因为和和合并石子很相似,都要加n-1次)\) \(转移方程为(其中he[i][j]是i到j的和)\) \[dp[i][j]=min(dp[i][j],dp[i][k]+ ...

  9. 004_Python的列表切片,增删改查,常用操作方法,元组,range,join

    列表 列表是Python中的基础数据类型之一,它是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = ['kevin',123,True,(1,2,3,'wusir'), ...

  10. git使用-忽略文件更新的几种方法

    有几种情况我们不希望本地文件在 git 里面得到更新. 一.情况:始终不需要git跟踪本地的一些文件 方法:使用.gitignore文件忽略 解释: 使用git init操作创建git控制管理之后,默 ...