Emmet语法

介绍一些日常学习到的Emmet语法，作为了解，并无多大实际作用，仅介绍部分，欢迎补充实用性语法

目录

HTML 语法

CSS 语法

---

HTML 语法：

基本元素：

• !：HTML 骨架（html>head>title+body）
• div：创建一个 <div> 元素

      <div></div>
  

• ul>li：创建一个无序列表，包含列表项

      <ul>
        <li></li>
      </ul>

类和 ID：

• .header：创建一个带有 header 类的元素

      <div class="header"></div>
  

• #header：创建一个带有 header ID 的元素

      <div id="header"></div>
  

属性：

• input[type="text"]：创建一个类型为 text 的 <input> 元素

      <input type="text">
  

• a[href="http://example.com"]：创建一个带有 href 属性的 <a> 元素

     <a href="http://example.com"></a>
  

层级结构：

• div>ul>li：创建一个 <div> 元素，包含一个无序列表，每个列表项都是一个 <li> 元素

      <div>
        <ul>
          <li></li>
        </ul>
      </div>
  

• div+p：创建一个 <div> 元素后跟一个 <p> 元素

      <div></div>
      <p></p>
  

重复元素：

• ul>li.item$*3：创建一个无序列表，包含三个带有 item1、item2 和 item3 类的 <li> 元素

      <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
      </ul>

• ul>li.item$*3>a：创建一个无序列表，每个 <li> 元素包含一个 <a> 元素

      <ul>
        <li class="item1"><a href=""></a></li>
        <li class="item2"><a href=""></a></li>
        <li class="item3"><a href=""></a></li>
      </ul>

分组和选择：

• div.group>div.item$*2：创建一个 <div> 元素，包含两个 <div> 元素，每个都有 item1 和 item2 类

      <div class="group">
        <div class="item1"></div>
        <div class="item2"></div>
      </div>

文本内容：

• p{Hello, World!}：创建一个 <p> 元素，包含文本 "Hello, World!"

      <p>Hello, World!</p>

CSS 语法：

属性和值：

• b:0：生成 border: 0;
• m:5：生成 margin: 5px;

属性快捷方式：

• p:10：生成 padding: 10px;
• m:10：生成 margin: 10px;

值缩写：

• bg:blue：生成 background: blue;
• c:#FFF：生成 color: #FFFFFF;