zoukankan      html  css  js  c++  java
  • Emmet (Zen Coding) 官方文档中HTML语法的总结

      1 1. 嵌套操作----------
      2  
      3 子操作: >
      4  
      5 div>ul>li
      6  
      7 <div>
      8     <ul>
      9         <li></li>
     10     </ul>
     11 </div>
     12  
     13 并列:+
     14  
     15 div+ul>li
     16  
     17 <div></div>
     18 <ul>
     19     <li></li>
     20 </ul>
     21  
     22 上级:^
     23  
     24 ul>li^div
     25  
     26 <ul>
     27     <li></li>
     28 </ul>
     29 <div></div>
     30  
     31 ul>li>a^^div 上级多层
     32  
     33 <ul>
     34     <li><a href=""></a></li>
     35 </ul>
     36 <div></div>
     37  
     38 重复:*
     39  
     40 ul>li*3
     41  
     42 <ul>
     43     <li></li>
     44     <li></li>
     45     <li></li>
     46 </ul>
     47  
     48 分组:()
     49          
     50 div>(p>span)*2
     51  
     52 <div>
     53     <p><span></span></p>
     54     <p><span></span></p>
     55 </div>
     56  
     57 2. 属性操作----------
     58  
     59 id和类
     60  
     61 div#header+div.main+div#footer
     62  
     63 <div id="header"></div>
     64 <div class="main"></div>
     65 <div id="footer"></div>
     66  
     67 属性值
     68  
     69 a[title=test target=_self]
     70  
     71 <a title="test" target="_self" href=""></a>
     72  
     73 数列值:$
     74  
     75 p.item$*3
     76  
     77 <p class="item1"></p>
     78 <p class="item2"></p>
     79 <p class="item3"></p>
     80  
     81 p.item$$*3
     82  
     83 <p class="item01"></p>
     84 <p class="item02"></p>
     85 <p class="item03"></p>
     86  
     87 数列操作符:@
     88  
     89 p.item$@-*3   @- = -1
     90  
     91 <p class="item3"></p>
     92 <p class="item2"></p>
     93 <p class="item1"></p>
     94  
     95 p.item$@3*3  @3 = 从3开始3次
     96  
     97 <p class="item3"></p>
     98 <p class="item4"></p>
     99 <p class="item5"></p>
    100  
    101 p.item$@-3*3 @-3 = 3次后到3结束
    102  
    103 <p class="item5"></p>
    104 <p class="item4"></p>
    105 <p class="item3"></p>
    106  
    107 3. 字符操作----------        
    108  
    109 字符操作:{}
    110  
    111 a{click}
    112          
    113 <a href="">click</a>   
    114          
    115 a>{click}+span{me}
    116  
    117 <a href="">click<span>me</span></a>
    118  
    119 4. 缺省元素----------
    120  
    121 .header+.footer  ---------------  div.header+div.footer
    122  
    123 ul>.item*3 -------------- ul>li.item*3
    124  
    125 table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3
    126  
    127  
    128 最后注意:如果搞不清楚顺序了,多用()。就像1+2×3,实际上是(1+2)×3

    毋须多言,网上找的,提高编程效率的利器。

  • 相关阅读:
    servlet
    grep命令
    sort排序命令
    shell脚本面试
    查看远端的端口是否通畅3个简单实用案例!
    mail命令
    linux系统优化的方法
    shell数组
    shell函数介绍语法说明及基本例子
    循环结构的多个控制命令对比与实际案例
  • 原文地址:https://www.cnblogs.com/roverliang/p/5090680.html
Copyright © 2011-2022 走看看