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. VMware15.5.0安装MacOS10.15.0系统 安装步骤（下）

    VMware15.5.0安装MacOS10.15.0系统安装步骤(下)超详细! 接上文第5条如果没看过上篇的话传送门:https://www.cnblogs.com/Top-chen/p/128024 ...

  2. dp 20190617

    A. Alternative Thinking 这个标的是dp,但是我感觉就只能算思维题,不是特别难, 你仔细想想就知道,你先求出01这样子满足条件的个数,如果要进行改变,最多只可以增加两个,也可以增 ...

  3. 在web中使用shiro（会话管理，登出，shiro标签库的使用）

    在shiro的主配置文件中配置,登出的请求经过的过滤器就可以了,在shiro的过滤器中有一个名称为logout的过滤 器专门为我们处理登出请求: 一.shiro会话管理器 shiro中也提供了类似于w ...

  4. 送你一份Redis书单，以后使用缓存的问题不用再问我啦！

    点击蓝色"程序员书单"关注我哟 加个"星标",每天带你读好书!

  5. 2018面向对象程序设计（Java）学习进度条

    周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课堂/课余学习时间(小时) 最满意的编程任务 第一周 200/30 1/0 6/3 九九乘法表 第二周 200/30 1/0 4/3 实验2 ...

  6. Web前端基础第一天

    Web标准的构成 结构:结构对于网页元素进行整理和分类,现阶段主要学的是html 表现:表现用于设置元素的板式.颜色.大小等外观样式,主要指的是CSS 行为:行为是指网页模型的定义及交互的编写,现阶段 ...

  7. 近期总结的一些Java基础

    1.面向过程:当需要实现一个功能的时候,每一个过程中的详细步骤和细节都要亲力亲为. 2.面向对象:当需要实现一个功能的时候,不关心详细的步骤细节,而是找人帮我做事. 3.类和对象的关系:   a-类是 ...

  8. ReentrantLock源码解析

    ReentrantLock 1 数据结构 从上图可以看出,ReentrantLock的功能都是通过sync这个对象提供的. public class ReentrantLock implements ...

  9. 【Spark】如何用Spark查询IP地址？

    文章目录 需求 思路 ip地址转换为Long类型的两种方法 ip地址转换数字地址的原理 第一种方法 第二种方法 步骤 一.在mysql创建数据库表 二.开发代码 需求 日常生活中,当我们打开地图时,会 ...

  10. Qt 视频播放器

    #include <phonon/VideoPlayer> #include <phonon/SeekSlider> #include <phonon/MediaObje ...