HTML/CSS速写大法之Emmet语法

celiahunne
1,216 阅读2分钟

Emmet是高效、快速编写HTML和CSS代码的一种插件，HBuildX中已经内置。

1、HTML5模板

输入！或者html:5，然后按下tab键即可

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	
</body>
</html>

2、其他HTML模板

  • html:5 + Tab 或者！生成HTML5结构

  • html:xt + Tab 生成HTML4过渡型

  • html:4s + Tab 生成HTML4严格型

3、任意一个html标签输入都会生成完整的闭合标签

例如输入div按Tab，生成如下

<div></div>

4、生成带有id、class的HTML标签

  1. 使用#生成id属性，例如输入div#header则生成：
<div id="header"></div>
  1. 使用.生成class属性，例如输入div.section则生成：
<div class="section"></div>
  1. 结合使用例如输入div#header.section则生成：
<div id="header" class="section"></div>

5、使用>生成后代标签

例如输入div>span,则生成：

<div><span></span></div>

6、使用+生成兄弟标签

例如输入div+p，则生成：

<div></div>
<p></p>

7、使用^生成上级标签：

例如输入ul>li>a^h1则生成：

<ul>
		<li><a href=""></a></li>
		<h1></h1>
</ul>

也可以使用多个^，利润也输入ul>li>a^^h1则生成：

<ul>
		<li><a href=""></a></li>
</ul>
<h1></h1>

8、使用*重复生成多个标签

例如输入div*3，则生成：

<div></div>
<div></div>
<div></div>

例如输入ul>li*3，则生成：

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

9、使用（）生成分组的标签

例如输入ul>(li>a)*3，则生成：

<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
</ul>

注意和ul>li>a*3是不一样的

<ul>
		<li>
			<a href=""></a>
			<a href=""></a>
			<a href=""></a>
		</li>
</ul>

10、使用[]生成自定义属性

例如输入a[href=http://www.celiahunne.top][alt=celia的博客]则生成

11、使用$生成递增的属性标签

例如输入ul>li.item$*3则生成

<ul>
		<li class="item1"></li>
		<li class="item2"></li>
		<li class="item3"></li>
</ul>

$结合其他的还有如下使用：

  1. $可以使用多次，表示位数，实现多位递增，想生成几位输入几个$，例如输入ul>li.item$$$*3,则生成：
<ul>
		<li class="item001"></li>
		<li class="item002"></li>
		<li class="item003"></li>
</ul>
  1. 结合@N想要从某个特定的顺序开始生成

例如输入ul>li.item$@10*3则生成：

<ul>
		<li class="item10"></li>
		<li class="item11"></li>
		<li class="item12"></li>
</ul>
  1. 结合@-逆序生成到某个数

例如输入ul>li.item$@-5*3生成：

<ul>
		<li class="item7"></li>
		<li class="item6"></li>
		<li class="item5"></li>
</ul>

12、使用{}生成文本内容

例如输入div{我是卢本伟}则生成：

<div>我是卢本伟</div>

13、缺省元素

  1. 声明一个代class的div可以不用输入div，直接输入.header+.main+.footer则生成：
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
  1. Emmet还会根据父标签进行判定例如输入table>.row*3>.col*2则生成：
<table>
		<tr class="row">
			<td class="col"></td>
			<td class="col"></td>
		</tr>
		<tr class="row">
			<td class="col"></td>
			<td class="col"></td>
		</tr>
		<tr class="row">
			<td class="col"></td>
			<td class="col"></td>
		</tr>
</table>

下面时所有的隐式标签名称：

li：用于ul和ol中

tr：用于table、tbody、thead和tfoot中

td：用于tr中

option：用于select和optgroup中

avatar
文章
阅读
粉丝