Emmet安装及常用手册

时间:2024-10-15 12:55:51

无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验所以工欲善其事必先利其器。对于前端人员而言,Emmet就是必备神器。几个字符就可以生成一大段代码,极大地提升了工作效率。Emmet功能非常强大和全面,但是官方的文档太繁多细致,让一些初学者望而却步。所以今天我就分享一些前端过程中最常用最频繁的指令,总结一些规律和经验,供大家参考!希望大家多练习,把下面的指令全部掌握好。掌握好emmet,就像游戏里的新人菜鸟一下子披上了一身土豪神装。配无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验注:本教程不讲CSS缩写了,现在成熟的框架太多了,如果还缩写原生的css,就和10年前手写全部代码的李某某没什么区别了!还有一些针对HTML5的单个标签,因为鄙人是10年前穿越过来的,学的东西太杂了,所以一时还没跟上时代的节奏,不是特别熟无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验

工具/原料

phpstorm/notepad+/emmet

如何安装emmet插件

1、下载和安装EMMET。安装之前,我想先说下兴趣才是学习最好的老师和动力,首先去尝试自己手写一页代码,然后再来感受emmet的神奇和带来效率提升的成就感。emmet是一款支持很多软件的插件,今天我们就分享如何安装到phpstom和no无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验

Emmet安装及常用手册
Emmet安装及常用手册
Emmet安装及常用手册

2、百度搜索流风清音notepad+,里面集成了非常多的插件,其中就包括了emmet神器。无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验

Emmet安装及常用手册
Emmet安装及常用手册
Emmet安装及常用手册

前端开挂之旅--标签缩写

1、现在我们就开始前端的开挂之旅。我们从单个标签缩写开始,这些都是纯粹的记无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验生成:<!doctype html><html><head><meta charset="UTF-8"><title>Document</title></head><body></body></html>.输入html:5 也可以生成相同的效果。类似的版本指令:html:4thtml:4shtml:xthtml:xshtml:xxs注意:鼠标指针在指令最后一个字符的后面按快捷键才能生成代码,在中间或后面有空格都无法生成代码。

Emmet安装及常用手册

2、页面head常用标签。下面都是很常见的标签代码,但可能只在一个页面中用到无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验.输入 link:css生成:<link rel="stylesheet" href="style.css">输入 link:favicon生成:<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">输入 script:src生成:<script src=""></script>输入 meta:utf生成:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">.输入 style生成:<style></style>输入script生成:<script></script>.注释部分:输入 c生成:<!-- -->输入 cc:ie6生成:<!--[if lte IE 6]> <![endif]-->输入 cc:ie生成:<!--[if IE]> <![endif]-->输入 cc:noie生成:<!--[if !IE]><!--><!--<![endif]-->

3、DIV+CSS常用ID和类。为什么前端经常被误称DIV+CSS,说明这部分非常重要,无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验学不会,请在你父母面对磕三个响头。输入 .生成:<div class=""></div>输入.banner生成:<div class="banner"></div>输入 .class1.class2.class3生成:<div class="class1 class2 class3"></div>.输入 #生成代码:<div id=""></div>输入 #banner生成:<div id="banner"></div>输入 #banner.font生成:<div id="banner" class="font"></div>.输入 form#search.height生成:<form id="search" class="height"></form>输入 p.class1.class2.class3生成:<p class="class1 class2 class3"></p>

4、ul列表常用的乘法:*和自增符号:$。这里相对于死记硬背而言稍微灵活有点难度,要想快速学习,还是需要死记硬背,然后内部消化、举一反三、灵活应用。小时观锻娜叼候总是质疑为什么学什么都需要死记硬背,长大后才发现原来记忆是快速学习最好的方法。就像张无忌记住张三丰的每个招式以后,然后头脑里分析理解消无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验输入 ul>li*5生成:<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>.输入 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$$$*5生成:<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li></ul>.输入 ul>li.item$@-*5生成:<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li></ul>.输入 ul>li.item$@3*5生成:<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li></ul>

5、页面body常用标签。都是常用的单个标签,记住标签就可以完全掌握了,不过还是需要多练习。输入a生成:<a href=""></a>输入a:link生成:<a href="http://"></a>无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验注意:这个在notepad++对中文支持不好,上面按tab无法显示,英文可以。在phpstorm中可以完美显示,后面有中文输入的标签同样。输入br生成:<br>输入hr生成:<hr>输入str生成:<strong></strong>.输入img生成:<img src="" alt="">输入video生成:<video src=""></video>输入audio生成:<audio src=""></audio>输入iframe生成:<iframe src="" frameborder="0"></iframe>.输入 menu:c生成:<menu type="context"></menu>输入 menu:t生成:<menu type="toolbar"></menu>.输入 hdr生成:<header></header>输入 ftr生成:<footer></footer>

6、页面from惘度谋裆常用标签。表单是进阶过程中都会用到的,有时候觉得它们很繁琐,其实它们真的很简单和神奇,一个简单的代码就可以实现一个交互的效果,成为用户爵奏笆棚与网站沟通的桥梁。请死记硬背住下面的标签就OK了,每天睡觉之前回想下今天看的教程标签!如果你能每天睡觉之前,回顾下今天发生的事情,就像曾国藩每晚静坐反思一天无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验生成:<form action="" method="get"></form>输入 form:post生成:<form action="" method="post"></form>.表单包含的内容标签:label<label for=""></label>输入 input生成:<input type="text">输入 input:h生成:<input type="hidden" name="">输入 input:t生成:<input type="text" name="" id="">输入 input:p生成:<input type="password" name="" id="">输入 input:c生成:<input type="checkbox" name="" id="">输入 input:r生成:<input type="radio" name="" id="">输入 input:f生成:<input type="file" name="" id="">输入 input:s生成:<input type="submit" value="">输入 input:i生成:<input type="image" src="" alt="">输入 input:b生成:<input type="button" value="">输入 input:reset生成:<input type="reset" value="">.选择选项:输入 select生成:<select name="" id=""></select>输入 opt生成:<option value=""></option>输入 tarea生成:<textarea name="" id="" cols="30" rows="10"></textarea>.输入 input:search生成:<input type="search" name="" id="">输入 input:email生成:<input type="email" name="" id="">输入 input:url生成:<input type="url" name="" id="">输入 input:datetime生成:<input type="datetime" name="" id="">输入 input:date生成:<input type="date" name="" id="">输入 input:time生成:<input type="time" name="" id="">输入 input:number生成:<input type="number" name="" id="">.按钮选项:输入 btn:b生成:<button type="button"></button>无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验mit"></button>

前端登颠之旅--标签组合

1、如果你掌握好标签缩写,组合其实可以不学,只是多写几次。但是你想进一步提高效率,登峰成为大神,在菜鸟面前吹牛逼,那么标签组合你就不得不熟练掌握。.下级:>输入 nav>ul>li生成:<nav> <ul> <li></li> </ul></nav>.同级:+输入 div+p+bq生成:<div></div><p></p><无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验上级:^输入 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*2>a)+footer>p生成:<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer></div>输入 (div>dl>(dt+dd)*3)+footer>p生成:<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt>无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验</div><footer> <p></p></footer>注意:上面各种标签的组合可以很多种,需要你自己灵活应用,就可以少打很多字符。实在掌握不了,也没关系,多打几个字符,马步扎得稳,扫地僧一样可以磨成大神。就像哥这种10年里学了各种绝学神功,因为声音残疾,现在还是4k的扫地僧,不和功力有关,还是和天生的际遇有关吧!

2、标签唯一性缩写技巧。em、ul、table这样的标签里面对应的标签都是固定的,这皱诣愚继样里面的标签可以省略掉。.比如输入 em>.class生成代码:<em><稆糨孝汶;span class="class"></span></em>按照规范地输入是em>span.class,这里我们省略了span。.输入 ul>.nav生成代码:<ul><li class="nav"></li></ul>按照规范地输入是ul>li.nav,这里我们省略了li。.输入 table>.row>.col生成代码:<table> <tr class="row"> <td class="col"></td> </tr></table>按照规范地输入是table>tr.row>td.col,这里我们省略了tr、td。.输入 ul+生成代码:<ul> <li></li></ul>.输入 table+生成代码:<table> <tr> <td></td> </tr></table>.输入 tr+生成代码:<tr> <td></td></tr>.输入 select+生成代码:<select name="" id=""> <option value=""></option></select>

3、有时候无私地帮助菜鸟成为大神,总会引起一些伪大神的愤恨,毕竟新人的涌入势必威胁他们的经济利益和降低了他们的存在感。无故删我原创,无故删我原创,请清空我的经验,我需要全部删除经验,退出百度经验、享受过。所以请要坚定地相信自己学习的价值和意义!

Emmet安装及常用手册
© 手抄报圈