Emmet:HTML/CSS代码快速编写
html缩写:
1. 初始化
HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:

- html:5 或!:用于HTML5文档类型
- html:xt:用于XHTML过渡文档类型
- html:4s:用于HTML4严格文档类型
2. 轻松添加类、id、文本和属性
连续输入元素名称和ID,Emmet会自动为你补全,比如输入p#foo:

连续输入类和id,比如p.bar#foo,会自动生成:(如果有代码自动联想,先esc去掉联想,再tab)
<p class="bar" id="foo"></p>
3. 嵌套
现在你只需要1行代码就可以实现标签的嵌套。
- >:子元素符号,表示嵌套的元素
- +:同级标签符号
效果如下图所示:

可以生成多个子元素,比如ul>li*3 生成:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
5. 隐式标签
声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。
在过去版本中,可以省略掉div,即输入.item即可生成<div
class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li
class="item"></li>。

下面是所有的隐式标签名称:
- li:用于ul和ol中
- tr:用于table、tbody、thead和tfoot中
- td:用于tr中
- option:用于select和optgroup中
Emmet:HTML/CSS代码快速编写的更多相关文章
- 转载: Emmet:HTML/CSS代码快速编写神器
Emmet:HTML/CSS代码快速编写神器 因为文章严禁转载,那本着做一个遵纪守法的好公民,我就不转载了,把链接放下面,方便查阅. http://www.iteye.com/news/27580
- Emmet:HTML/CSS代码快速编写神器
本文来源:http://www.iteye.com/news/27580 ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...
- Emmet:HTML/CSS代码快速编写神器(转)
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- Sublime Text 3插件之Emmet:HTML/CSS代码快速编写神器
一.快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...
- Emmet for Dreamweaver:HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- Emmet:HTML/CSS代码快速编写神器教程
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- Emmet:HTML/CSS代码快速编写神器--20150422
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- sublime text3---Emmet:HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
随机推荐
- Nginx作为负载均衡服务介绍
GSLB SLB 四层负载均衡 七层负载均衡 四层负载均衡 四层负载均衡工作在OSI模型的传输层,由于在传输层,只有TCP/UDP协议,这两种协议中除了包含源IP.目标IP以外,还 ...
- Mac下使用Matplotlib无法显示中文的解决办法
参考:matplotlib图例中文乱码? - 知乎用户的回答 - 知乎 https://www.zhihu.com/question/25404709/answer/309784195 1.下载字体安 ...
- Djaingo 日志配置
1.setting.py文件 # 项目级别的日志配置 BASE_LOG_DIR = os.path.join(BASE_DIR, "log") LOGGING = { 'versi ...
- Elasticsearch 开箱指南
内容概要 ES 基础介绍,重点是其中的核心概念. 基础 API 实践操作. 1. 基础介绍 Elasticsearch (ES) 是一个数据库,提供了分布式的.准实时搜索和分析. 基于 Apache ...
- 从0开发3D引擎(九):实现最小的3D程序-“绘制三角形”
目录 上一篇博文 运行测试截图 需求分析 目标 特性 头脑风暴 确定需求 总体设计 具体实现 新建Engine3D项目 实现上下文 实现_init 实现"获得WebGL上下文" 实 ...
- C语言进阶——全局变量
全局变量 ·定义在函数外面的变量是全局变量 ·全局变量具有全局的生存期和作用域 ·它们与任何函数都无关 ·在任何函数内部都可以使用它们 全局变量初始化 ·没有做初始化的全局变量会得到0值 ·指针会得到 ...
- 【Java面试】Mybatis篇
1.MyBatis编程步骤是什么样的? ① 创建SqlSessionFactory ② 通过SqlSessionFactory创建SqlSession ③ 通过sqlsession执行数据库操作 ④ ...
- 剑指Offer对答如流系列 - 重建二叉树
面试题6:重建二叉树 题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8} ...
- 创建dynamics CRM client-side (二) - Client API
如果我们想用script来直接在form上做一些修改, 我们需要用到client api 来做交互. 我们可以用以下来理解: Form <---> Client API <---&g ...
- Windows10 企业版激活
今天同大家分享一个Windows自带的激活方法(注:适用于win10 企业版 2019长期服务版,其他版本自行测试) 1.首先确保电脑网络通畅(不需要梯子) 2.以管理员方式运行cmd输入: slmg ...