前端神器Emmet/zen coding---HTML速写

妖狐艹你老母 2022-06-09 06:59 176阅读 0赞

> 像变魔法一样，让你的HTML和CSS代码学会变身，这就是前端神器Emmet, 曾经叫做Zen Coding, 简单的语法，让你撸前端HTML和CSS有飞一般的感觉（博主目前还比较菜，正在路上。。。。。。）

## 在Sublime Text3安装Emmet插件 ##

--------------------

## Emmet-HTML简写语法 ##

1.  元素（element）  
    **你可以使用任何一个单词来表示一个标记，如div、p，也可是是food，它们都会被展开成标签名**

1.    
    
2.  嵌套操作符(nesting operators)  
    
    
     *  孩子关系（child）：>
     *  兄弟关系（sibling）: +
     *  向上一级（climb-up）：^
     *  倍数（multiplication）：\*
     *  组（grouping）：（）
3.  属性操作符(attribute operators)  
    
    
     *  id属性： item\#idname
     *  class属性: item.classname
     *  自定义属性： item\[attribute=”value”\]
     *  元素编号： $
     *  文本： \{ \}
     *  \-
4.  注意事项

> 空格（space）为开始和结束符，不能再简写表达式中包含空格，否则会引起表达式不能正确展开的错误

## 小例子 ##

例如：

html>head+body>div.demo>div#test>h1{列表}+ul>li#item${Item $}*10^h1#hello{hello}

会被展开成为

<html>
    <head></head>
    <body>
        <div class="demo">
            <div id="test">
                <h1>列表</h1>
                <ul>
                    <li id="item1">Item 1</li>
                    <li id="item2">Item 2</li>
                    <li id="item3">Item 3</li>
                    <li id="item4">Item 4</li>
                    <li id="item5">Item 5</li>
                    <li id="item6">Item 6</li>
                    <li id="item7">Item 7</li>
                    <li id="item8">Item 8</li>
                    <li id="item9">Item 9</li>
                    <li id="item10">Item 10</li>
                </ul>
                <h1 id="hello">hello</h1>
            </div>
        </div>
    </body>
    </html>

是不是很爽？！！！