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

最新推荐文章于 2020-12-13 10:18:47 发布

trade-off

最新推荐文章于 2020-12-13 10:18:47 发布

阅读量473

点赞数 3

分类专栏：前端文章标签： Emmet

本文链接：https://blog.csdn.net/muxinxin880422/article/details/77718604

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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

在Sublime Text3安装Emmet插件

Emmet-HTML简写语法

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

<div></div>
<p></p>
<food></food>

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

空格（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>