1014作业——Emmet常用的8种语法形式

Emmet常用8中语法形式

1.标签与内容

语法结构 ====> ‘{text}’

    <!-- div{分类} -->
    <div>分类</div>
    <hr>

2.属性和语法糖

2.1属性

语法结构 ====> ‘[attr]’

   <!-- [id=name]{名字} -->
   <div id="name">名字</div>

2.2语法糖

ID和类属于高频属性 Emmet为他们定制了语法糖
ID用 # 表示，类用 . 表示
语法结构 ====> # 或者 .

   <!-- #name.user{用户} -->
   <div id="name" class="user">用户</div>

3.重复

多用于快速写出多个相同属性的元素
语法结构 ====> ‘*值’

   <!-- .container{box}*5 -->
   <div class="container">box</div>
   <div class="container">box</div>
   <div class="container">box</div>
   <div class="container">box</div>
   <div class="container">box</div>

4.父子

多用于存在所属关系的表达
语法结构 ====> ‘>’ 用大于号表示

   <!-- nav>button.button{button}*5 -->
   <nav>
    <button class="button">button</button>
    <button class="button">button</button>
    <button class="button">button</button>
    <button class="button">button</button>
    <button class="button">button</button>
   </nav>

5.兄弟

主要用于同级元素的快速书写
语法结构 ====> ‘+’ 用加号表示

   <!-- button.button{按钮}+input[search]{搜索} -->
   <button class="button">按钮</button><input type="text" search="">搜索</input>

6.父级

用于快速书写有父子关系，且有兄弟关系元素
语法结构 ====> ‘^’ 表示

   <!-- nav>li{列表}*3^.container{内容} -->
   <nav>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
   </nav>
   <div class="container">内容</div>

7.分组

利于理解代码的逻辑性
语法结构 ====> ‘()’ 用括号表示

   <!-- (nav>li>a{link}^^.container{内容})+#app -->
   <nav>
    <li><a href="">link</a></li>
   </nav>
   <div class="container">内容</div>
   <div id="app"></div>

8.序号

用于有列表元素的排序标记
语法结构 ====> ‘$’ 或者 ‘$@数值’

序号，默认从1开始

   <!-- ul>li*5{$ 年级} -->
   <ul>
    <li>1 年级</li>
    <li>2 年级</li>
    <li>3 年级</li>
    <li>4 年级</li>
    <li>5 年级</li>
   </ul>

序号定位

   <!-- ul>li*3{$@3 年级} -->
   <ul>
    <li>3 年级</li>
    <li>4 年级</li>
    <li>5 年级</li>
   </ul>

倒序

   <!-- ul>li*5{$@-1 年级} -->
   <ul>
    <li>5 年级</li>
    <li>4 年级</li>
    <li>3 年级</li>
    <li>2 年级</li>
    <li>1 年级</li>
   </ul>