前端Emmet语法文档

作者: Vurtex | 来源:发表于2019-03-27 16:06 被阅读0次

Emmet语法

https://www.w3cplus.com/tools/emmet-cheat-sheet.html
sublime安装emmet

按Ctrl+`调出sublime text的console
粘贴以下代码到底部命令行并回车： import urllib2,os;pf=’Package Control.sublime-package’;ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(’ ‘,’%20’)).read())
重启Sublime Text
在Perferences->package settings中看到package control，则表示安装成功

ul>li*5

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

后代 nav>ul>li

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

兄弟 div+p+bq

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

上级 div+div>p>span+em^bq

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

div+div>p>span+em^^bq

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

分组 div>(header>ul>li*2>a)+footer>p

    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

(div>dl>(dt+dd)*3)+footer>p

    <div>
        <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <footer>
        <p></p>
    </footer>

乘法 ul>li*5

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

自增 ul>li.item$*5

    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
    </ul>

h[title=item]{header $}*3

    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
    </ul>

ul>li.item$$$*5

    <ul>
        <li class="item001"></li>
        <li class="item002"></li>
        <li class="item003"></li>
        <li class="item004"></li>
        <li class="item005"></li>
    </ul>

ul>li.item$@-*5

    <ul>
        <li class="item5"></li>
        <li class="item4"></li>
        <li class="item3"></li>
        <li class="item2"></li>
        <li class="item1"></li>
    </ul>

ul>li.item$@3*5

    <ul>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
    </ul>

ID和类属性 #header

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

.title

    <div class="title"></div>

form#search.wide

<form action="" id="search" class="wide"></form>

p.class1.class2.class3

    <p class="class1 class2 class3"></p>

自定义属性 p[title=”Hello world”]

    <p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

    <td rowspan="2" colspan="3" title=""></td>

[a=’value’ b=”value2”]

    <div a="value" b="value2"></div>

文本{} a{click me}

    <a href="">click me</a>

p>{click}+a{here}+{to continue}

    <p>click<a href="">here</a>to continue</p>

隐式标签 .class

    <div class></div>

em>.class

    <em><span class></span></em>

ul>.class

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

table>.row>.col

    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>

a

    <a href=""></a>

a:link

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

a:mail

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

abbr

    <abbr title=""></abbr>

acronym

    <acronym title=""></acronym>

base

    <base href="">

basefont

    <basefont>

br

    <br>

frame

    <frame>

hr

    <hr>

bdo

    <bdo dir=""></bdo>

bdo:r

    <bdo dir="rtl"></bdo>

bdo:l

    <bdo dir="ltr"></bdo>

col

    col>

link

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

link:css

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

link:print

    <link rel="stylesheet" href="print.css" media="print">

link:favicon

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

link:touch

    <link rel="apple-touch-icon" href="favicon.png">

link:rss

    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

link:atom

    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">

meta

    <meta>

meta:utf

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

meta:win

    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251">

meta:vp

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

meta:compat

    <meta http-equiv="X-UA-Compatible" content="IE=7">

style

    <style></style>

script

    <script></script>

script:src

    <script src=""></script>

img

    <img src="" alt="">

iframe

    <iframe src="" frameborder="0"></iframe>

embed

    <embed src="" type="">
```html

object  

```html
    <object data="" type=""></object>

param

    <param name="" value="">

map

    <map name=""></map>

area

    <area shape="" coords="" href="" alt="">

area:c

    <area shape="circle" coords="" href="" alt="">

area:r

    <area shape="rect" coords="" href="" alt="">

area:p

    <area shape="poly" coords="" href="" alt="">

form

    <form action=""></form>

form:get

    <form action="" method="get"></form>

form:post

    <form action="" method="post"></form>

label

    <label for=""></label>

input

    <input type="text">

inp

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

input:hidden

    <input type="hidden" name="">

input:h

    <input type="hidden" name="">

input:hidden

    <input type="hidden" name="">

input:text,input:t

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

input:search

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

input:email

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

input:url

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

input:password

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

input:p

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

input:datetime

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

input:date

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

input:datetime-local

    <input type="datetime-local" name="" id="">

input:month

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

input:week

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

input:time

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

input:number

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

input:color

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

input:checkbox

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

input:c

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

input:r

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

input:range

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

input:file

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

input:f

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

input:s

    <input type="submit" value="">

input:image

    <input type="image" src="" alt="">

input:i

    <input type="image" src="" alt="">

input:button

    <input type="button" value="">

input:b

    <input type="button" value="">

isindex

    <isindex>

input:reset

    <input type="reset" value="">

select

    <select name="" id=""></select>

option

    <option value=""></option>

textarea

    <textarea name="" id="" cols="30" rows="10"></textarea>

menu:context

    <menu type="context"></menu>

menu:c

    <menu type="context"></menu>

menu:toolbar

    <menu type="toolbar"></menu>

menu:t

    <menu type="toolbar"></menu>

video

    <video src=""></video>

audio

    <audio src=""></audio>

html:xml

    <html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

    <keygen>

command

    <command>

bq

    <blockquote></blockquote>

acr

    <acronym title=""></acronym>

fig

    <figure></figure>

figc

    <figcaption></figcaption>

ifr

    <iframe src="" frameborder="0"></iframe>

emb

    <embed src="" type="">

obj

    <object data="" type=""></object>

src

    <source></source>

cap

    <caption></caption>

colg

    <colgroup></colgroup>

fst,fest

    <fieldset></fieldset>

btn

    <button></button>

btn:r

    <button type="reset"></button>

btn:s

    <button type="submit"></button>

网友评论

本文标题：前端Emmet语法文档

本文链接：https://www.haomeiwen.com/subject/riozvqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

前端Emmet语法文档

Emmet语法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读