ATOM基础教程一使用前端插件emmet(16)

发布时间:2017-7-1 11:08:04编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"ATOM基础教程一使用前端插件emmet(16) ",主要涉及到ATOM基础教程一使用前端插件emmet(16) 方面的内容,对于ATOM基础教程一使用前端插件emmet(16) 感兴趣的同学可以参考一下。

emmet简介

http://blog.csdn.net/zsl10/article/details/51956791

emmet的前身是Zen coding,从事Web前端开发的工程师对该插件并不陌生,emmet使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。 
emmet的主要功能有:

  • snippet(代码片段)
  • abbreviation expand(简写展开)

emmet的主要特性有:

  • 简写支持嵌套
  • 简写支持分组
  • 简写支持乘法
  • 简写支持自增和自减,起序,编号

使用emmet快速生成HTML标签

1 .快速编写HTML代码

  • html:5 或!:用于HTML5文档类型
  • html:xt:用于XHTML过渡文档类型
  • html:4s:用于HTML4严格文档类型

使用:输入html:5/html:xt/html:4s按下TAB键 
这里写图片描述

2 .添加class、id、文本和属性

  • class: .
  • id: #
  • 属性: []
  • 内容:{}

  • 添加class 
    这里写图片描述

  • 添加id 
    这里写图片描述
  • 添加HTML元素内容 
     这里写图片描述
  • 添加HTML元素属性 
    这里写图片描述 
    3 .嵌套

  • > :子元素符号 
    这里写图片描述

  • +:同级标签符号 
    这里写图片描述
  • ^:使该符号后的标签提升到上一级 
    这里写图片描述 
    4 .定义多个元素



上一篇:ASP.NET MVC4中的App_start中BundleConfig的介绍使用
下一篇:Android View中getViewTreeObserver().addOnGlobalLayoutListener() (转)

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款