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. C语言编程入门题目--No.12

    题目:判断101-200之间有多少个素数,并输出所有素数. 1.程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除, 则表明此数不是素数,反之是素数. 2.程序源代码: # ...

  2. 数学--数论--HDU6919 Senior PanⅡ【2017多校第九场】

    Description 给出一个区间[L,R][L,R],问该区间中所有以KK作为最小因子(大于11的)的数字之和 Input 第一行输入一整数TT表示用例组数,每组用例输入三个整数L,R,KL,R, ...

  3. codeforce 272E Dima and Horses （假DFS）

    E. Dima and Horses Dima came to the horse land. There are n horses living in the land. Each horse in ...

  4. P2480 [SDOI2010]古代猪文

    P2480 [SDOI2010]古代猪文 比较综合的一题 前置:Lucas 定理,crt 求的是: \[g^x\bmod 999911659,\text{其中}x=\sum_{d\mid n}\tbi ...

  5. OSG程序设计之osg::NodeVisitor

    本文所有内容来自<OpenSceneGraph三维渲染引擎设计与实践>一书. 本文主要讨论的是OSG中节点的访问. 对于节点的访问是从节点接收一个访问器开始的,用户执行某个节点的accep ...

  6. centos8-django项目部署 nginx+uwsgi

    1.虚拟环境virtualenv安装 1.安装virtualenv pip3 install virtualenv 2.创建目录,把项目文件传过来 mkdir My cd My 3.创建独立运行环境- ...

  7. Navicat12.1系列安装，破解以及破解navicat报错的解决方案

    由于上课的需要,我们必须自己下载并安装 Navicat Premium 12,虽然安装过程很简单,但是安装后的navicat只能试用,并没有永久激活,然而我还想永久使用,所以就各种百度,因为不断地遇到 ...

  8. html之表单元素form

    表单元素form \(都是嵌套input标签来实现,其中type属性选择不同则不同\) \(text:文本内容(输入内容可见)\) \(password:密码(输入内容不可见)\) \(submit: ...

  9. 大富翁 线段树+二分 +dfs

    https://csustacm.fun/problem/2033 这个题目还是比较简单的,但是比赛的时候没有像清楚,用了一个不太熟悉的数据结构主席树, 所以出现了bug,主席树的bug是真的难找. ...

  10. leetCode刷题 | 两数之和

    两数之和: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数 ...