您的位置：首页 > 其它

emment语法搜集

2015-12-05 16:15 225 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航