Emmet学习教程

2023-07-29 09:25:10

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

<a href=""></a>

    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>

        @指定顺序
        @-指定逆序
        div.item$@-*4

        <div class="item4"></div>

        <div class="item3"></div>

        <div class="item2"></div>

        <div class="item1"></div>

        @数值 指定开始基数
        div.item$@4*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;

码农公寓

相关文章