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快到起飞 1.概述 在前端开发的过程中, HTML、CSS 代码中大量重复的标签、属性、括号等,让人头疼。
这里推荐一个Emmet语法规则,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,或者你想要的代码块。简单来说用这个快速语法能快速写HTML/CSS快到起飞,减少重复操作。
Emmet是一款插件,能装就能用现在基本写前端的都在用,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Hbuilder、Atom、Dreamweaver等等编辑器都可以使用。
例子:2.语法讲解 1.HTML的初始结构
比如以前写这段,怎么也要一分钟吧!
- 你好,我是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键。
直接
"!"
+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
{}
文本指令:
{}
- ul>li.text${测试$}*3 (里面填写内容,可以和
$
组合使用)
- 测试1
- 测试2
- 测试3
这个标签没有指令,而是部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。
(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结构来.写在最后:练习个两三遍就会了。
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 六步搭建ES6语法环境
- neo4j|neo4j cql语句 快速查询手册
- SpringBoot中YAML语法及几个注意点说明
- 通过复盘快速成长(附模板)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- MySQL|MySQL 存储过程语法及实例
- WebSocket|WebSocket 语法解析
- jar|springboot项目打成jar包和war包,并部署(快速打包部署)
- 灵感迸发