vscode-html

说明

• 一个 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元素的名称\" />"]