HBuilder中的Emmet插件快速输入法

只要坚持每天做自己喜欢的事就永远不会感觉的无聊

image01.png

前言

最近也是刚刚踏入H5的行列也是没多久的,之所以要学学H5是因为Hybrid app做点只是储备。可是话又说过来了,在使用热更新(JPatch)收到苹果粑粑的警告⚠️后,貌似有很多人对于学习JS的热情不是很高啊。当然,我也不例外。但是,要知道自己在一专多能的允许情况下多学点也没错吧

好了,让我们看看怎么样最快方便的书写那些碎碎的HTML标签!

注:HBuilder中自带Emmet这个插件,如果是其他工具可以移步点击这里 Emmet

1. 嵌套标签(HBuilder是按tab键)

当输入div>ul>li,敲击tab键

屏幕快照 2017-05-02 下午4.13.10.png

2. 标签并列

输入div+p+bq

image2.png

3. 向上一级

输入div+div>p>span+em^bq,这里是和带有 ^的标签的上一级

image3.png

4. 输入多个标签

输入ul>li*5

image4.png

输入ul>li*2>a

image5.png

5. 标签分组

输入div>(header>ul>li*2>a)+footer>p

image6.png

输入(div>dl>(dt+dd)*3)+footer>p

image7.png

6. 输入属性

输入div#header+div.page+div#footer.class1.class2

image8.png

输入td[title="hello world" colspan=3]

image9.png

7. 可以自增长的数字

输入ul>li.item$$*5

image10.png

8. 标签内的文字

输入a{click me}

image11.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容