VSCode自定义代码片段5——HTML元素结构
Posted 浅香沉木
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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元素结构的主要内容，如果未能解决你的问题，请参考以下文章