HTML代码简写方法

 HTML代码写起来很费事,因为它的标签多。

一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。

常用的简写法,目前主要是Emmet和Haml两种,本文只介绍Emmet。

在Dreamweaver软件中键入简写代码然后按tab即可生成完整代码。

Emmet支持的简写规则,类似于CSS选择器(大写的E代表一个HTML标签):

    1. E 代表HTML标签。
  2. E#id 代表id属性。
  3. E.class 代表class属性。
  4. E[attr=foo] 代表某一个特定属性。
  5. E{foo} 代表标签包含的内容是foo。
  6. E>N 代表N是E的子元素。
  7. E+N 代表N是E的同级元素。
  8. E^N 代表N是E的上级元素。
  

 请看下面的例子。

  p
  
  p#main.item
  
  a[href=http://wikipedia.org]{维基百科}
  
  div>p
  
  div+p
  
  p>span^div

对应的HTML代码为:

     

     维基百科      
    

  
     
  

     

  

Emmet还提供了连写(E*N)和自动编号(E$*N)功能。

li*3>a
  
  div#item$.class$$*3
  

 对应的HTML代码为

  •   
  •   
  •      
      
      

     

    你可能感兴趣的:(HTML,前端,HTML,前端小技巧)