Emmet（zencoding）插件语法及常用简写

最新推荐文章于 2019-11-22 15:45:58 发布

BJ_benjamin

最新推荐文章于 2019-11-22 15:45:58 发布

阅读量1.4k

点赞数

分类专栏：前端之Problems

本文链接：https://blog.csdn.net/cuew1987/article/details/17226025

版权

前端之Problems 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、Emmet支持的简写规则:
1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。
二、Emmet连写（E*N）和自动编号（E$*N）
li*3>a
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
div#item$.class$$*3
<div id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>
div#item$.class$*3
<div id="item1" class="class1"></div>
<div id="item2" class="class2"></div>
<div id="item3" class="class3"></div>
三、常用简写操作
a)header+main+footer:
<header></header>
<main></main>
<footer></footer>
b)table[width=100%][cellpadding=0][cellspacing=0][border=0](thead>tr>th*5)(tbody>tr*2>td*5)
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
c)nav>ul>(li>a[href=#]{Link$})*5
<nav>
	<ul>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</nav>
d)nav>ul>(li>a[href=#]{Link$$})*5
<nav>
	<ul>
		<li><a href="#">Link01</a></li>
		<li><a href="#">Link02</a></li>
		<li><a href="#">Link03</a></li>
		<li><a href="#">Link04</a></li>
		<li><a href="#">Link05</a></li>
	</ul>
</nav>
e)nav>ul>(li>a[href=#]{Link$})*5
<nav>
	<ul>
		<li><a href="#">Link1</a></li>
		<li><a href="#">Link2</a></li>
		<li><a href="#">Link3</a></li>
		<li><a href="#">Link4</a></li>
		<li><a href="#">Link5</a></li>
	</ul>
</nav>
f)html:5
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
g)div.layout>div.layout_t+(div.layout_c>div.layout_c_l+div.layout_c_r)+div.layout_b
<div class="layout">
	<div class="layout_t"></div>
	<div class="layout_c">
		<div class="layout_c_l"></div>
		<div class="layout_c_r"></div>
	</div>
	<div class="layout_b"></div>
</div>
h)@0 从0开始：(input[type=radio][value=$@0][name=radio_time][id=radio_time_$@]+label[for=radio_time_$@0])*3
<input type="radio" value="0" name="radio_time" id="radio_time_0">
<label for="radio_time_0"></label>
<input type="radio" value="1" name="radio_time" id="radio_time_1">
<label for="radio_time_1"></label>
<input type="radio" value="2" name="radio_time" id="radio_time_2">
<label for="radio_time_2"></label>

BJ_benjamin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Emmet（zencoding）插件语法及常用简写

一、Emmet支持的简写规则:1. E 代表HTML标签。2. E#id 代表id属性。3. E.class 代表class属性。4. E[attr=foo] 代表某一个特定属性。5. E{foo} 代表标签包含的内容是foo。6. E>N 代表N是E的子元素。7. E+N 代表N是E的同级元素。8. E^N 代表N是E的上级元素。二、Emmet连写（E*N）和
复制链接

扫一扫

专栏目录