网站首页 > 技术文章 正文
作为一名前端开发人员,最为繁琐的就是手写HTML与CSS代码,特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。
下载地址:
http://emmet.io/download/
Emmet支持大部分文档编辑器和IDE,
Emmet使用特殊的表达式Abbreviations,也就是缩写:这种特殊的表达式会被Emmet解析并转义成结构化的代码块。Emmet使用类似CSS选择器的语法来描述元素在DOM树节点的位置和属性。
例如:
ul#nav>li.item$*4>a{Item $}
会被转义成
<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
<li class="item4"><a href="">Item 4</a></li>
</ul>
这样就看到了 emmet的强大之处了吧。
HTML 元素
在Emmet中可以使用元素名例如 div 或 p 生成HTML标签。Emmet没有预设任何标签名,所以可以使用任何可用名称来生成HTML标签:div → <div></div> 或 foo → <foo></foo>
嵌套操作符
嵌套操作用来生成元素的DOM树中的兄弟节点或子节点,使用 > 生成元素子节点。
div>ul>li
会被转义成
<div>
<ul>
<li></li>
</ul>
</div>
Sibling: +
使用 + 生成元素兄弟节点。
div+p+bq
会被转义成
<div></div>
<p></p>
<blockquote></blockquote>
Climb-up: ^
使用 ^ 在元素父节点生成新的元素节点
操作符 ^ 的作用和 > 刚好相反
用 > 可以在子级生成新的节点
div+div>p>span+em
会被转义成
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
用n个 ^ ,就可以在第n父级生成新的节点
div+div>p>span+em^^^bq
会被转义成
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Multiplication: *
使用 * 生成多个相同元素
ul>li*5
会被转义成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
属性操作符
属性操作符用来修改元素的属性
ID 和 CLASS
Emmet给元素添加ID和CLASS的方法和CSS的语法类似
div#header+div.page+div#footer.class1.class2.class3
会被转义为
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></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>
还可以用多个 $ 定义编号的格式
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>
文本操作符
Emmet使用 Text:{} 给元素添加文本内容
a{Click me}
会被转义为
<a href="">Click me</a>
注意: {text} 在Emmet中是被当成单独的元素来解析的,但当和其他元素结合使用时会有特殊的含义
例如:
a{click} 和 a>{click}
会输出相同的结果,但
a{click}+b{here} 和 a>{click}+b{here}
输出的结果则不一样
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
在 a>{click}+b{here} 中, <b> 元素是<a>元素的子节点。这个就是区别:当 {text} 直接写在元素后面时,并不会改变父元素的上下文。
最后,先介绍这么多,emmet的一些其他功能大家自行去看官方文档。
猜你喜欢
- 2025-06-23 国内首个 AI IDE软件—TRAE简介(第一个ai编程语言)
- 2025-06-23 开箱即用的免费IDE(可以免费开一次的开箱网站)
- 2024-10-04 Linux下有哪些比较好的IDE和开发工具?
- 2024-10-04 可执行单元校验:在 IDE 中提升 AI 智能体代码的准确性
- 2024-10-04 学校专科上前端课,我们机房是win7 旗舰版,为什么用的HbuilderX?
- 2024-10-04 WebStorm 2019.3 正式发布,前端开发 IDE
- 2024-10-04 一些用于 Web 开发的最佳精选 IDE 和代码编辑器
- 2024-10-04 微软,做IDE还得看它 微软的ide
- 2024-10-04 自动化工具autojs-VSCode IDE工具使用
- 2024-10-04 无需写代码!可一键生成前后端代码的开源工具
你 发表评论:
欢迎- 609℃几个Oracle空值处理函数 oracle处理null值的函数
- 601℃Oracle分析函数之Lag和Lead()使用
- 589℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 586℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 581℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 574℃【数据统计分析】详解Oracle分组函数之CUBE
- 563℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 555℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)