说明
- 一个
vscode的html代码片段提示插件 - 支持的页面：
vue、javascript、html
使用教程
标题标签
-
呼出关键字：
h1标题标签块级元素-
Snipped 代码
"body": "<h1>$0</h1>"
-
-
呼出关键字：
h2标题标签块级元素-
Snipped 代码
"body": "<h2>$0</h2>"
-
-
呼出关键字：
h3标题标签块级元素-
Snipped 代码
"body": "<h3>$0</h3>"
-
-
呼出关键字：
h4标题标签块级元素-
Snipped 代码
"body": "<h4>$0</h4>"
-
-
呼出关键字：
h5标题标签块级元素-
Snipped 代码
"body": "<h5>$0</h5>"
-
-
呼出关键字：
h6标题标签块级元素-
Snipped 代码
"body": "<h6>$0</h6>"
-
段落标签
-
呼出关键字：
p段落标签块级元素-
Snipped 代码
"body": "<p>$0</p>"
-
换行标签
-
呼出关键字：
br块级元素-
Snipped 代码
"body": "<br />"
-
文本格式化标签
-
呼出关键字：
strong语义化文本格式化标签行内元素加粗-
Snipped 代码
"body": "<strong>$0</strong>"
-
-
呼出关键字：
b文本格式化标签行内元素加粗-
Snipped 代码
"body": "<b>$0</b>"
-
-
呼出关键字：
em语义化文本格式化标签行内元素倾斜-
Snipped 代码
"body": "<em>$0</em>"
-
-
呼出关键字：
i文本格式化标签行内元素倾斜-
Snipped 代码
"body": "<i>$0</i>"
-
-
呼出关键字：
del语义化文本格式化标签行内元素删除线-
Snipped 代码
"body": "<del>$0</del>"
-
-
呼出关键字：
s文本格式化标签行内元素删除线-
Snipped 代码
"body": "<s>$0</s>"
-
-
呼出关键字：
ins语义化文本格式化标签行内元素下划线-
Snipped 代码
"body": "<ins>$0</ins>"
-
-
呼出关键字：
u文本格式化标签行内元素下划线-
Snipped 代码
"body": "<u>$0</u>"
-
div块级盒子
-
呼出关键字：
div块级元素-
Snipped 代码
"body": "<div>$0</div>"
-
span文本
-
呼出关键字：
span行内元素-
Snipped 代码
"body": "<span>$0</span>"
-
script
-
呼出关键字：
script-
Snipped 代码
"body": "<script type=\"module\" src=\"\">$0</script>"
-
style
-
呼出关键字：
style-
Snipped 代码
"body": "<style>$0</style>"
-
图像
-
呼出关键字：
img行内块元素-
Snipped 代码
"body": [ "<!-- alt图片显示失败提示信息 title鼠标悬停提示 -->", "<img scr=\"\" title=\"\" alt=\"\">$0</img>" ]
-
超链接标签
-
呼出关键字：
a行内元素-
Snipped 代码
"body": [ "<!-- target：_self内部链接/_blank内部链接 title鼠标悬停提示 -->", "<a href=\"$1\" title=\"\" target=\"_self或_blank\">$0</a>" ]
-
标签内容特殊字符
-
呼出关键字：
空格字符-
Snipped 代码
"body": " "
-
-
呼出关键字：
<小于号字符-
Snipped 代码
"body": "<"
-
-
呼出关键字：
>大于号字符-
Snipped 代码
"body": ">"
-
-
呼出关键字：
&和号字符-
Snipped 代码
"body": "&"
-
-
呼出关键字：
¥人民币字符-
Snipped 代码
"body": "¥"
-
-
呼出关键字：
©版权字符-
Snipped 代码
"body": "©"
-
-
呼出关键字：
®注册商标字符-
Snipped 代码
"body": "®"
-
-
呼出关键字：
°摄氏度字符-
Snipped 代码
"body": "°"
-
-
呼出关键字：
±正负号字符-
Snipped 代码
"body": "±"
-
-
呼出关键字：
×乘号字符-
Snipped 代码
"body": "×"
-
-
呼出关键字：
÷除号字符-
Snipped 代码
"body": "÷"
-
-
呼出关键字：
²平方字符-
Snipped 代码
"body": "²"
-
-
呼出关键字：
³立方字符-
Snipped 代码
"body": "³"
-
表格标签
-
呼出关键字：
table表格标签-
Snipped 代码
"body": [ "<table cellpadding=\"${1:单元格边框与单元格里面内容的左右两边宽度}\" cellspacing=\"${0:单元格之间的间距}\">", " <!-- 标题行 -->", " <thead>", " <!-- 行 -->", " <tr>", " <!-- 单元格 -->", " <th>1</th>", " <th>1</th>", " <th>1</th>", " <th>1</th>", " </tr>", " </thead>", "", " <!-- 内容行 -->", " <tbody>", " <!-- 行 -->", " <tr>", " <!-- colspan向右合并两个单元格 -->", " <td colspan=\"2\">5</td>", " <td>7</td>", "", " <!-- colspan向下两个单元格 -->", " <td rowspan=\"2\">12</td>", " </tr>", " <!-- 行 -->", " <tr>", " <td>9</td>", " <td>10</td>", " <td>11</td>", " </tr>", " </tbody>", "</table>" ]
-
列表
-
呼出关键字：
ul无序列表列表块级元素-
Snipped 代码
"body": ["<ul>", "<li>$0</li>", "<ul>"]
-
-
呼出关键字：
ol有序列表列表块级元素-
Snipped 代码
"body": ["<ol>", "<li>$0</li>", "<ol>"]
-
-
呼出关键字：
dl自定义列表列表块级元素-
Snipped 代码
"body": ["<dl>", "<dt>标题</dt>", "<dd>$0</dd>", "<dl>"]
-
表单
-
呼出关键字：
form-
Snipped 代码
"body": [ "<form action=\"${1:用于指定接收并处理表单数据的服务器程序的url地址}\" method=\"${2:用于设置表单数据的提交方式，其取值为get或post}\" name=\"${0:用于指定表单的名称，以区分同一个页面中的多个表单域}\">", "", "</form>" ]
-
-
呼出关键字：
button-
Snipped 代码
"body": ["<!-- disabled为禁用 -->", "<button type disabled>$0</button>"]
-
-
呼出关键字：
input~定义复选框-
Snipped 代码
"body": [ " <input type=\"checkbox\" name=\"定义input元素的名称\" />", " <span>篮球</span>>", " <!-- checked默认选择,hidden隐藏表单元素, disabled为禁用,name定义表单名字 -->", " <input type=\"checkbox\" name=\"定义input元素的名称\" checked />", " <span>足球</span>" ]
-
-
呼出关键字：
input~文件上传表单按钮-
Snipped 代码
"body": [ " <!-- hidden隐藏表单元素, disabled为禁用,name定义表单名字 , multiple 选择多个文件，h5新增 -->", " <input type=\"file\" name=\"定义input元素的名称\" />" ]
-
-
呼出关键字：
input~密码输入框表单-
Snipped 代码
"body": [ "<!-- hidden隐藏表单元素, disabled为禁用,name定义表单名字, value默认输入框值,maxlength 最大字符长度 -->", " <!-- autofocus自动聚焦属性 placeholder 提示信息 -->", " <!-- autocomplete: off / on on为打开浏览器自动填充 off为关闭浏览器自动填充-->", "<input type=\"password\" name=\"定义input元素的名称\" />" ]
-
-
呼出关键字：
input~单选框-
Snipped 代码
"body": [ " <!-- hidden隐藏表单元素, disabled为禁用,name定义表单名字, checked默认选择-->", " <!-- 单选框必须保持name属性值都一样 -->", " <!-- label标签可与单选框进行关联 -->", " <input type=\"radio\" name=\"定义input元素的名称\" id=\"sex\" checked />", " <label for=\"sex\">男</label>", " <input type=\"radio\" name=\"定义input元素的名称\" id=\"sex1\" />", " <label for=\"sex1\">女</label>" ]
-
-
呼出关键字：
input~重置表单按钮-
Snipped 代码
"body": [ " <!-- hidden隐藏表单元素, disabled为禁用, value为内容-->", " <input type=\"reset\" />" ]
-
-
呼出关键字：
input~输入框-
Snipped 代码
"body": [ "<!-- hidden隐藏表单元素, disabled为禁用,name定义表单名字, value默认输入框值,maxlength 最大字符长度-->", " <!-- autofocus自动聚焦属性 placeholder 提示信息 -->", " <!-- autocomplete: off / on on为打开浏览器自动填充 off为关闭浏览器自动填充-->", " <input type=\"text\" />" ]
-
-
呼出关键字：
input~下拉表单-
Snipped 代码
"body": [ " <select name=\"\">", " <option value=\"\">选项1</option>", " <option value=\"\">选项2</option>", " <!-- selected=\"selected\"为默认选中项 -->", " <option value=\"\" selected>选项3</option>", " </select>" ]
-
html5新特性
-
呼出关键字：
html5新特性~头部标签-
Snipped 代码
"body": [" <header>$0</header>"]
-
-
呼出关键字：
html5新特性~头部导航标签-
Snipped 代码
"body": [" <nav>$0</nav>"]
-
-
呼出关键字：
html5新特性~内容标签-
Snipped 代码
"body": [ " <!-- 论坛帖子 博客文章 新闻故事 评论 -->", " <article>$0</article>" ]
-
-
呼出关键字：
html5新特性~定义文档某个区域-
Snipped 代码
"body": [ " <!-- 定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域 -->", " <section>$0</section>" ]
-
-
呼出关键字：
html5新特性~内容侧栏标签-
Snipped 代码
"body": [" <!-- 可用作文章的侧栏 -->", " <aside>$0</aside>"]
-
-
呼出关键字：
html5新特性~尾部标签-
Snipped 代码
"body": [" <footer>$0</footer>"]
-
-
呼出关键字：
html5新特性~视频标签-
Snipped 代码
"body": [ " <!-- autoplay自动播放，谷歌浏览器需要添加muted属性才有效果 -->", " <!-- controls向用户显示播放控件 width 设置播放宽度 height 设置播放高度 -->", " <!-- loop 循环播放 preload: auto(预先加载视频)或none(不应加载视频)如果有了autoplay 就忽略该属性-->", " <!-- poster 加载等待的画面图片 muted 静音播放 -->", " <video src=\"文件地址\" controls></video>" ]
-
-
呼出关键字：
html5新特性~音乐标签-
Snipped 代码
"body": [ " <!-- <audio> 元素支持的3种文件格式：MP3、Wav、Ogg -->", " <!-- autoplay 自动播放 controls 显示播放控件 loop 循环播放 -->", " <!-- muted 静音播放 -->", " <audio src=\"文件地址\"></audio>" ]
-
-
呼出关键字：
html5新特性~日期类型表单-
Snipped 代码
"body": ["<input type=\"date\" name=\"定义input元素的名称\" />"]
-
-
呼出关键字：
html5新特性~时间类型表单-
Snipped 代码
"body": ["<input type=\"time\" name=\"定义input元素的名称\" />"]
-
-
呼出关键字：
html5新特性~月类型表单-
Snipped 代码
"body": ["<input type=\"month\" name=\"定义input元素的名称\" />"]
-
-
呼出关键字：
html5新特性~颜色选择器表单-
Snipped 代码
"body": ["<input type=\"color\" name=\"定义input元素的名称\" />"]
-