码迷,mamicode.com
首页 > 其他好文 > 详细

sublime text3中emmet插件的使用

时间:2018-10-06 14:36:11      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:编号   指定   属性   mini   列表项   maximum   type   用法   viewport   

首先,想要快速编码需 要在编辑器中安装常用插件,下面是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键

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

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

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

      生成: 

        <p class="box"></p>
        <span class="box"></span>

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

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

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

      生成 : 

        <h2><span class="haha"></span></h2>
        <div class="info"></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插件的使用

标签:编号   指定   属性   mini   列表项   maximum   type   用法   viewport   

原文地址:https://www.cnblogs.com/lvxisha/p/9747120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!