博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
打代码必备攻略-前端
阅读量:6990 次
发布时间:2019-06-27

本文共 784 字,大约阅读时间需要 2 分钟。

hot3.png

1. 跳过Div

第一个小技巧就是跳过div,Emment非常清楚你需要输入什么内容,你只需要输入class或者是id,Emmet会自动帮助你生成正确的div。如下:

003929_RpMF_257950.jpg

含糊标签名称

这个技巧属于implicit tag names特性,你不需要指定div或者li,Emmet会自动帮助你生成,如下:

003930_dtHf_257950.jpg

2. 带有DOM导航的链式缩写

如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法:

> 子节点:在DOM树下一层添加创建一个元素

+ 同级别:在DOM树同一层添加创建一个元素

^ 向上层:向上一层添加创建创建一个元素。

003931_GAcJ_257950.jpg

003931_LSlz_257950.jpg

向上一层

003932_SiEp_257950.jpg

如果需要的话你可以向上多层,如下:

003950_OdjL_257950.jpg

3. 使用分组来简化你的代码结构

有的时候你可能会发现使用向上符号比较复杂,这时候可能使用分组更加的合理。如下:

003953_o21o_257950.jpg

一个更复杂一些的例子,如下:

003954_TD98_257950.jpg

4. 插入文本和属性

如果你需要生成HTML,内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet来生成框架,然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。

从下面代码可以看到,你输入的文字和属性都可以分别通过大括号和中括号来生成。

003956_0ZPV_257950.jpg

5. 添加多个class到一个元素

这个非常简单,你只需要使用逗号来添加多个class,如下:

003956_n5Qu_257950.jpg

6. 重复添加

这可能是最让人舒服的操作了,帮助你重复添加元素:

003957_YvmV_257950.jpg

如果你整合分组功能,那么你将能够处理更复杂的HTML生成:

003958_7pL0_257950.jpg

7. 自动列表记数

如果你需要按顺序生成HTML元素,这个技巧你一定喜欢,使用$符号可以帮助你生成一系列数字,支持class,id,属性,内容等等。如下:

003959_eU9C_257950.jpg

注意如果你需要生成2位的数字,使用两个$符号即可。

转载于:https://my.oschina.net/u/257950/blog/399100

你可能感兴趣的文章
new delete的实现
查看>>
zsh中设置PS1
查看>>
java list 删除功能
查看>>
chrome——错误15net::ERR_SOCKET_NOT_CONNECTED
查看>>
HTML中的php代码被自动注释
查看>>
几种用户相似度计算方法及其优缺点
查看>>
MySQL命令行登录
查看>>
新手站长如何理性选择虚拟主机
查看>>
Java 字符串池
查看>>
为什么分布式一定要有Redis?
查看>>
Java获取文件目录(路径)的方式
查看>>
btrace一些你不知道的事(源码入手)
查看>>
Hadoop常用命令
查看>>
CentOS环境中编译升级PHP至5.4版本记录
查看>>
Liferay 6.2 电子书 Liferay User interface Development
查看>>
mysql导入导出sql文件
查看>>
Core Text Tricks
查看>>
配置vsftp出现的一些问题
查看>>
开源 免费 java CMS - FreeCMS技术架构
查看>>
开源 免费 java CMS - FreeCMS1.4-信息管理
查看>>