emmet语法 笔记

使用vs code编辑器或者sublime(当然还有很多其他编辑器)都会有一个很实用功能,TAB键自动补全功能。特别简化了写前端代码的过程,大大提高了效率。

我把所有语法上传到了空间上,制作了一个单页:https://www.ihewro.com/emmet.html请右键新窗口打开)。
(来源于这个:http://docs.emmet.io/cheat-sheet/ 去掉了所有js和多余的部分。)

下面是自己的一些常用的记录(不断更新):

句法

child:>

nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Sibling:+(同级标签)

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

divpbq标签都属于同一等级

组合符号:()

(div>p>span)+bq

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

divbq属于同一等级

表示数目:*

ul>li*5

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

5个li标签

创建元素、ID、类

head

<head>
</head>

#head

<div id="head"></div>

head

<div class="head"></div>

三者可以结合使用,非常方便。

html内容

下面一些语法可以直接补全html模板,很酷!

!

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

</body>
</html>

自动补全html5初始代码

The last modification time is:December 20th, 2016 at 12:09 pm
If you think my article is useful to you, please feel free to appreciate

18 条评论

  1. 灰狼

    这配图,是故意图文不相关的吗?

    1. 友人C
      @灰狼

      不是呢,是没有配图就自动随机显示图片~我懒得加了,有时间把文章加上配图

  2. LiarOnce

    又换主题了啊,表情都不见了

    1. 友人C
      @LiarOnce

      表情到时候再加吧~

  3. 1900

    又换主题啦。

    1. 友人C
      @1900

      恩恩!

  4. 友人C

    测试评论

  5. 疯狂减肥带

    国产bia编辑器HBuilder也是不错的

    1. 疯狂减肥带
      @疯狂减肥带

      bia是什么鬼 :evil: 万恶的输入法

      1. 友人C
        @疯狂减肥带

        看起来功能好高级啊,但是界面不喜欢。我比较喜欢vs code界面,sublime用了material主题也挺好看的。

        1. 1900
          @友人C

          话说还是认识你的时候的第一个主题好看些。

          1. 友人C
            @1900

            那个主题好像是我移植的吧,换的太多都不记得了~

        2. 1900
          @友人C

          个人还是偏好sublimetext

          1. 友人C
            @1900

            恩,其实,我有时候几个同时用~[hahaha]

  6. 1900

    cool,原来还有这种功能。。

    1. 友人C
      @1900

      恩!sublime 和vs code 还有一些快捷键也特别方便

      1. 龙显文
        @友人C

        前端工具的话,hbuilder也做的不错

        1. 友人C
          @龙显文

          搜嘎,学习了!

Leave a Comment