emmet基本语法

最新推荐文章于 2022-11-24 22:12:27 发布

置顶 HERO0607

最新推荐文章于 2022-11-24 22:12:27 发布

阅读量1.4k

点赞数 2

分类专栏： Sublime Text2 文章标签： emmet

本文链接：https://blog.csdn.net/HERO0607/article/details/44657631

版权

Sublime Text2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Emmet是一个可以提高前端开发效率的实用插件，你可以通过极短的代码输入来获得你想要的代码结构，而你需要做的前期工作就是花些时间来熟悉emmet本身的语法，其实这些语法看起来并不复杂，下面就向大家分享一下emmet常用的基本语法。

一旦上手熟练emmet的基本语法之后，你会发现写代码是一件无比轻松愉快的事情！

html结构快速输出

输入:ol tab
输出:
<ol></ol>
输入:ol+tab
输出:
<ol>
	<li></li>
</ol>
输入:p+h2
输出:
<p></p>
<h2></h2>
输入:p{abc}
输出:
<p>abc</p>
输入:p[class="abc"]{段落文字内容}
输出:
<p class="abc">段落文字内容</p>
输入:ol>li*4
输出:
<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>
输入:(ul>li*4)+ol
输出:
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<ol></ol>
输入:a[target="-blank"]
输出:
<a href="" target="-blank"></a>

输入:div+p+bq
输出:
<div></div>
<p></p>
<blockquote></blockquote>

输入:table>caption{标题}+tr>th*4^tr*4>td{dd}*3
输出:
<table>
	<caption>标题</caption>
	<tr>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td>dd</td>
		<td>dd</td>
		<td>dd</td>
	</tr>
	<tr>
		<td>dd</td>
		<td>dd</td>
		<td>dd</td>
	</tr>
	<tr>
		<td>dd</td>
		<td>dd</td>
		<td>dd</td>
	</tr>
	<tr>
		<td>dd</td>
		<td>dd</td>
		<td>dd</td>
	</tr>
</table>

html元素快速输出

输入:html:5或!
输出:
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
输入:a
输出:
<a href=""></a>
输入:a:link
输出:
<a href="http://"></a>

输入:style
输出:
<style></style>
输入:script
输出:
<script></script>
输入:iframe
输出:
<iframe src="" frameborder="0"></iframe>
输入:img
输出:
<img src="" alt="">
输入:map
输出:
<map name=""></map>
输入:area
输出:
<area shape="" coords="" href="" alt="">