整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。
<!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",
这是因为template标签天生不可见-->
<template>
<div>我是template</div>
</template>
<abc>我是自定义表现abc</abc>.vue 文件的基本结构如下：
<template>
........
</template>
<script>
export default {
name: "demo"
}
</script>
<style scoped>
.demo {
font-size: 28px;
}
</style> 上面template标签是用来写 html 模板的，且内部必须只有一个根元素，像下面这样（不然IDE会报错）
<template>
<div class="demo">
.....
</div>
</template>但有时候我们也会看到，在template上使用for循环：
<template>
<div class="root">
<!--在template上使用for循环-->
<template v-for="item,index in 5">
<div>{{index}}---{{item}}</div>
</template>
</div>
</template>下面我们一起通过浏览器dom渲染结果来看一下template是什么:
<template>
<div class="root">
<template>看看外面的标签是什么</template>
</div>
</template>在浏览器中解析完的结果：
可以看到文字外面是 div.root 所以本质上的<template>标签并没有什么意义。template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template并不会被渲染到页面上.
我们继续看一下刚才的循环：
<template>
<div class="root">
<template v-for="(item,index) in 5">
<div>测试{{index}}</div>
</template>
</div>
</template>浏览器解析后的效果：
不使用template，我们也可以这样写：
<template>
<div class="root">
<div v-for="item,index in 5">
<div>测试{{index}}</div>
</div>
</div>
</template>但是这样循环出来会多出一层div来。
当我们不需要这外层的 div的时候，我们可以采用上面的方法，在 <template>标签上使用 v-for来循环。或者这样写：
<template>
<div class="root">
<div v-for="item,index in 5" :key="index">测试{{index}}</div>
</div>
</template>vue实例绑定元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。
TML5 元素有多种维度展示方式，常见以下：
根元素
参考文献：
前话
Hello，小伙伴们大家新年好，本篇是今年第一篇，也筹划许久，本篇主题为美食，系html5网站模板，div加css布局，网页资源分开存储以便管理，网页结构清晰简单，希望本篇能够助力各位萌新
主题
《周末の食记》
美食能抚平一切的忧伤
简介
文件结构包含了css、fonts、images、js和html，运用html5技术，包括nav标签、header标签和footer标签等，采用bootstrap进行布局
图摘
目录
编码
<div class="ftco-46-row d-flex flex-column flex-lg-row">
<div class="ftco-46-text ftco-46-arrow-right">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">扬州炒饭</h3>
<p class="mb-5">一碗不一样的炒饭，让你难以拒绝.</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
<div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
<div class="ftco-46-text ftco-46-arrow-up">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">蓝莓酸奶冰激凌</h3>
<p class="mb-5">触动您的心灵，令人甜蜜至极，难以忘怀，心旷神怡的味觉享受，精选一级的夏威夷果仁，入口丝滑</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
</div>结语
如果人的一生总的能量是固定的话，那就节省开支，延长时间，喜怒哀乐不溢于言表，不困于心智，保持乐观心态
*请认真填写需求信息，我们会在24小时内与您取得联系。
