VSCode自定义代码片段5——HTML元素结构
HTML元素结构
{// HTML'element// 5 如何自定义用户代码片段：VSCode =》左下角设置 =》用户代码片段 =》新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存// HTML元素结构"Print to console": {"prefix": "HTML'element","body": ["<!DOCTYPE html>","<html lang=\"en\">","","<head>"," <meta charset=\"UTF-8\">"," <title>常用标签</title>","</head>","","<body>"," <header>"," <!-- 头部标签 -->"," <h1>一级标题</h1>"," </header>"," <main>"," <!-- 主体标签 -->"," <p>段落1</p>"," <p> 段落2。。。<font color=\"red\">特殊语义</font>"," <br /><!-- 换行 -->"," <em>语气加重</em>"," <b>重点</b>"," a<b>c"," </p>"," <ul>"," <!-- 无序列表 -->"," <li>项目</li>"," <li>项目</li>"," <li>项目</li>"," </ul>"," <ol>"," <!-- 有序列表 -->"," <li>项目1</li>"," <li>项目2</li>"," <li>项目3</li>"," </ol>"," <a href=\"../images/p2.jpg\">"," <div width=\"300\" height=\"300\"><img src=\"../images/p2.jpg\" width=\"300\"></div>链接1"," </a><!-- 超链接 -->"," <img src=\"../images/td.jpg\" width=\"500\">"," <!-- 音频标签 -->"," <audio controls loop=\"1\">"," 对不起，你的浏览器不支持audio元素，请升级浏览器！"," <source src=\"../images/10000.mp3\">"," </audio>"," <!-- 视频标签 -->"," <video controls loop=\"1\" poster=\"../images/p1.jpg\">"," 对不起，你的浏览器不支持video元素，请升级浏览器！"," <source src=\"../images/ry.mp4\">"," </video>"," <iframe width=\"1000\" height=\"800\" src=\"https://www.baidu.com/\" frameborder=\"0\">"," <!-- 内联框架 -->"," </iframe>"," <div>"," <!-- 块元素标签 -->"," 块"," <span>"," <!-- 行内元素标签 -->"," 行"," </span>"," </div>"," </main>"," <footer>"," <!-- 底部标签 -->"," @沉木"," </footer>"," <ul>"," <li></li>"," <li></li>"," <li></li>"," <li></li>"," </ul>","</body>","","</html>","","vue'tableElement","<div v-if=\"books.length\">"," <table>"," <thead>"," <tr>"," <th></th>"," <th>书籍名称</th>"," <th>出版日期</th>"," <th>价格</th>"," <th>购买数量</th>"," <th>操作</th>"," </tr>"," </thead>"," <tbody>"," <tr v-for=\"(item,index) in books\">"," <td>{{item.id}}</td>"," <td>{{item.name}}</td>"," <td>{{item.date}}</td>"," <td>{{item.price | showPrice}}</td><!-- 过滤器的使用: 参数 | 过滤器方法名 -->"," <td>"," <button @click=\"decrement(index)\" v-bind:disabled=\"item.count <= 1\">-</button>"," <!-- 标签的disabled属性出现则标签不可用，v-bind可以用来控制属性的存在，当属性值为true时属性存在，反之，属性值为false时属性不存在 -->"," {{item.count}}"," <button @click=\"increment(index)\">+</button>"," </td>"," <td><button @click=\"removeHandle(index)\">移除</button></td>"," </tr>"," </tbody>"," </table>"," <h2>总价格：{{totalPrice|showPrice}}</h2>","</div>","<h2 v-else>购物车为空</h2>",],"description": "HTML元素结构"}
}
@沉木
VSCode自定义代码片段5——HTML元素结构相关推荐
- vscode自定义代码片段（新手交流）
一.为什么要用js代码片段 运用js代码片段,能有效地帮助我们提高代码效率,减少繁琐代码的记忆过程.也是搜集过很多代码片段设置的文章,但步骤不太明确,经实际操作后整理了以下步骤,供大家学习参考,如有不 ...
- VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
- VSCode自定义代码片段6——CSS选择器
CSS选择器自定义代码片段 { // CSS'selector // 6 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... = ...
- VSCode自定义代码片段3——url大全
url大全 {// url'// 3 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 =>编辑 ...
- VSCode自定义代码片段7——CSS动画
CSS动画 {// CSS'animation// 7 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名 ...
- VSCode自定义代码片段10—— 数组的响应式方法
数组的响应式方法 {// arr'fuction// 10 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义 ...
- VSCode自定义代码片段2——.vue文件的模板
.vue文件的模板 {// v'// 2 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义片段名称 => ...
- VSCode自定义代码片段13——Vue的状态大管家
Vue的状态大管家 {// V'Vuex// 13 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
- VSCode自定义代码片段11——vue路由的配置
vue路由的配置 {// v'router// 11 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
最新文章
- Microsoft Dynamics CRM 2011 多客户端安装共用同一Sql Server 实例设置
- 【UAV】光流模块、测量速度、快速入门及安装使用
- SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
- html5 json转字符串,web前端-js小记(5)-字符串及json
- arcgis导出shp文件_地理工具学习--arcgis篇（15）：CAD和SHP的简单转换
- php根据分类生成网址,PHP实现无限极分类生成分类树的方法
- 微信小程序怎么弄成链接_自己怎么弄微信小程序？
- share——Alpha版（内部测试版）发布
- 手写基础排序及查找算法
- [20150123]热链竞争.txt
- 如何使用组策略提升Windows系统性能
- C语言：计算1*2*3*....*100，即求100！。
- 面试官：@Transactional 注解是如何实现的？面试必问！
- 单目标跟踪MOSSE详细算法步骤+理论说明
- 学生HTML个人网页作业作品：基于web在线汽车网站的设计与实现 (宝马轿车介绍)
- 微信小程序原生自定义组件布局问题
- 并联串联混合的电压和电流_16.2 串、并联电路中电压的规律
- ElasticSearch服务器的搭建与使用
- 程序猿生存指南-11 入职朗云
- QuTrunk与Paddle结合实践--VQA算法示例