VSCode自定义代码片段5——HTML元素结构

浅香沉木

已于 2022-04-13 11:45:01 修改

阅读量1.2k

点赞数

分类专栏： VSCode自定义代码片段 CSS3 vue 文章标签： VSCode 自定义代码片段 HTML元素结构

于 2022-04-13 11:16:31 首次发布

本文链接：https://blog.csdn.net/Java_53/article/details/124143753

版权

VSCode自定义代码片段同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

CSS3

4 篇文章 0 订阅

订阅专栏

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>&nbsp;&nbsp;&nbsp;&nbsp;段落2。。。<font color=\"red\">特殊语义</font>",
			"            <br /><!-- 换行 -->",
			"            <em>语气加重</em>",
			"            <b>重点</b>",
			"            a&lt;b&gt;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元素结构"
	}
}

@沉木

浅香沉木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VSCode自定义代码片段5——HTML元素结构

HTML元素结构{ // HTML'element // 如何自定义用户代码片段：VSCode =》左下角设置 =》用户代码片段 =》新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存 // HTML元素结构 "Print to console": { "prefix": "HTML'element", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "",
复制链接

扫一扫