美文网首页Other
[IDE] Emmet使用

[IDE] Emmet使用

作者: 何幻 | 来源:发表于2016-03-05 08:07 被阅读9次

    1. HTML

    (1)生成默认文档

    ! 
    => 生成HTML5文档类型
    
    html:5
    => 生成HTML5文档类型
    
    html:xt 
    => 生成XHTML过渡文档类型
    
    html:4s 
    => 用于HTML4严格文档类型
    

    例如:

    !
    =>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    

    (2)快速生成标签

    div#test
    =>
    <div id="test"></div>
    
    div.test
    =>
    <div class="test"></div>
    
    div#test.test
    =>
    <div id="test" class="test"></div>
    
    a[href=#]
    =>
    <a href="#"></a>
    
    div{test}
    =>
    <div>test</div>
    

    (3)嵌套标签
    <u></u>>:子元素符号
    <u></u>+:同级标签符号
    <u></u>^:可以使该符号后的标签提升一行

    div>span+div^p
    =>
    <div>
        <span></span>
        <div></div>
    </div>
    <p></p>
    

    (4)分组

    (.foo>h1)+(.bar>h2)
    =>
    <div class="foo">
        <h1></h1>
    </div>
    <div class="bar">
        <h2></h2>
    </div>
    

    (5)隐式标签
    不写标签名,会根据父标签自动判断。
    li:用于ul和ol中
    tr:用于table、tbody、thead和tfoot中
    td:用于tr中
    option:用于select和optgroup中

    select>.test^.test
    =>
    <select name="" id="">
        <option class="test"></option>
    </select>
    <div class="test"></div>
    

    (6)多个元素

    ul>li*3
    =>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    

    2. CSS

    (1)属性

    body{
        w100p+h200
    }
    =>
    body{
        width: 100%;
        height: 200px;
    }
    

    单位别名列表:
    p 表示%
    e 表示 em
    x 表示 ex

    (2)自动加供应商前缀

    trf
    =>
    -webkit-transform: ;
    -moz-transform: ;
    -ms-transform: ;
    -o-transform: ;
    transform: ;
    

    (3)手动加供应商前缀

    -wm-trf
    =>
    -webkit-transform: ;
    -moz-transform: ;
    transform: ;
    

    前缀缩写如下:

    w 表示 -webkit-
    m 表示 -moz-
    s 表示 -ms-
    o 表示 -o-

    相关文章

      网友评论

        本文标题:[IDE] Emmet使用

        本文链接:https://www.haomeiwen.com/subject/qlynkttx.html