emment语法搜集
emment作为前端开发必不可少的工具，帮我们节省了很多录入工作，整理语法如下：
1. 文档初始化
html:5或者!，输出：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>用于HTML5文档类型</p> </body> </html>html:xt，输出：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <p>用于XHTML过渡文档类型</p> </body> </html>html:4s，输出：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <p>用于HTML4严格文档类型</p> </body> </html>2. 选择符
# id选择
. 类选择
[] 属性
{} 内容
div#test，输出：
<div id="test"></div>div.test，输出：
<div class="test"></div>a[href="#"]，输出：
<a href="#"></a>a[href="#"]{这是测试链接}，输出：
<a href="#">这是测试链接</a>
3.嵌套
> 后代
+兄弟
^上级
ul>li，输出：
<ul> <li></li> </ul>div>h1+p，输出：
<div> <h1></h1> <p></p> </div>div>ul>li>b>^span，输出：（注意，span本来应该作为b的子元素的）
<div> <ul> <li><b></b><span></span></li> </ul> </div>4.循环
()分组
*乘法
$自增
$@-自减
$@n n为数字，表示从n起序
ul>(li>a)*2或ul>li*2>a，输出：
<ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul>ul>li*3>a{链接$$}，输出：
<ul> <li><a href="">链接01</a></li> <li><a href="">链接02</a></li> <li><a href="">链接03</a></li> </ul>ul>li*3>{链接$@-}，输出：
<ul> <li>链接3</li> <li>链接2</li> <li>链接1</li> </ul>ul>li*3>a{链接$$@10}，输出：
<ul> <li><a href="">链接10</a></li> <li><a href="">链接11</a></li> <li><a href="">链接12</a></li> </ul>
接下来，让我们一句话生成一个导航页：
(#header>.nav>ul>(li>a{首页/链接$$/子链接$$/……})*5)+(#container>(#(.left_sidebar>.category>ul>(li>a[href=”#” title=”测试链接”]{侧边栏$$$})*5)+(#right_content>ul>li>a[href=”#”]>(img[alt=”缺省” src=” “])+span{图片描述}*12)))+#footer>ul>(li>a{关于/联系我们/…..})*4
输出：
<div id="header"> <div class="nav"> <ul> <li><a href="">首页/链接01/子链接01/……</a></li> <li><a href="">首页/链接02/子链接02/……</a></li> <li><a href="">首页/链接03/子链接03/……</a></li> <li><a href="">首页/链接04/子链接04/……</a></li> <li><a href="">首页/链接05/子链接05/……</a></li> </ul> </div> </div> <div id="container"> <div id=""> <div class="left_sidebar"> <div class="category"> <ul> <li><a href="" herf="”#”" title="”测试链接”">侧边栏001</a></li> <li><a href="" herf="”#”" title="”测试链接”">侧边栏002</a></li> <li><a href="" herf="”#”" title="”测试链接”">侧边栏003</a></li> <li><a href="" herf="”#”" title="”测试链接”">侧边栏004</a></li> <li><a href="" herf="”#”" title="”测试链接”">侧边栏005</a></li> </ul> </div> </div> </div> <div id="right_content"> <ul> <li><a href="”#”"> <img src="”" alt="”缺省”"> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> <span>图片描述</span> </a></li> </ul> </div> </div> <div id="footer"> <ul> <li><a href="">关于/联系我们/…..</a></li> <li><a href="">关于/联系我们/…..</a></li> <li><a href="">关于/联系我们/…..</a></li> <li><a href="">关于/联系我们/…..</a></li> </ul> </div>