Emmet学习教程

Posted 2020-10-10 seafwg

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;