html tab 快速,html文档Tab组合键快速输入

快速输入

一、 ！或 html:5 按tab : html5文档结构 ；

html:xt ：用于XHTML过渡文档；

html:4s ：HTML4严格文档

二、p.myclass、p#myid

三、标签中的内容

h1{内容} -->

内容

四、属性

a[href="index"] -->

五、 嵌套

p>span -->

p+span -->

；+ 表示同级元素

p>span^b -->

; ^在b前面，可以吧b提高一级 (或理解为^前面的代码提升一行)

六、 分组

(.fl>p)+(.fr>span) -->

七、隐式标签

声明一个带类的标签，只需输入div.item，就会生成

在过去版本中，可以省略掉div，即输入.item即可生成

现在如果只输入.item，则Emmet会根据父标签进行判定。比如在

• 中输入.item，就会生成
• 。

  一些隐式标签：

  li：用于ul和ol中

  tr：用于table、tbody、thead和tfoot中

  td：用于tr中

  option：用于select和optgroup中

  八、 定义多个元素 号

  ul>li3 -->

  九、定义多个相同属性

  ul>li.item*3 -->

  十、定义多个属性(有数字递增)

  ul>li.item$*3 -->

  十一、css缩写

  w100 -->width:100px;

  w100p -->width:100%;

  p 表示% e 表示 em x 表示 ex

  十二、模糊匹配

  bac --> background-color

  fz16 --> font-size:16px;

  等等...

  十三、供应商前缀

  如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：

  -webkit-transform: ;

  -moz-transform: ;

  -ms-transform: ;

  -o-transform: ;

  transform: ;

  你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：

  -webkit-super-foo: ;

  -moz-super-foo: ;

  -ms-super-foo: ;

  -o-super-foo: ;

  super-foo: ;

  如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

  -webkit-transform: ;

  -moz-transform: ;

  transform: ;

  w 表示 -webkit

  m 表示 -moz

  s 表示 -ms

  o 表示 -o-

  十四、 一些组合

  缩写：h$[title=item$]{Header $}*3

  Header 1

  Header 2

  Header 3

  缩写 ul>li.item$@-*5>a[href="index$"]{内容 $}

  • 内容 1
  • 内容 2
  • 内容 3
  • 内容 4
  • 内容 5

  缩写：ul>li.item$$$*5

  缩写：ul>li.item$@-*5

  缩写：ul>li.item$@3*5

  暂时总结到此，本文非原创，是因某次需要，而查找的，方便同学们快速掌握！