Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的一個工具,Emmet是很成熟的並且非常適用於編寫HTML/XML 和 CSS 代碼的前端開發人員，但也可以用於編程語言。
所有的快捷鍵都是 代碼簡寫鍵+tab鍵 完成；
1 html:
1.1 html的初始化：
   html:5 或者!
    在空白的html頁中會生成html5的標簽文檔

    html:5 或! 用於HTML5文檔類型
    html:xt：用於XHTML過渡文檔類型
    html:4s：用於HTML4嚴格文檔類型

1.2 meta標簽
    meta:vp

<meta name="viewport"
 
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

1.3 link標簽
    link

<link rel="stylesheet" href="">

    link:css

<link rel="stylesheet" href="style.css">

    link:favicon:瀏覽器顯示圖標

<link rel="shortcut icon" type="image/x-icon"
 
 href="favicon.ico">

1.4 a鏈接
    a

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    a:link

<a href="http://"></a>

    a[href=‘www.quyangyu.com‘]

<a href="www.quyangyu.com"></a>

1.5 input
    input

<input type="text">

    inp

<input type
 
="text" name="" id="">

1.6 初級語法1：
    1.6.1 標簽+tab
    1.6.2 類名，id
        header.head

<header class="head"></header>

        header#head

<header id="head"></header>

    1.6.3 元素的嵌套：>後代元素
        article>section>aside

       <article>
            <section>
                <aside></aside>
            </section>
        </article>    

    1.6.4 同級元素：+
        span+p+div

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

    1.6.5 上一級元素：^
        div>div*3^p

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

        div>div>div*3^^p 上上一級元素

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

    1.6.6 元素的分組:()
        article>(section>aside*3+section>aside)^footer>(nav>aside*3)

        <article>
            <section>
                <aside></aside>
                <aside></aside>
                <aside></aside>
                <section>
                    <aside></aside>
                </section>
            </section>
        </article>
        <footer>
            <nav>
                <aside></aside>
                <aside></aside>
                <aside></aside>
            </nav>
        </footer>

    1.6.7 元素的乘法：*
        aside*5

        <aside></aside>
        <aside></aside>
        <aside></aside>
        <aside></aside>
        <aside></aside>

    1.6.8 標簽屬性：[]
        a[href="www.quyangyu.com"]

<a href="www.quyangyu.com"></a>

        inp[type=‘number‘]

<input type="number" name="" id="">

    1.6.9 元素的內容：{}
        div{哈哈哈哈}

<div>哈哈哈哈</div>

    1.6.10 元素的自增： $
        div.item$*4

        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>

        div.item${哈哈哈$}*4  //註意內容要寫到個數的前面

        <div class="item1">item 1</div>
        <div class="item2">item 2</div>
        <div class="item3">item 3</div>
        <div class="item4">item 4</div>    

        @指定順序
        @-指定逆序
        [email protected]*4

        <div class="item4"></div>
        <div class="item3"></div>
        <div class="item2"></div>
        <div class="item1"></div>    

        @數值 指定開始基數
        [email protected]*4

        <div class="item4"></div>
        <div class="item5"></div>
        <div class="item6"></div>
        <div class="item7"></div>    

  1.7 隱式簡寫
        .header

<div class="header"></div>

        #header

<div id="header"></div>

2 css:
    2.1 值：
        p 表示%
        e 表示 em
        r 表示 rem
        x 表示 ex
        h100

height: 100px;

        h100p

 height: 100%;

        h100e

 height: 100em;

        h100r

height: 100rem;

        h100x

height: 100ex;

    2.2 @f

        @font-face {
            font-family: ;
            src: url();
        }

        @f+

        @font-face {
            font-family: ‘FontName‘;
            src: url(‘FileName.eot‘);
            src: url(‘FileName.eot?#iefix‘) format(‘embedded-opentype‘), url(‘FileName.woff‘) format(‘woff‘), url(‘FileName.ttf‘) format(‘truetype‘), url(‘FileName.svg#FontName‘) format(‘svg‘);
            font-style: normal;
            font-weight: normal;
        }    

    2.3 ov:h、ov-h、ovh和oh

overflow: hidden;

Emmet學習教程