Emmet插件相比较实用常用的写法,HTML基本语法

By admin in 4858美高梅 on 2019年4月21日
  1. 嵌套操作———- 子操作: > div>ul>li
  1. 嵌套操作———- 子操作: > div>ul>li

Emmet (Zen Coding) HTML基本语法,emmetcoding

  1. 嵌套操作———- 子操作: > div>ul>li

并列:+ div+ul>li

上级:^ ul>li^div

ul>li>a^^div 上级多层

重复:* ul>li*3 分组:() div>(p>span)*2

  1. 属性操作———- id和类 div#header+div.main+div#footer

属性值 a[title=test target=_self] 数列值:$ p.item$*3

 

 

 

p.item$$*3

 

 

 

数列操作符:@
[email protected]*3
@- = -1

 

 

 

[email protected]*3
@3 = 从3开始3次

 

 

 

[email protected]*3
@-3 = 3次后到3结束

 

 

 

  1. 字符操作———- 字符操作:{} a{click} click a>{click}+span{me}
    clickme 四. 缺省成分———- .header+.footer —————
    div.header+div.footer ul>.item*3 ————– ul>li.item*3
    table>.row*4>.cell*3 ————–
    table>tr.row*4>td.cell*3

 

 

转自  

(Zen Coding) HTML基本语法,emmetcoding 1.
嵌套操作———- 子操作: divulli 并列:+ div+ulli 上级:^ ulli^div
ullia^^div 上级多层 重复:* ulli*3 分…

看了一些有关Emmet插件写法的文书档案,港真,怎么能够写这么长啊。其实明白多少个大意要点加上实践基本就能上手写了哟

 

 

杂话

并列:+ div+ul>li

并列:+ div+ul>li

自家目前有一篇【4858美高梅,先天察觉新陆地:haml和Emmet
】,其实壹先河的主张是写给自身看的。

 

 

有人去阅读小编的博客和评价,尽管不算多,不过对于本身那种刚入门的小白渣渣依然受宠若惊的。作者那热闹的蠢样子也是平日被男票说四不肆傻……ㄟ(⊙ω⊙ㄟ)

上级:^ ul>li^div

上级:^ ul>li^div

哦,跑偏了。同理可得,现在写东西随意是给自个儿看也好,给旁人看都好。秉持着分享的神气势必认真好好的写(~Q~)

 

 

 

ul>li>a^^div 上级多层

ul>li>a^^div 上级多层

关于Emmet

 

 

Emmet插件的前身是Zen coding,能够大幅度进步前端开拓功效的三个工具,也有人说类似于jade(高质量的模版引擎,它深受Haml 影响,它是用 JavaScript 落成的,并且可以供 Node
使用)。再官方一些的官方语言的叽叽喳喳作者就一窍不通写了,直接百度能够找到。

Emmet插件相比较实用常用的写法,HTML基本语法。重复:* ul>li*3 分组:() div>(p>span)*2

重复:* ul>li*3 分组:() div>(p>span)*2

 

 

 

Emmet帮助的编辑器

  1. 品质操作———- id和类 div#header+div.main+div#footer
  1. 属性操作———- id和类 div#header+div.main+div#footer
  • Sublime Text 2
  • TextMate 1.x
  • Eclipse/Aptana
  • Coda 1.6 and 2.x
  • Espresso
  • Chocolat
    (通过“Install Mixin”对话框增多)
  • Komodo Edit/IDE
    (通过Tools → Add-ons菜单加多)
  • Notepad++
  • PSPad
  • <textarea>
  • CodeMirror2/3
  • Brackets

 

 

 

 

 

 

 

 

其三方插件的支撑

属性值 a[title=test target=_self] 数列值:$ p.item$*3

属性值 a[title=test target=_self] 数列值:$ p.item$*3

下边这个编辑器的插件都是由第3方开辟者所提供的,所以大概并不协助全部Emmet的法力和特色。

 

 

  • SynWrite
  • WebStorm
  • PhpStorm
  • Vim
  • HTML-Kit
  • HippoEDIT
  • CodeLobster PHP Edition
  • TinyMCE

 

 

 

 

 

Emmet安装格局(Sublime text
三安装emmet插件的主意:)

p.item$$*3

p.item$$*3

因为自个儿用的是Sublime text
3,其余编辑器安装的方法大概要依据本人的须要在英特网搜刮了

 

 

 

 

 

Emmet插件实用常用方法

 

 

数列操作符:@ p.item$@-*3 @- = -1

数列操作符:@ p.item$@-*3 @- = -1

那篇文书档案写的很明显,也有安装插件的点子。不过介绍的主意太多,认为有点冗长,小编聚集了一些作者个人感觉相比较实用常用的措施。

 

 

略写版

 

 

div>(header>ul>li*二>a)+footer>p(+号连接下一个弟兄元素)
(div>dl>(dt+dd)*三)+footer>p(括号内为3个组)
ul>li$[title=item$]{hhh
$}*5(li$,表示li自增+1)
h.item${hhh $}*伍({}括号内为呈现文本)
ul>li.item$$$*五($为自增,八个$为二人数字)
ul>li.item$@3*伍(@从三起来自增+1)
ul>li.item$@-*5(@-,自减)
ul>li.item$@-3*伍(@-三,自减最小数字为3)
form#search.wide(#为id,.为类)
p[title=’hello
word’](自定义属性)

 

 

(隐式标签)

p.item$@3*3 @3 = 从3开始3次

p.item$@3*3 @3 = 从3开始3次

.class
em>.class
ul>.class
table>.row>.col
!(页面html开首代码缩写)
(缩写)
a
a:link
hr
link
link.css
meta:utf
script:src
img

 

 

 

 

 

详写版

 

 

div+div>p>span+em^bq(^为上级成分)

p.item$@-3*3 @-3 = 3次后到3结束

p.item$@-3*3 @-3 = 3次后到3结束

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

 

 

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

 

 

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

 

 

 

  1. 字符操作———- 字符操作:{} a{click} click a>{click}+span{me}
    clickme 四. 缺省成分———- .header+.footer —————
    div.header+div.footer ul>.item*3 ————– ul>li.item*3
    table>.row*4>.cell*3 ————–
    table>tr.row*4>td.cell*3
  1. 字符操作———- 字符操作:{} a{click} click a>{click}+span{me}
    clickme 肆. 缺省成分———- .header+.footer —————
    div.header+div.footer ul>.item*3 ————– ul>li.item*3
    table>.row*4>.cell*3 ————–
    table>tr.row*4>td.cell*3

ul>li*五(>为后代缩写,*代表有多少个)

 

 

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

 

 

div>(header>ul>li*二>a)+footer>p(+号连接下3个男生成分)

转自  

转自  

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

(div>dl>(dt+dd)*三)+footer>p(括号内为3个组)

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

ul>li$[title=item$]{hhh
$}*5(li$,表示li自增+1)

<ul>
    <li1 title="item1">hhh 1</li1>
    <li2 title="item2">hhh 2</li2>
    <li3 title="item3">hhh 3</li3>
    <li4 title="item4">hhh 4</li4>
    <li5 title="item5">hhh 5</li5>
</ul>

h.item${hhh
$}*五({}括号内为突显文本)

<h class="item1">hhh 1</h>
<h class="item2">hhh 2</h>
<h class="item3">hhh 3</h>
<h class="item4">hhh 4</h>
<h class="item5">hhh 5</h>

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$@3*5(@从三初步自增+壹)

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></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*伍(@-三,自减最小数字为3)

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

form#search.wide(#为id,.为类)

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

p[title=’hello word’](自定义属性)

<p title="hello word"></p>

(隐式标签)
.class

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

em>.class

<em></em>

ul>.class

<ul>
    <li class="class"></li>
</ul>

table>.row>.col

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

!(页面html先河代码缩写)

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

</body>
</html>

(缩写)
a

<a href=""></a>

a:link

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

hr

<hr>

link

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

link.css

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

meta:utf

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

script:src

<script src=""></script>

img

<img src="" alt="4858美高梅 1">

 

官方api:

api表:http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

 

(●-●) 真心讨厌弄文本格式,感到好浪费时间……

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有