sublime text3中emmet插件的使用

首先，想要快速编码需要在编辑器中安装常用插件，下面是emmet插件的使用：

html5文档结构的生成方式：

　　1）、!+tab键

　　2）、html:5 +tab键

头部head中meta字符集的生成：

　　1）、 meta:utf + tab键生成：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

　　2）、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）、meta:compat + tab键生成： <meta http-equiv="X-UA-Compatible" content="IE=8"> 兼容到浏览器IE8

　　4）、link:css +tab 键生成： <link rel="stylesheet" href="style.css">

　　5）、script:src + tab 键生成：<script src=""></script>

内容body中emmet插件的使用：

　　1）、生成带类样式的标签 p.text +tab键

　　　　生成 <p class="text"></p>

　　2）、生成带ID样式的标签 p#text +tab键

　　　　生成 <p id="text"></p>

　　3）、 a标签生成url前缀 a:link+tab键

　　　　生成： <a href="http://"></a>

　　　　a标签是邮箱地址 a:mail+tab键

　　4）、根据标签间位置关系生成标签

　　　　a)、生成同级，兄弟标签，p标签后第一个兄弟元素 p.box+span.box +tab 键

　　　　　　生成：

　　　　b)、后代标签 ul > li +tab键

　　　　　　如果生成多个相同的后代标签 eg ul > li*4 +tab键；表示生成4个li

　　　　c)、生成当前标签的父级，也叫上级标签 h2 > span.haha^div.info +tab键即h2与 div是同级元素

　　　　　　生成：

　5)、生成标签时同时生成内部文本 a{文本内容}+tab键

　　生成： <a href="">php中文网</a>
　6）、生成标签时，同时生成一些属性 p[title = '这是一段说明'] +tab键

　　　　生成：<p title="这是一段说明" ></p>

　　生成标签时，属性与文本内容也直接生成例如 a[href='www.baidu.com']{百度搜索} +tab 键

　　生成： <a href="www.baidu.com">百度搜索</a>

　　7）、快速生成一个有8个列表项的导航例如 ul.list>li.items*8>a{导航栏信息} +tab键

　　　　生成：　　

<ul class="list">

	<li class="items"><a href="">导航栏信息</a></li>

	<li class="items"><a href="">导航栏信息</a></li>

	<li class="items"><a href="">导航栏信息</a></li>

	<li class="items"><a href="">导航栏信息</a></li>

	<li class="items"><a href="">导航栏信息</a></li>

	<li class="items"><a href="">导航栏信息</a></li>

	<li class="items"><a href="">导航栏信息</a></li>

	<li class="items"><a href="">导航栏信息</a></li>

</ul>

　　8）、给标签自动添加编号或者排序: $,@

　　　　a)、ul.list>li.items*5>a{导航栏$}+tab键

<ul class="list">

	<li class="items"><a href="">导航栏1</a></li>

	<li class="items"><a href="">导航栏2</a></li>

	<li class="items"><a href="">导航栏3</a></li>

	<li class="items"><a href="">导航栏4</a></li>

	<li class="items"><a href="">导航栏5</a></li>

</ul>

　　　　　　ul.list>li.items*5>a{导航栏$$} +tab键

<ul class="list">

	<li class="items"><a href="">导航栏01</a></li>

	<li class="items"><a href="">导航栏02</a></li>

	<li class="items"><a href="">导航栏03</a></li>

	<li class="items"><a href="">导航栏04</a></li>

	<li class="items"><a href="">导航栏05</a></li>

</ul>

　　　　ul.list>li.items*5>a{导航栏$$$} +tab 键

//给标签自动添加编号或者排序: $,@

<ul class="list">

	<li class="items"><a href="">导航栏001</a></li>

	<li class="items"><a href="">导航栏002</a></li>

	<li class="items"><a href="">导航栏003</a></li>

	<li class="items"><a href="">导航栏004</a></li>

	<li class="items"><a href="">导航栏005</a></li>

</ul>

　　b) ul.list>li.items*5>a{导航栏$$@-} + tab键 ----表示降序显示列表项

//ul.list>li.items*5>a{导航$$@-}+tab键

<ul class="list">

	<li class="items"><a href="">导航栏05</a></li>

	<li class="items"><a href="">导航栏04</a></li>

	<li class="items"><a href="">导航栏03</a></li>

	<li class="items"><a href="">导航栏02</a></li>

	<li class="items"><a href="">导航栏01</a></li>

</ul>

　　c)、从指定的编号开始，@后跟数字 ul.list>li.items*5>a{导航栏$$@100} ---表示从100开始

<ul class="list">

	<li class="items"><a href="">导航栏100</a></li>

	<li class="items"><a href="">导航栏101</a></li>

	<li class="items"><a href="">导航栏102</a></li>

	<li class="items"><a href="">导航栏103</a></li>

	<li class="items"><a href="">导航栏104</a></li>

</ul>

　　更多emmet的用法可以去官网了解

秒客网

sublime text3中emmet插件的使用

相关文章