created: 2023-02-21T14:00:58
tags: [html]

emmet

语法

• 嵌套(>)
  div>ul>li

<div>
  <ul>
    <li></li>
  </ul>
</div>

• 并列(+)
  div+p+span

<div></div>
<p></p>
<span></span>

• 上层(^)
  div+div>p>span+em^p: ^可重复使用

<div></div>
<div>
  <p><span></span><em></em></p>
  <p></p>
</div>

• 乘法
  p*5
• 分组
  div>(header>ul>li*2>a)+footer>p
• 内容
  div{hello}
• ID和Clas
  p#text1>p.text2
• 自定义属性
  div[title="Hello" colspan=3]
• 编号($)
  ul>li.item$*5
ul>li.item$$$*5: 格式(001)
  ul>li.item$@-*5: 降序
  ul>li.item$@3*5: 从3开始

css

• 简写
  w10>width:10px
fl>float:left
lh10>line-hight:10
• 单位
  p>%,e>em,x>ex
• 颜色
  #1>#111111,#e0>#e0e0e0,#fc0>#fc0fc0
• 渐变
  lg(left, #fc0 30%, red)

background-image: -webkit-linear-gradient(left, #fco 30%, red);
background-image: -moz-linear-gradient(left, #fco 30%, red);
background-image: -o-linear-gradient(left, #fco 30%, red);
background-image: linear-gradient(to right, #fco 30%, red);

border: lg(left, #fc0 30%, red)

• 透明
  -wm-trf
-wm-trf[数字]
• 圆角
  -bdrs
-bdrs[数字]