前端工具【0】——Emmet插件

时间：2023-03-31 02:11:55 CSS

简介：Emmet是许多流行的文本编辑器的插件。它大大改进了HTML和CSS的工作流程，并为大多数流行的编辑器提供了安装插件。核心是缩写语法+tab键（不同的编辑器可以自行设置），以下是我整理的常用知识点。一、特点1、支持自定义：添加新缩写或更新已有缩写，修改snippets.json文件改变Emmet过滤器和操作的行为，修改preferences.json文件定义如何生成HTML或XML代码，修改语法配置文件。json文件2.支持大部分编辑器：（以下插件链接在此不提供，附上官网链接：https://www.emmet.io/）SublimeText3/2TextMate1.xEclipse/AptanaCoda1.6和2.xEspressoChocolatKomodoEdit/IDENotepad++PSPadCodeMirror2/3Brackets2.基本语法1.后代：>示例：div>ul>li>a<div><ul><li><ahref=""></a></li></ul></div>2.师兄：+例子：h1+p<h1></h1><p></p>3.高级：^^^示例：div>ul>li>span+a^pdiv>ul>li>span+a^^p<div><ul><li><span></span><ahref=""></a></li><p></p></ul></div><div><ul><li><span></span><ahref="">/a></li></ul><p></p></div>4、分组：()示例：div>(header>ul>li*2>a)+footer>div<div><header><ul><li><ahref=""></a></li><li><ahref=""></a></li></ul></header><footer><div></div></footer></div>5、乘法：示例：ul>li2<ul><li></li><li></li></ul>6、自增：$示例：ul>li.lis$3ul>li.lis$@-*3div>h$[title=th$]{Header$}3<ul><liclass="lis1"></li><liclass="lis2"></li><liclass="lis3"></li></ul><ul><liclass="lis3"></li><liclass="lis2"></li><liclass="lis1"></li></ul><div><h1title="th1">Header1</h1><h2title="th2">Header2</h2><h3title="th3">Header3</h3></div>7、命名、属性：#head.headp.p1.p2.p3<divid="head"></div><divclass="head"></div><pclass="p1p2p3"></p>8.自定义属性：[]示例div[title="HelloWorld"]div[rowspan=2colspan=3title]<divtitle="HelloWorld"></div><divrowspan="2"colspan="3"title=""></div>9.文本：{}例子：div>{click}+a{here}+{跳转<div>请点击<ahref="">here</a>跳转</div>三、HTML标签语法??1.所有未知的缩写都会被转换成标签<gg></gg>2。基本html标签：!<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body></body></html>3.缩写：链接<linkrel="stylesheet"href="">4.简称：style、script4。CSS语法1.Value:p(%),e(em),x(ex)，不要写默认的px，比如w100width:100px;2、附加属性：@f:@font-face{font-family:;src:url();}3、模糊匹配：ov:h,ov-h,ovh,ohoverflow:hidden;4.供应商前缀：trs-webkit-transition:proptime；-moz-transition：道具时间；-ms-transition:proptime;-o-transition:proptime;transition:proptime;5、变换：lg(left,yellow50%,@pink)background-image:-webkit-linear-gradient(left,yellow50%,@pink）；背景图像：-o-线性渐变（左，黄色50%，@pink）；背景图像：线性渐变（向右，黄色50%，@pink）；</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="你知道的或者不知道的css可能都在这里了" href="/webqianduan/208319.html">你知道的或者不知道的css可能都在这里了</a> </div> <div class="prev">下一篇：<a title="CSS选择器_8" href="/webqianduan/208321.html">CSS选择器_8</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>前端工具【0】——Emmet插件相关文章</code></div> <ul> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>