标签：scala XML for 完成 strong dev 元素 sid styles
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>
@指定顺序
@-指定逆序
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;
标签：scala XML for 完成 strong dev 元素 sid styles
原文地址：http://www.cnblogs.com/intelwisd/p/7662396.html
