Emmet语法,针对VS的使用

Emmet语法

1. 快速征程html结构语法

1. 生成标签时，直接输入标签名，按Tab键 ；如div 按Tab键 生成<div></div>
2. 生成多个相同的标签，加上星号就可以，按liTab键；**div星号3 **就快速生成3个div标签
3. 如果有父级关系的标签，二者标签名之间加上大于号，再按Tab键；例如ul>li
4. 如果有兄弟关系的标签，二者标签名之间加上加号，再按Tab键；
5. 如果想生成带有类名的或者id的标签(类名和id名都是自定义的)，默认的是div标签
   若输入：
   1. .ao 再按Tab键； 就会直接生成<div class="ao"></div>
   2. #ao 再按Tab键； 就会直接生成 <div id="ao"></div>
6. 如果想生成不是带有类名的或者id的div标签,直接再点号或者井号前添加标签名，再按Tab键
   p.ao 再按Tab键；<p class="ao"></p>
   span.one 再按Tab键；<span class="one"></span>
7. 如果想使生成的类名或者id名称是有123等有顺序的，可以在类名的后面添加$

<!-- 例如   .demon$星号3  再按Tab键； 就会直接生成 -->
<div class="demon1"></div>
<div class="demon2"></div>
<div class="demon3"></div>

8. 如果想要在生成的标签内部写内容可以用{}表示，

  <!-- 例如：  div{学习呀，宝贝}4   再按 再按Tab键 -->
  <div>呀，宝贝</div> 
    <div>呀，宝贝</div>
    <div>呀，宝贝</div>
    <div>呀，宝贝</div>
    ```
### 2. 快速生成CSS样式（就是采取简写的方法）
直接在`<style>`中不可以
**简写就是各个首字母写在一起**
必须在选择器之中来写：
1. w   再按Tab键；就会直接生成  width: ;
2. h   再按Tab键；就会直接生成   height: ;
3. h2   再按Tab键；就会直接生成   height: 2px;
4. w2     再按Tab键；就会直接生成   width: 2px;
5. tac     再按Tab键；就会直接生成     text-align: center;
6. ti2em    再按Tab键；就会直接生成       text-indent: 2em;
7. lh20px     再按Tab键；就会直接生成     line-height: 20px;

1. 是文档类型声明，告诉浏览器使用哪种HTML版本来显示网页 本身不是HTML标签 2.lang目的定义当前文档的显示语言，en是英语，zh-CN是中文网页 不过在写这两个中的任何一个语言，同时也可以显示另一个语言 3. charset是字符集，UTF-8是其中的一种 ```