Emmet的HTML语法(敲代码的快捷方式)

 
版权声明:本文为网上转载。
 

所有操作按下“tab”键即可瞬间完成

元素
1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准的 HTML 标签。
2.输入:! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构 嵌套操作 1.使用“>”生成子元素 // 输入
div>ul>li // 按下TAB键
<div>
<ul>
<li></li>
</ul>
</div>
2.使用“+”生成兄弟元素 // 输入
div+p+bq // 按下TAB键
<div></div>
<p></p>
<blockquote></blockquote>
3.使用“^”生成父元素 // 输入
div+div>p>span+em^bq // 按下TAB键
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
4.使用“*”生成多个相同元素 // 输入
div>ul>li*5 // 按下TAB键
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5.使用“()”将元素分组 // 输入
// "+" 后面的元素与括号中的第一个元素属于兄弟关系
div>(header>ul>li*2)+footer>p //按下TAB键
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
属性操作
1.id与class:元素与 id 属性值之间用 “#” 分隔,与 class 属性值之间用 “.” 分隔 // 输入
div#header+div.page+div#footer.class1.class2.class3 // 按下TAB键
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
2.使用“[]”标记其他属性 // 输入
td[title='hello' colspan=3] // 按下TAB键
<td title="hello" colspan="3"></td>
3.用“$”符号实现1到n的自动编号(“*”实现多个元素) // 输入
li.item$*3 // 按下TAB键
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
可在 “$” 后添加 “@n” 修改编号的起始值为n。 // 输入
li.item$@3*3 // 按下TAB键
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
可在 “$” 后添加 “@-” 修改编号的方向。 // 输入
li.item$@-3*3 // 按下TAB键
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
4.用“{}”添加文本内容 // 输入
a[href=me.htm]{click me} // 按下TAB键
<a href="me.htm">click me</a>

更多简写方法期待不断更新中~

---------------------
作者:Colin
来源:网络
原文:网络
版权声明:转载

最新文章

  1. C#日常总结
  2. c#socket同步通信
  3. springMVC-mvc:annotation-driven
  4. Jquery 表单操作
  5. Android 实现Path2.0中绚丽的的旋转菜单
  6. (转)Redis复制与可扩展集群搭建
  7. liger 的 ligerDialog 的使用。
  8. grb文件的读取
  9. 【Android Developers Training】 85. 不要有冗余的下载
  10. var与let的区别
  11. 流API--流的基础知识
  12. Android 文字过长TextView如何自动截断并显示成省略号
  13. [Android FrameWork 6.0源码学习] View的重绘ViewRootImpl的setView方法
  14. redis应用-sortedset实现排行榜(转载)
  15. django创建上下文
  16. django中celery的使用
  17. Android Bitmap 缩放 旋转 水印 裁剪操作
  18. 字符串的比较【string和字符数组】
  19. VS2015 正式版中为什么没有了函数前面引用提示了?
  20. 飞控入门之C语言结构体、枚举

热门文章

  1. 【NOIP2017】宝藏 题解(状压DP)
  2. ubuntu配置Selenium+Chromedriver
  3. Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能
  4. PKPM BIMViewer的使用
  5. React Native 开发豆瓣评分(八)首页开发
  6. 使用ngspice进行电路仿真
  7. Ubuntu安装KScope
  8. redis3集群管理
  9. 二十三、mysql索引管理详解
  10. flask 扩展包