首页 > 代码库 > emmet学习笔记
emmet学习笔记
Emment语法使用：按table键的结果
1.初始化：（HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等）
. html:或! :用于HTML5文档类型
. html:xt :用于XHTML过度文档类型
. html:4s :用于HTML4严格文档类型
2.轻松添加类、id、文本和属性
.如p.bar#foo :<p class="bar" id="foo"></p>
.定义HTML元素的内容和属性,输入h1{foo}和a[href=http://www.mamicode.com/#] :
<h1>foo</h1>
<a href="http://www.mamicode.com/#"></a>
3.嵌套
. > ：子元素符号，表示嵌套的元素（p>span :<p> <span></span> </p>）
. + ：同级标签符号 (p+span :<p></p> span></span>)
. ^ ：可以使该符号前的标签提升一行(p^span :<span> <p></p> </span>)
4.分组
.可以通过嵌套和括号来快速生成一些代码块,如：
(.foo>h1)+(.bar>h2) ：
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。
在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。
5.定义多个元素
ul>li*3 ：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
6.定义多个带属性的元素
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
emmet在css中的缩写：
w100 :width:100px;
h10p+m5e :height:10%;
margin:5em;
单位别名列表：
1 p 表示%
2 e 表示 em
3 x 表示 e
emmet学习笔记