Emmet (Zen Coding) 官方文档中HTML语法的总结

最新推荐文章于 2021-12-21 18:52:31 发布

转载最新推荐文章于 2021-12-21 18:52:31 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/roverliang/p/5090680.html

本文介绍了一种使用HTML和CSS进行快速页面布局的方法，包括嵌套、并列、上级元素选择及重复等操作，并展示了如何利用这些技巧高效创建复杂的网页结构。

  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

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

转载于:https://www.cnblogs.com/roverliang/p/5090680.html