Web 前端利器Emmet 的HTML用法总结
在tutsplus 那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里。
Emmet 简介
Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。
安装Emmet 插件
Emmet只是文本编辑器一个插件,要想让他发挥应用的功能,就得将其安装到你喜欢的文本编辑器中。到目前为止,很多流行的文本编辑器都支持Emmet插件,也就是说很多流行的文本编辑器(如Sublime Text、Notepad++、Adobe Dreamweaver)都可以安装这款插件。
在这里主要介绍一下Sublime Text中安装Emmet 插件的方法,首先确保你已经安装Sublime Text。Jeff 用的是Sublime Text3,方法有两种:
1、直接下载该压缩包,解压后放到“程序包”内(sb中 点击 preferens-浏览程序包 后打开的文件夹)。然后重启Sublime Text 即可。 2、先安装 Package Control,然后搜索找到Emmet 插件安装。
Emmet:HTML用法
Emmet使用定义的缩写来生成元素。他的语法和CSS的选择器非常类似:
ul>li>img+p |
---|
一旦你写好缩写之后,按一下tab
键(我使用的是Sublime Text编辑器)就能生成你所请求的代码。上面的例子将会产生下面的代码:
<ul> <li> <img src="" alt=""> <p></p> </li> </ul> |
---|
早前在《前端开发必备!Emmet使用手册》一文中详列了Emmet生成HTML代码的一些代码示例。接下来,让我们来深入一点了解Emmet语法,来看看如何通过一些更复杂的缩写创建HTML标签。
创建初始文档
任何一个HTML文件,都具有一些默认的文档结构。使用Emmet来创建需要的时间不到一秒。只要输入!
或html:5
,然后点击tab
键,你就会看到一个HTML5的doctype
默认标签。
-
html:5
或!
:HTML5文档类型 -
html:xt
:XHTML过渡型文档类型 -
html:xs
:XHTML严格型文档类型 -
html:4t
:HTML4过渡型文档类型 -
html:4s
:HTML4严格型文档类型
子元素>
使用>
运算符可以用来生成彼此嵌套的元素:
section>div>p |
---|
上面的代码会生成下面的代码:
<section> <div> <p></p> </div> </section> |
---|
相邻元素+
使用+
运算符可以用来生成彼此相邻的元素:
section+div+p |
---|
上面代码会生成下面的代码:
<section></section> <div></div> <p></p> |
---|
返回上一层^
使用^
运算符,可以让你的代码返回上一层。当你使用>
嵌套元素时,想让后面的回到上一层,那么这个方法很适用。
section>div>p>a^p |
---|
这个缩写将两个段落元素都放置在div
内,但只有第一个段落里会包含一个链接。
<section> <div> <p><a href=""></a></p> <p></p> </div> </section> |
---|
其实这个就相当于:
section>div>(p>a)+p |
---|
乘法*
如果你想一次性生成多个相同的元素,比如列表中的li,那么就可以使用乘法运算符*
:
ul>li*5 |
---|
上面代码会生成5个li
:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> |
---|
除了能一次性生成多个相同的标签之外,我们还可以通过$
符号做递增;通过$@-
符号做递减;通过$@3*5
这样的方式从第三个开始命名:
组合
为了更有效的利用嵌套,我们常会制作一些代码片段。在Emmet中你可以通过()
将一个块组合在一起,来看一个简单的示例:
ul>(li>a)*3 |
---|
上面的代码就会生成3个li
,而且每个li
中套了一个a
:
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> |
---|
在我们一个页面中,常会包括页头、主体和页脚三个部分,我们很多时候就可以通过对全们进行一个组合,快速生成有效的代码:
快速添加类名、ID、文本和属性
在Emmet中,还有一个功效,能快速帮助你添加类名、ID、文本和属性。
- 使用
E#ID
添加ID名 - 使用
E.class
添加类名 - 使用
E[attr]
添加属性 - 使用
E{text}
添加文本
省略标签名
在Emmet中可以省略标签名,默认情况下,如.item
和div.item
起到的作用是一致的<div></div>
。在实际中还有几种情况:
-
ul
和ol
中输入指的是li
-
table
、tbody
、thead
和tfoot
指的是tr
-
tr
中指的是td
-
select
和optgroup
指的是option
本文转载自http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html 略有修改,感谢原作者。
- java之自动过滤提交文本中的html代码script代码
- Enumerable#zip特性
- java小技术之生成二维码
- java实现发送邮件服务器,SMTP协议发送邮件
- HttpURLConnection实现两个服务端的对接
- java获取properties配置文件值
- 安全退出app,activoty栈管理
- JavaBean转Map方法
- JsBridge实现JavaScript和Java的互相调用
- JAVA-FTP批量大文件传输
- 独家 | 一文读懂TensorFlow(附代码、学习资料)
- 解决openssh漏洞,升级openssh版本
- 解决NTPD漏洞,升级Ntpd版本
- 独家 | 手把手教TensorFlow(附代码)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- IdentityServer4 4.x版本 配置Scope的正确姿势
- 个人总结的部分数据验证规则
- 一句话实现php日期转中文汉字
- .Net Core微服务入门全纪录(八)——Docker Compose与容器网络
- PHP中少用但是很好用的方法
- 使用一维数据构造简单卷积神经网络
- .Net Core微服务入门全纪录(完结)——Ocelot与Swagger
- PHP使用GD库生成文件
- 反向传播算法从原理到实现
- 基于EntityFramework 6 Code First实现多租户的一种思路
- PHP使用GD库生成柱状图
- PHP生成Mysql数据字典
- .Net Core in Docker极简入门(上篇)
- PHP一个比较完善的树形结构代码
- .Net Core in Docker极简入门(下篇)