锐客网

  1. 首页 > it技术 > >

Emmet快速语法—助力HTML/CSS一行代码一个页面

学会之后牛掰的场景如下 我们的目标就是用一行代码=>写下面这样的长长长长的HTML结构来.
如：table>(thead.text>th{手机1}*4)+(tbody.text$*4>td{晓龙865}*4)+tfoot.test>td

手机1 手机1 手机1 手机1
晓龙865 晓龙865 晓龙865 晓龙865
晓龙865 晓龙865 晓龙865 晓龙865
晓龙865 晓龙865 晓龙865 晓龙865
晓龙865 晓龙865 晓龙865 晓龙865

甚至是一行代码写页面的结构
(抱歉！！！这个地方没有图，我也懒得传图床，反正就是直接一个页面出来了，大大的牛逼克拉斯！)
ul>(li>a[href=https://www.it610.com/article/#]>img[src=https://www.it610.com/article/img/pro/$.jpg]+div.right>div.title+div.money+div>span.love+span.num)*9
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片
  • Emmet快速语法—助力HTML/CSS一行代码一个页面
    文章图片

Emmet语法—助力HTML/CSS快到起飞 1.概述 在前端开发的过程中， HTML、CSS 代码中大量重复的标签、属性、括号等，让人头疼。
这里推荐一个Emmet语法规则，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，或者你想要的代码块。简单来说用这个快速语法能快速写HTML/CSS快到起飞，减少重复操作。
Emmet是一款插件，能装就能用现在基本写前端的都在用,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Hbuilder、Atom、Dreamweaver等等编辑器都可以使用。
例子：
比如以前写这段，怎么也要一分钟吧！
  • 你好，我是Lisa
  • 你好，我是Lisa
  • 你好，我是Lisa
  • 你好，我是Lisa
  • 你好，我是Lisa
  • 你好，我是Lisa
  • 你好，我是Lisa
  • 你好，我是Lisa

现在只需要10秒以内就可以搞定。
div>ul*3>li{你好，我是Lisa}*3+Tab键
还有复杂一点的,比如这个
  • 我是第1个
  • 我是第2个
  • 我是第3个
  • 我是第4个


只需要输入div.box>p#title>ul>li.child${我是第$个}*4^div.box2+Tab键。
2.语法讲解 1.HTML的初始结构
直接 "!"+Tab ,防止徒手写出错。
- 锐客网

2.id(#),class(.)
id指令：# ； class指令：.；
div#title

div.title
niha

3.子节点>、兄弟节点+、上级节点^、
子节点指令：>,兄弟节点指令：+,上级节点指令：^。
  • div>ul>li>p


  • div+ul+p


    • div>ul>li^div (这里的^是接在li后面所以在li的上一级，与ul成了兄弟关系,当然两个^^就是上上级）

    4.重复*
    重复指令*(*号后面数字就是重复的元素数量)
    • div*5

    5.分组()
    分组指令:()
    • div>(ul>li>a)+div>p (括号内部为一个代码块，表示括号内部嵌套与外边的层级无关)


    如果不写括号，那a标签和div标签就是兄弟关系


    6.属性[attr]
    id、class都有，肯定少不了属性呀！
    属性指令:[]
    • a[href=https://www.it610.com/article/# name=小明] (中括号内填写键值对的形式，并且用空格隔开)

    7.编号$
    编号指令：$
    • ul>li.text$*3 ($代表一位数，后面加上*3就代表这从1递增到填写的数字)

      一个$就是一位数，两个$就是两位数，$$$就是三位数
    • ul>li.text$$$*3

    • 自定义数字递增
      从几开始递增可以写成：**$@+数字*数字 **
      ul>li.text$@3*3

    8.文本{}
    文本指令： {}
    • ul>li.text${测试$}*3 (里面填写内容，可以和$组合使用)
      • 测试1
      • 测试2
      • 测试3

    9.隐式标签
    这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。
    (1)如默认div，.test

    (2)li:可以在ul和ol中使用 li>.test$*3

    (3)option:可在select中使用 select>.test$*3

    tr：可在 table、tbody、thead 和 tfoot 中使用
    td：可在 tr 中使用
    如：table>(thead.text>th{手机1}*4)+(tbody.text$*4>td{晓龙865}*4)+tfoot.test>td
    手机1 手机1 手机1 手机1
    晓龙865 晓龙865 晓龙865 晓龙865
    晓龙865 晓龙865 晓龙865 晓龙865
    晓龙865 晓龙865 晓龙865 晓龙865
    晓龙865 晓龙865 晓龙865 晓龙865

    【Emmet快速语法—助力HTML/CSS一行代码一个页面】我们的目标就是用一行代码=》写出来这样的长长长长的HTML结构来.
    写在最后：练习个两三遍就会了。

      推荐阅读


      上一篇：没有牙膏牙刷|没有牙膏牙刷, 古人饭后如何清洁口腔

      下一篇：风吹来的芳华