欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

说一个Sublime Text 2插件、emmet(原名:zen Coding)_html/css_WEB-ITnose

程序员文章站 2022-05-19 18:57:22
...

工具/原料

  • sublime Text 2

  • 安装emmet插件

  • 方法/步骤

    1. 生成html文档初始结构:

      !

      Document

      html:5

      Document

      html:xs

      Document

      html:4s

      Document

    2. 生成带有id,class的标签:

      Emmet默认标签是div

      #id

      p#id

      h1#id

      span#id

      .class

      p.class

      h1.class

      span.class

      输入多个class 添加两个.class1.class2

      .class1.class2

    3. 语法:

      语法:

      >:生成后辈

      div>span>p>h1

      +:生成同辈

      div+span+p+h1

      ^:生产叔辈

      div>span>p^h1

      *:生成重复多分

      ul>li*3

      ():生成分组

      ul>(li.li_1*3)+(li.li_2*3)

      [attr]:生成属性

      a[href=index.html title=index]

      input[type=button]

      input[type=submit name=submit]

      $:生成编号 $的个数就是数字的个数 @指定开始的数字 @?倒序

      ul>li.li_$*3

      ul>li.li_$@0*3,

      ul>li.li_$@-*3

      {}:生成内容

      p{$}*3

      1

      2

      3

      a[href=index.html]{click}+a[href=test.html]{mouseover}

      click

      mouseover

      高级:

      Lorem*: 生成测试文本,*表示0-无限个 默认30个单词

      p>lorem2

      Lorem ipsum.

      p>lorem4

      Lorem ipsum dolor sit.

      p>lorem6

      Lorem ipsum dolor sit amet, consectetur.

      p>lorem

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, delectus nostrum pariatur accusamus necessitatibus maiores ut natus id sit ab vel assumenda ratione harum quas adipisci eveniet temporibus praesentium ducimus!

      套接作用

      全选后,ctrl+shirt+g,输入div.demo1>h1{test1}+div.test2

      test1

      文本转换成html标签

      1.小学生

      2.中学生

      3.大学生

      4.研究生

      5.博士生

      全选后:Ctrl+shift+g 输入:ul>li*>a

      去除所有序号

      ul>li*>a|t