Emmet插件使用

最新推荐文章于 2021-06-15 16:11:38 发布

MingoRun

最新推荐文章于 2021-06-15 16:11:38 发布

阅读量995

点赞数 1

文章标签： Emmet插件使用

本文链接：https://blog.csdn.net/weixin_41178230/article/details/81027686

版权

一、生成html5的文档的Emmet语法：

1、语法一：html5+Tab键

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	
</body>
</html>

2、语法二：html:5+Tab键

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

3、语法三：！+Tab键

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

二、用在html文档中的head中的Emmet语法：

1、规定html文档的字符集编码：meta:utf+Tab键

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

2、创建当前的html的窗口：meta:vp+Tab键

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

3、兼容IE8：meta:compat+Tab键

<meta http-equiv="X-UA-Compatible" content="ie=edge">

4、引用css文件：link+Tab键或 link:css+Tab键（后者会自动加载css文件）

<link rel="stylesheet" href="">

5、引用脚本：script+Tab键或 script:src+Tab键（后者会自动将src属性添加上）

<script></script>

三、用在html文档中的body中的Emmet语法：

1、生成带类样式的标签：

例如：div.div1+Tab键（ .是css样式中的类）

<div class="div1"></div>

2、生成带id的标签：

例如：div#div1+Tab键盘（ #是css样式中的id ）

<div id="div1"></div>

3、生成a标签：

（1）a+Tab键

<a href=""></a>

（2）生成完整的url前缀：a:link+Tab键（如果是邮箱地址则是 a:mail+Tab键）

<a href="http://"></a>

4、根据标签的位置关系来生成标签：

（1）生成同级标签，即兄弟标签：div.div1+div.div2+Tab键

<div class="div1"></div>
<div class="div2"></div>

（2）生成当前标签的后代标签，即下级标签：ul>li+li+li+Tab键

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

（3）生成当前标签的父级标签，即上级标签：h3>span^div.div1+Tab键

<h3><span></span></h3>
<div class="div1"></div>

5、在创建标签的时候同时创建标签内部的文本： div{Hello World!}+Tab键

<div>Hello World!</div>

6、在创建标签的时候同时创建标签自定义的属性：a[href="http://www.baidu.com"]+Tab键

<a href="http://www.baidu.com"></a>

7、重复生成标签：ul>li*5+Tab键

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

8、给标签自动添加编号或排序：

（1）ul.list>li.item*5>a{菜单栏$} （$是一个占位符）

<ul class="list">
	<li class="item"><a href="">菜单栏1</a></li>
	<li class="item"><a href="">菜单栏2</a></li>
	<li class="item"><a href="">菜单栏3</a></li>
	<li class="item"><a href="">菜单栏4</a></li>
	<li class="item"><a href="">菜单栏5</a></li>
</ul>

（2）ul.list>li.item*5>a{菜单栏$$}

<ul class="list">
	<li class="item"><a href="">菜单栏01</a></li>
	<li class="item"><a href="">菜单栏02</a></li>
	<li class="item"><a href="">菜单栏03</a></li>
	<li class="item"><a href="">菜单栏04</a></li>
	<li class="item"><a href="">菜单栏05</a></li>
</ul>

（3）ul.list>li.item*5>a{菜单栏$$@-} (降序）

<ul class="list">
	<li class="item"><a href="">菜单栏05</a></li>
	<li class="item"><a href="">菜单栏04</a></li>
	<li class="item"><a href="">菜单栏03</a></li>
	<li class="item"><a href="">菜单栏02</a></li>
	<li class="item"><a href="">菜单栏01</a></li>
</ul>

（4）ul.list>li.item*5>a{菜单栏$$@50} (按指定的序号排序）

<ul class="list">
	<li class="item"><a href="">菜单栏50</a></li>
	<li class="item"><a href="">菜单栏51</a></li>
	<li class="item"><a href="">菜单栏52</a></li>
	<li class="item"><a href="">菜单栏53</a></li>
	<li class="item"><a href="">菜单栏54</a></li>
</ul>