一、HTML中的标签、属性、和取值
1.基础类标签：
<h1>：双标签，是header的简写，此html文件内的标题（block标签），<title>才是整个html文档的标题（显示在浏览器的选项卡上），h系列标签一共有6个，从<h1>到<h6>，最多就只能到6，h系列标签独占一行，<h1>最大，<h6>最小，一定要慎用h系列的标签，特别是<h1>，一般情况下一个界面中只能出现一个<h1>，和SEO有关，align属性：此标签内容的水平对齐方式，内容须为具体文字/inline标签/inline-block标签，不推荐使用，用CSS设置，取值：left，左对齐，right，右对齐，center，居中对齐
<P>：双标签，是paragraph的简写，段落（block标签），单独占一行
<hr>：单标签，是horizontal rule的简写，水平分隔线，单独占一行
<br>：单标签，是break的简写，换行，可叠加，使用多少个就会换多少行，<br>的语义是换行但不分段，而一般情况下都是换行并分段，所以很少使用<br>，一般都是嵌套在<p>内部来实现单独占一行
2.图像类标签：
<img>：单标签，是image的简写，图片（inline-block标签），不会独占一行，src属性：此<img>的路径/网址（必需属性），取值是本地<img>的路径/网络<img>的网址（要加“http://”），相对路径就是每次都从当前这个“.html”文件所在的文件夹开始查找，“./”代表当前目录，可省略，“../”代表父级目录，要是上两级目录就是“../../”，但不能跨盘符，当从上级查找时，不能从webstorm打开web浏览器，要直接进web浏览器刷新，企业开发中，统一使用正斜杠“/”，因为将来我们开发的程序可能会部署到其它操作系统的web服务器上，而在其它操作系统中路径都是“/”，所以当你写的不是“/”时，可能会引发问题，绝对路径就是每次都从指定的盘符开始查找，无论哪种路径都不要出现中文，否则可能出现未知问题，企业开发中一般不使用绝对路径，因为可移植性不好，alt属性：当此<img>无法显示时的替代文本（必需属性，是alternate的简写），取值是自定义内容，title属性：当鼠标hover此<img>时所显示的内容，取值是自定义内容，title属性为全局属性，可用于任何HTML标签，width属性：此<img>的宽度，height属性：此<img>的高度，为了防止<img>变形，不设定/只设定其中一项即可
<figure>：双标签，媒介内容的分组以及它们的标题（HTML5）
<figcaption>：双标签，<figure>的标题（HTML5）
3.链接类标签：
<a>：双标签，是anchor的简写，超链接（inline标签），内部可嵌套<img>，href属性：此超链接目标的URL，取值：#，javascript:（假链接），就是点击之后不会跳转的<a>，#点击之后会自动跳转到顶部，但javascript:不会，当想要通过<a>跳转到此网页的指定位置时，先给目标位置的标签设置一个id属性，然后在href值的#后面直接跟上此id值即可（点击之后相当于种了一个哈希），但没有过渡动画，URL，链接所指向的路径/网址，就是需要跳转到的目标界面，当此目标界面是网址时，前面必须添加http://或https://，当此目标界面是本地文件时，使用相对路径即可，当想要通过<a>跳转到指定界面的指定位置时，只需给指定界面的指定位置的标签添加一个id属性，然后在<a>中这个界面网址/路径的后面直接跟上#id值即可，target属性：此链接跳转的位置，取值：_self，默认值，在当前选项卡中跳转，_blank，在新的选项卡中跳转，title属性：当hover此<a>时所显示的内容，取值是自定义内容
4.元信息类标签：
<base>：单标签，页面上所有链接的默认路径/网址，必须写在<head>的开始标签和结束标签之间，href属性：同<a>的href属性，target属性：页面上所有<a>跳转的位置，但是<a>的target属性的优先级更高，取值：_self，默认值，在当前选项卡中跳转，_blank，在新的选项卡中跳转
5.列表类标签：
<ul>：双标签，是unordered list的简写，无序列表（block标签），用得最多，所有数据没有先后之分，与<li>组合在一起使用，<ul>的下一级标签中只建议有<li>，但是<li>中可以再嵌套其他标签，<ul>的应用场景为新闻列表、商品列表、和导航条
<ol>：双标签，是ordered list的简写，有序列表（block标签），用得最少，所有的数据都有先后之分，其它用法跟<ul>都差不多，大同小异，type属性：此<ol>内部的<li>所使用的序号类型，取值：1，A，a，I，i，但是没有人用type属性，都是用CSS来做
<li>：双标签，是list item的简写，此<ul>/<ol>的条目（block标签）
<dl>：双标签，是definition list的简写，定义列表（block标签），用得第二多，先通过<dt>添加<dl>中的所有标题，然后再通过<dd>给每个<dt>添加描述信息，<dl>、<dt>、和<dd>是一个整体，一起出现，并且<dl>的下一级标签中只建议有<dt>和<dd>，推荐一个<dt>对应一个<dd>，<dl>的应用场景为网站尾部的相关信息和图文混排（将<dt>内部嵌套一个<img>，然后将<dt>“float: left;”，将<dd>内部嵌套一个<h1>和一个<p>，分别添加一些文字，然后将<dd>“float: right;”）
<dt>：双标签，是definition title的简写，此<dl>内的标题（block标签）
<dd>：双标签，是definition description的简写，此<dl>内<dt>的描述（block标签）
6.表格类标签：
<table>：双标签，表格（block标签），<table>有一个border属性，此属性决定了此<table>的border宽度，但此属性的默认值是0，所以看不到此<table>的border，<table>跟<ul>、<ol>、和<dl>一样，它是一个组合标签，所以<table>、<tr>、和<td>一起出现，并且<table>的下一级标签中只能出现<caption>、<thead>、<tbody>、<tfoot>、<th>、和<tr>中的一/几种，border属性：此<table>的border宽度，取值：阿拉伯数字，默认值是0，此属性会为此<table>及此<td>添加border，但是当此属性的取值发生改变时，只有此<table>的border宽度会发生变化，而此<td>的border宽度始终都是1px，width属性：此<table>的宽度，取值：数字px，height属性：此<table>的高度，取值：数字px，align属性：此<table>在水平方向的对齐方式，取值：left，center，right，cellpadding属性：此<td>的内边距，也就是<td>的边沿与其内容之间的间距，取值：阿拉伯数字，默认值是1，cellspacing属性：此<td>的外边距，也就是<td>和<td>之间的距离，取值：阿拉伯数字，默认值是2，要想制作细线表格，需设置“cellspacing=“1””，bgcolor属性：此<table>的background-color
<caption>：双标签，此<table>的标题（block标签），一定要嵌套在<table>内，并紧跟<table>的开始标签后，由于<caption>里的内容默认是相对于<table>居中的，所以<caption>内部可以嵌套一个<h1>，这样一来，<h1>就相对于整个<table>居中了
<tr>：双标签，是table row的简写，此<table>内的一行<td>（block标签），align属性：此行<td>的内容（文本）的水平对齐方式，取值：left，center，right，valign属性：此行<td>的内容（文本）的垂直对齐方式，取值：top，middle，bottom，bgcolor属性：此行<td>的background-color
<td>：双标签，是table data cell的简写，此<table>内的单元格（inline-block标签），width属性：此<td>的宽度，取值：数字px，height属性：此<td>的高度，取值：数字px，align属性：此<td>的内容（文本）的水平对齐方式，<td>align属性的优先级高于<tr>align属性，取值：left，center，right，valign属性：此<td>内容（文本）的垂直对齐方式，<td>valign属性的优先级高于<tr>valign属性，取值：top，center，bottom，bgcolor属性：此<td>的background-color，colspan属性：此<td>可横跨的列数，就是此<td>在水平方向上变为多倍的面积大小，这样一来就会多出一些<td>，所以需要删掉一些<td>才能正常显示，<td>的横跨永远都是向后横跨，取值：阿拉伯数字，rowspan属性：此<td>可纵跨的行数，就是此<td>在竖直方向上变为多倍的面积大小，<td>的纵跨永远都是向下纵跨，取值：阿拉伯数字
<th>：双标签，是table header cell的简写，此<table>内的表头<td>（inline-block标签），也就是每一列的标题，当将第一行的每一个<td>（即单元格）都换成<th>时，就自动将标签内部的内容居中并加粗了
<thead>：双标签，是table head的简写，此<table>内的表头信息，<thead>、<tbody>、和<tfoot>都是内部嵌套<tr>使用的，<thead>和<tfoot>有其默认高度，在添加了<thead>和<tfoot>之后，当修改<table>的高度时，<thead>和<tfoot>的高度不会改变
<tbody>：双标签，是table body的简写，此<table>内的主体信息，当没有编写<tbody>时，系统会自动添加
<tfoot>：双标签，是table foot的简写，此<table>内的页尾/附加信息
7.表单类标签：
<form>：双标签，供用户输入的HTML表单（block标签），action属性：此<form>需要提交到的本地/远程web服务器的URL，当取值是网址时，必须加“http://”，method属性：提交<form>数据的方法，取值：get，将<form>数据以get请求的方式提交到web服务器，由于会将需要提交的数据附加到URL后面的“?”后面，例如“?userName=lnj&userPwd=123456”（不能出现中文），也会显示在浏览器的历史记录中，所以用于提交非敏感的数据，由于对提交的数据大小有限制（不超过2000个字符），所以用于提交小数据，post，将<form>数据以post请求的方式提交到web服务器，会将提交的数据放到请求头中，即F12->Network->相应请求报文->Headers->Form Data，所以用于提交敏感的数据，由于对提交的数据大小无限制，所以用于提交大数据，enctype属性：在发送<form>数据之前对其进行编码的方式，取值：application/x-www-form-urlencoded，默认值，在发送前编码所有字符，multipart/form-data，不对字符编码，在使用包含文件上传控件（即<input type=“file”>）的<form>时，必须使用该值
<input>：单标签，<form>内的各种元素（inline-block标签），如输入框、单/多选框、和按钮等，用于收集用户信息，必须整体嵌套在一对<form>内，type属性：此<input>的类型，取值：text，明文/单行文本输入框，用户可在其中输入文本，默认宽度为20个字符，password，暗文/密码输入框，该字段中的字符被掩码，radio，单选框，只有给所有radio都设置一个相同的name值，radio才会互斥，给某一个radio添加一个checked属性，才会默认选中某一个radio，所添加的checked属性可以不设置取值，也可以取跟属性名称一样的值，在HTML中，当属性的取值和属性的名称一样时，可以只写一个，但是在XHTML中，则必须写上取值，所以建议最好不要省略取值，checkbox，多选框，除了按钮类型的<input>以外，其它类型的<input>都可以通过一个value属性来设置将来提交到web服务器的值，button，普通按钮，可以通过value属性来设置button的显示名称，button可以配合JS完成一些操作，reset，重置按钮（此按钮上默认就显示“重置”二字，但可以通过value属性来自定义reset的显示名称），用于清空<form>中已经填写好的数据，但必须整体嵌套在一对<form>内，否则无效，submit，提交按钮（此按钮默认就显示“提交”二字），可以将<form>中已经填写好的数据，提交到本地/远程web服务器，但必须给<form>添加一个action属性，来设置需要提交到的web服务器的URL，还得给需要提交到web服务器的<input>添加一个name属性，取值任意拟定（所有checkbox也需要设置相同的name值），image，图片形式的submit（需配合src属性来使用，即设置图片的URL），hidden，隐藏域，界面上看不到，是配合submit将一些数据默默的悄悄咪咪的提交到web服务器，学Ajax时才能涉及到，email，邮箱输入框，提交的时候可以自动校验输入的内容是否符合邮箱的格式，当不符合时，会提示，URL，URL链接输入框，提交的时候可以自动校验输入的内容是否是路径/网址，网址前必须添加http://，number，数字输入框，number中只能输入数字，字母什么的输入不进去，date，日期选择按钮，可以通过日历来选择年月日，color，颜色选择按钮，可以通过取色板选取颜色，file，“选择文件”按钮，供文件上传，src属性：此image的图片路径，取值是本地图片的路径，只能与“type=“image””配合使用，value属性：此按钮/text上默认显示的文字，当设置给text时，是可以手动删掉的，<input>输入框元素访问它的value属性可以返回/设置此<input>输入框中所输入的内容，placeholder属性：此输入框的占位文字（输入内容的提示信息），取值是自定义文字，此文字无法手动删除，但此输入框的padding/line-height可影响到此placeholder，name属性：此<input>的名称，当想要把所输入的账号密码提交到本地/远程web服务器时，必须任意命个名，checked属性：页面加载时被默认选中的radio/checkbox，取值：checked，默认选中，list属性：此text的<datalist>（当hover此text时，会在此text的最右端看到一个向下的三角形小箭头，当光标在此text中闪烁时，也会显示此<datalist>），此text后面必须紧跟一对<datalist>，而且此text的list值还必须跟<datalist>的id值相同，可以给此text生成一些智能化的待选项，提示项，disabled属性：禁用此<input>（使之不能编辑/点击了），取值：disabled
<button>：双标签，按钮（inline-block标签）
<datalist>：双标签，此text的预定义下拉列表（HTML5），与text配合使用，并紧跟text之后，用作给此text绑定一些智能化的待选项，<datalist>的id值必须跟text的list值相同，取值可以自己随意拟定，<datalist>内部须嵌套<option>，并把文字放到<option>内/<option>的value值里，进而形成预定义下拉列表
<label>：双标签，此text/radio/checkbox的标注（inline标签），默认情况下，此text/radio/checkbox的名称跟此text/radio/checkbox是没有关联关系的，可以将此text/radio/checkbox的名称写在一对<label>内，作用是将此text/radio/checkbox的名称与此text/radio/checkbox绑定，点击名称，text就有光标，radio/checkbox就自动选中，for属性：绑定到哪个<input>，取值需跟此<input>的id值相同，取值可以自己随意拟定
<select>：双标签，下拉菜单（inline-block标签），最右端带有一个向下的小箭头，此<select>中不能输入内容，但是可以直接在此<select>中选择内容，其内部需嵌套<optgroup>/<option>，将内容写在一对<option>内，不能写在value值里，否则无效
<optgroup>：双标签，此<select>内的选项组，用作给此<select>中的内容进行分组，其内部需嵌套<option>使用，label属性：此<optgroup>的名称，取值可取任意的名字
<option>：双标签，此<select>/<optgroup>/<datalist>内的选项，可以嵌套在<select>/<optgroup>/<datalist>内，selected属性：此<select>内默认选中的<option>，首次显示在<select>内，表现为选中状态，取值：selected，选中
<textarea>：双标签，多行文本输入框（inline-block标签），可无限换行，有自己默认的宽高，cols属性：此<textarea>的宽度，取值是数字，表示列数，rows属性：此<textarea>的高度，取值是数字，表示行数，虽然设置了cols和rows属性，但是还是可以无限往下输入，超出的内容用滚动条查看，<textarea>支持使用鼠标拖拽的方式放大和缩小
<fieldset>：双标签，围绕<input>的边框（block标签），其内部嵌套<input>使用，可以嵌套一/多个<input>，可以将不同的<input>进行分割包围，形成不同的区域
<legend>：双标签，<fieldset>的标题（block标签），就是<fieldset>的名称，嵌套在<fieldset>内，并紧跟<fieldset>，align属性：此<legend>的水平对齐方式，取值：left，center，right
8.音视频类标签：
<video>：双标签，视频（inline-block标签，HTML5），src属性：此<video>的路径，取值是本地<video>的路径，poster属性：此<video>播放前所显示的图片，取值：URL，本地图片的路径，autoplay属性：此<video>的自动播放，取值：autoplay，自动播放，preload属性：此<video>的预加载，preload属性和autoplay属性相冲突，当添加了autoplay属性时，preload属性就会失效，取值：preload，预加载，controls属性：此<video>的播放控制条，取值：controls，播放控制条，loop属性：此<video>的循环播放，取值：loop，循环播放，muted属性：此<video>的静音，取值：muted，静音，width属性：此<video>的宽度，取值：数字px，height属性：此<video>的高度，取值：数字px，跟<img>一样，当所设置的宽度和高度不是按照等比计算时，此<video>就会变形，所以建议只设置其中的一项即可
<audio>：双标签，音频（inline标签，HTML5），src属性：此<audio>的路径，取值是本地<audio>的路径，<video>中能够添加的属性大部分都可以在<audio>中添加，并且功能都一样，只不过有3个属性不能用，height、width、和poster属性
<source>：单标签，此<audio>/<video>的文件来源（HTML5），嵌套在<audio>/<video>内，为其定义<audio>/<video>来源，由于没有一种<audio>/<video>格式是五大浏览器同时支持的，所以为了做兼容性处理，可以把三种不同格式的<audio>/<video>文件都通过<source>链接给<audio>/<video>，<audio>/<video>内部需要嵌套三个<source>，以后当浏览器播放<audio>/<video>时，它就会从这三种格式中选择一种自己支持的格式来播放，src属性：此<audio>/<video>文件的路径，取值是本地<audio>/<video>的路径，type属性：此<audio>/<video>文件的格式，取值：audio/Ogg Vorbis，audio/MP3，audio/Wav，或video/webm，video/mp4，video/ogg
9.样式/节类标签：
<details>：双标签，文档/文档某个部分细节的描述，即详情（block标签，HTML5），带一个箭头，点击之后可以展开
<summary>：双标签，<details>的标题，即概要（block标签，HTML5），嵌套在<details>内，并紧跟其后
<div>：双标签，文档中的分区/节（block标签），一般情况下，用于配合CSS完成网页的基本布局的标签叫做容器级标签，其内部可以嵌套其它所有标签，<div>、<h1>、<ul>、<ol>、<dl>、<li>、<dt>、和<dd>等都属于容器级标签，所有的容器级标签都是block标签，单独占一行，height属性的默认值是auto，当不给width属性设置取值时，整个标签所占空间的宽度值（margin值+border-width值+padding值+width值）默认跟其父标签的width值（即内容区的宽度值）相同，但是其一定不能脱标，否则其将不再是block标签，width值默认就是auto了，但其父标签可随意，其也可手动设置width/height值，手动添加的即使其脱标也生效，在一个父标签是<body>的block标签中，当不给此block标签设置width值，并且再给此block标签添加一个左右padding时，浏览器不会出现横向滚动条，因为这时整个此block标签所占空间的宽度值才默认等于<body>的width值（即内容区的宽度值），当给此block标签的width值设为100%，并且再给此block标签添加一个padding-left和padding-right时，浏览器会出现横向滚动条，因为这时100%的意思就是跟<body>的width值相等，再额外多了一个padding-left和padding-right之后，此block标签整体的宽度值势必就比<body>宽了，所以，超出的部分只有使用横向滚动条才能完整显示，除非再给它添加一句“box-sizing: border-box;”，文本级标签里的<p>也属于block标签，<img>、<input>、<td>、和<select>属于inline-block标签，既能够不独占一行，又能够手动设置宽高，当两个inline/inline-block标签的源代码之间留下了回车/空格时，渲染出来后彼此之间也会有缝隙，只要把其中一个“float: left;”，缝隙就会消失，而且float的会显示在前面
<span>：双标签，文档中的inline标签的组合（inline标签），一般情况下，用于配合CSS修改网页中的一些局部信息的标签叫做文本级标签，其内部只建议嵌套文字/<img>/<a>，<span>、<p>、<b>、<u>、<i>、<s>、<strong>、<em>、<ins>、<del>、和<a>等都属于文本级标签，文本级标签里除了<p>都属于inline标签，不会单独占一行，不可手动设置宽高，width和height属性的默认值是auto，inline标签只可以设置padding-left、padding-right、margin-left、和margin-right，哪些标签是文本级的哪些标签是容器级的不用刻意去记忆，一般情况下，要嵌套都是嵌套在<div>内/按照组标签来嵌套
10.其它类标签：
<marquee>：双标签，屏幕上滚动的文字（类似于弹幕），w3c上没有，但是各大浏览器都支持，behavior属性：此<marquee>的滚动类型，取值：slide，滚动到边界就停止，alternate，滚动到边界就弹回，direction属性：此<marquee>的滚动方向，取值：up，从下向上滚动，down，从上向下滚动，left，从右向左滚动，right，从左向右滚动，scrollamount属性：此<marquee>的滚动速度，取值：阿拉伯数字，值越大，滚动得越快，loop属性：此<marquee>的滚动次数，取值：阿拉伯数字，默认值是-1，也就是无限滚动
11.HTML中被废弃的标签：
因为当前的HTML中的标签只有一个作用，就是用来添加语义，而早期的HTML标签中有一部分标签是没有语义的，单纯是用来修改样式的，所以这部分标签就被淘汰了，<br>、<hr>、<font>、<b>（双标签）、<u>（双标签）、<i>（双标签）、<s>（双标签）以上标签都是没有结构方面的语义的，都是单纯用来修改样式的，<b>(即bold的简写)用来加粗文本，<u>(即underline的简写)用来给文本添加下划线，<i>(即italic的简写)用来将文本倾斜，<s>(即strikethourgh的简写)用来给文本添加删除线，以后不到万不得已一定不要使用这些被废弃掉的标签，当一定要使用时，一般情况下都是用来作为CSS的钩子来使用，钩子就是绑定的意思，意思就是为了单纯的绑定一些小图标而使用，没有实际语义，比如可以将<i>/<b>转成inline-block标签，再添加background-image，或者其内部直接嵌套<img>都可以，一般<b>换成<strong>（双标签），语义为重要性强调的文字，<u>换成<ins>（双标签）(即inseted的简写)，语义为插入的文字，<i>换成<em>（双标签）(即emphasized的简写)，语义为强调的文字，<s>换成<del>（双标签）(即deleted的简写)，语义为被删除的文字
12.字符实体：
在HTML中对空格/回车/tab不敏感，会把多个空格/回车/tab当做一个空格来处理，有的字符在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，要想显示出来就必须通过字符实体，一个“ (//non-breaking space)”就是一个空格，有多少个“ ”就有多少个空格，“<(//less than)”为小于符号“<”，“>(//greater than)”为大于符号“>”，“©”为版权符号，其余的详见w3c官方网站
二、WebStorm中常见的快捷键
创建一个新的.html的文件：“Ctrl”+“Alt”+“Insert”
让光标移动到当前行的末尾：“End”
让光标移动到当前行的最前面：“Home”
添加多光标/列选择（让光标在多行中闪烁）：按住键盘上的“Alt”键不放，然后再按住鼠标的左键不放，然后再拖动鼠标即可（新版本拖动鼠标无效，只能单击鼠标）
将光标所在的那一行内容复制到下一行：“Ctrl”+“D”
删除光标所在的那一行内容：“Ctrl”+“X”
包围（给一段选中内容的前后加上标签）：先选中这一段，然后按“Ctrl”+“Alt”+“T”，然后按回车，然后输入对应的标签即可
添加注释/注释掉光标所在的那一行内容：“Ctrl”+“/”，取消注释也一样
选中多行内容并注释掉：“Ctrl”+“Shift”+“/”，取消注释也一样
上下移动光标所在那一行的代码：向上移动为“Ctrl”+“Shift”+“↑”(方向键上)，向下移动为“Ctrl”+“Shift”+“↓”(方向键下)
合并和展开某一个标签的代码：合并为“Ctrl”+“-”，展开为“Ctrl”+“+”
合并和展开页面所有标签的代码：合并为“Ctrl”+“Shift”+“-”，展开为“Ctrl”+“Shift”+“+”
新启一行（光标可在上一行的任意位置）：“Shift”+“Enter”
缩进：向后缩进为“Tab”，向前缩进为“Shift”+“Tab”
类名的跳转：在HTML代码中，按住“Ctrl”键，然后单击类名，可以直接跳转到相对应的CSS代码那里
在webstorm中，可以快速编写一个ul的格式，ul>li就是生成一对<ul>，然后在这对<ul>中再生成一对<li>，ul>li*3就是生成一对<ul>，然后在这对<ul>中再生成3对<li>，还可以ul>li*2>h2+ul>li*3，然后按Tab键即可，可以输入“div.类名$*数字”然后按Tab键，来快速生成多个相似类名的<div>，“p{$}*100”的意思是生成100个内容为1~100的<p>，可以输入“span.box${我是span}*数字”然后按Tab键，来快速生成多个内容为“我是span”，类名为“box数字”的<span>，当想要自定义代码片段的快捷方式时，点击进入File->Settings，然后在左上角的搜索框搜索“live”，找到“Live Templates”并点击，然后在右半部分找到“html/xml”并展开，然后在最右端找到绿色加号，并点击，然后再点击“Live Template”，然后在下边的“Template text”区域将自己的代码片段输入进去，然后在“Abbreviation”位置将自定义的快捷键输入，比如“jq”，然后点击下边的蓝色“Define”，然后点击“Everywhere”全选，全选完了之后点击“Apply”应用，再点“OK”，然后以后无论在任何文件下，只要输入“jq”再按“Tab”键，就会出现自己的代码片段，还可以给“使用默认浏览器打开”设置快捷键，点击进入File->Settings->Keymap，然后在右半部分的搜索框输入“default”，然后向下滚找到蓝色的“Open in default browser”并右击，然后点击“Add Keyboard Shortcut”，然后设置比如“Alt+R”，然后点击“OK”即可
三、vscode中常见的快捷键
格式化代码块（重排代码格式）：“Shift”+“Alt”+“F”（只能格式化对应格式文件的对应代码块，比如在“.html”文件中只能格式化HTML代码，无法格式化“.html”文件中的JS代码）
添加多光标/列选择（让光标在多行中闪烁）：“Alt”+“鼠标左键单击”
包围（给一段选中内容的前后加上标签）：“Alt”+“W”（需配合“htmltagwrap”插件使用，另外此快捷方式还可以自动出来一对<p>，可以将其改成任何标签）
将光标所在的那一行内容复制到下一行：“Shift”+“Alt”+“↓”(方向键下)
将光标所在的那一行内容移动到上/下一行：（“Alt”+“↑”）/（“Alt”+“↓”）
vscode常用插件：Atom JavaScript Snippet，Auto Close Tag，Auto Rename Tag，Babel JavaScript，Beautify，Bracket Pair Colorizer，Chinese (Simplified) Language Pack for Visual Studio Code，Class autocomplete for HTML，Color Info，CSS Peek，Debugger for Chrome，Document This，DotENV，ES7 React/Redux/GraphQL/React-Native snippets，ESLint，filesize，HTML CSS Support，HTML Snippets，HTMLHint，htmltagwrap，Image preview，IntelliSense for CSS class names in HTML，JavaScript (ES6) code snippets，JavaScript Atom Grammar，JavaScript Snippet Pack，JavaScript Snippets，jQuery Code Snippets，Live Sass Compiler，Live Server，markdownlint，open in browser，Path Intellisense，PHP Intelephense，Project Manager，Settings Sync，StandardJS - JavaScript Standard Style，TSLint，Vetur，View In Browser，vscode-icons，Xml Complete，XML Format，XML Formatter，XML Tools
在一个空白的.html文件中自动生成模板：输入“!”然后按Tab键
在一个空白的.vue文件中自动生成模板：输入“vue”，然后按“↓”键找到“<vue> with default.vue”，然后按Tab键
四、HbuilderX中常见的快捷键
格式化代码块（重排代码格式）：“Ctrl”+“K”
包围（给一段选中内容的前后加上标签）：“Ctrl”+“]”
反包围（去掉一段选中内容前后的标签）：“Ctrl”+“Shift”+“]”
添加多光标/列选择（让光标在多行中闪烁）：“Ctrl”+“鼠标左键单击”，或者Alt”+“鼠标左键拖动”
