emment语法搜集

最新推荐文章于 2024-01-31 10:45:58 发布

逸世尘角

最新推荐文章于 2024-01-31 10:45:58 发布

阅读量639

点赞数

文章标签： emment 语法

本文链接：https://blog.csdn.net/yz1988computer/article/details/50186729

版权

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>

逸世尘角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
emment语法搜集

emment作为前端开发必不可少的工具，帮我们节省了很多录入工作，整理语法如下：1. 文档初始化html:5或者!，输出： Document 用于HTML5文档类型html:xt，输出： Document 用于XHTML过渡文档类型html:4s，输出： Document 用于HTML4严格文档类型2. 选择符#
复制链接

扫一扫