首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Emmet使用手册

Emmet使用手册

作者头像
bear_fish
发布2018-09-19 16:46:44
8830
发布2018-09-19 16:46:44
举报

Emmet的使用,快速敲出html结构 后代:> 如输入:nav>ul>li  则输出:                 <nav>                     <ul>                         <li></li>                     </ul>                 </nav> 兄弟:+ 如输入:div+p+bq  则输出:                 <div></div>                 <p></p>                 <blockquote></blockquote> 上级:^ 如输入:div+div>p>span+em^bq  则输出:                         <div></div>         <div>             <p><span></span><em></em></p>             <blockquote></blockquote>         </div>     改为:div+div>p>span+em^^bq 则:         <div></div>         <div>             <p><span></span><em></em></p>         </div>         <blockquote></blockquote> 分组:(),输入:div>(header>ul>li*1>a[href="#"])+footer>p         <div>             <header>                 <ul>                     <li><a href="#"></a></li>                 </ul>             </header>             <footer>                 <p></p>             </footer>         </div>     注:上面footer>p加上 () 效果一样     .content>(h3{h3h3}+p{pppp})*2  则输出:         <div class="content">             <h3>h3h3</h3>             <p>pppp</p>             <h3>h3h3</h3>             <p>pppp</p>         </div> 自增符号:$  缩写:ul>li.item$*5 则输出:             <ul>                 <li class="item1"></li>                 <li class="item2"></li>                 <li class="item3"></li>                 <li class="item4"></li>                 <li class="item5"></li>             </ul>         h$[title=item$]{Header $}*3    则输出:                     <h1 title="item1">header 1</h1>             <h2 title="item2">header 2</h2>             <h3 title="item3">header 3</h3>         ul>li.item$$$*2 则输出:             <ul>                 <li class="item001"></li>                 <li class="item002"></li>             </ul>                     ul>li.item$@-*2 则输出: (@逆序)             <ul>                 <li class="item2"></li>                 <li class="item1"></li>             </ul>         ul>li.item$@2*2 则输出  (指定起点):         <ul>             <li class="item2"></li>             <li class="item3"></li>         </ul> ID和类属性 ( )     #header 则输出:         <div id="header"></div>     .header 则输出:         <div class="header"></div>     from#search.wide 则输出:         <from id="search" class="wide"></from>     p.class1.class2.class3 则输出:         <p class="class1 class2 class3"></p> 自定义属性             p[title="hello world"] 则输出:         <p title="hello world"></p>     td[rowspan=2 colspan=3 title] 则输出:         <td rowspan="2" colspan="3" title=""></td> 文本:{}     p>{Click }+a{here}+{ to continue} 则输出:         <p>click<a href="">here</a>to continue</p> 隐式标签(例如下面的ul的子类默认的就是 li)         ul>.class 则输出:             <ul>                 <li class="class"></li>             </ul>         form:post             <form action="" method="post"></form>         input:c             <input type="checkbox" name="" id=""> div.a>ul.list>li*3----------Tab则输出下面的( div.a 改为 .a 效果一样的) <div class="a">     <ul class="list">         <li></li>         <li></li>         <li></li>     </ul> </div> 在CSS中输入: m10  ==  margin:10px

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年05月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档