Emmet快速语法—助力HTML/CSS一行代码一个页面
学会之后牛掰的场景如下
我们的目标就是用一行代码=>
写下面这样的长长长长的HTML结构来.
如:table>(thead.text>th{手机1}*4)+(tbody.text$*4>td{晓龙865}*4)+tfoot.test>td
<table>
<thead class="text">
<th>手机1</th>
<th>手机1</th>
<th>手机1</th>
<th>手机1</th>
</thead>
<tbody class="text1">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tbody class="text2">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tbody class="text3">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tbody class="text4">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tfoot class="test">
<td></td>
</tfoot>
</table>
甚至是一行代码写页面的结构
(抱歉!!!这个地方没有图,我也懒得传图床,反正就是直接一个页面出来了,大大的牛逼克拉斯!)
ul>(li>a[href=#]>img[src=img/pro/$.jpg]+div.right>div.title+div.money+div>span.love+span.num)*9
<ul>
<li><a href="#">
<img src="img/pro/1.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/2.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/3.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/4.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/5.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/6.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/7.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/8.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/9.jpg" alt="">
<div class="right">
<div class="title"></div>
<div class="money"></div>
<div><span class="love"></span><span class="num"></span></div>
</div>
</a></li>
</ul>
Emmet语法—助力HTML/CSS快到起飞
1.概述
在前端开发的过程中, HTML、CSS 代码中大量重复的标签、属性、括号等,让人头疼。
这里推荐一个Emmet语法规则,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,或者你想要的代码块。简单来说用这个快速语法能快速写HTML/CSS快到起飞,减少重复操作。
Emmet是一款插件,能装就能用现在基本写前端的都在用,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Hbuilder、Atom、Dreamweaver等等编辑器都可以使用。
例子:
比如以前写这段,怎么也要一分钟吧!
<div>
<ul>
<li>你好,我是Lisa</li>
<li>你好,我是Lisa</li>
<li>你好,我是Lisa</li>
<li>你好,我是Lisa</li>
</ul>
<ul>
<li>你好,我是Lisa</li>
<li>你好,我是Lisa</li>
<li>你好,我是Lisa</li>
<li>你好,我是Lisa</li>
</ul>
</div>
现在只需要10秒以内就可以搞定。
div>ul*3>li{你好,我是Lisa}*3
+Tab键还有复杂一点的,比如这个
<div class="box">
<p id="title">
<ul>
<li class="child1">我是第1个</li>
<li class="child2">我是第2个</li>
<li class="child3">我是第3个</li>
<li class="child4">我是第4个</li>
</ul>
<div class="box2"></div>
</p>
</div>
只需要输入
div.box>p#title>ul>li.child${我是第$个}*4^div.box2
+Tab键。
2.语法讲解
1.HTML的初始结构
直接 "!"
+Tab ,防止徒手写出错。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
</html>
2.id(#),class(.)
id指令:#
; class指令:.
;
div#title
<div id="title"></div>
div.title
<div class="title"></div>
niha
3.子节点>
、兄弟节点+
、上级节点^
、
子节点指令:>,兄弟节点指令:+,上级节点指令:^。
div>ul>li>p
<div>
<ul>
<li>
<p></p>
</li>
</ul>
</div>
div+ul+p
<div></div>
<ul></ul>
<p></p>
- div>ul>li^div (这里的
^
是接在li
后面所以在li
的上一级,与ul
成了兄弟关系,当然两个^^就是上上级)
<div>
<ul>
<li></li>
</ul>
<div></div>
</div>
4.重复*
重复指令*
(*
号后面数字就是重复的元素数量)
- div*5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
5.分组()
分组指令:()
- div>(ul>li>a)+div>p (括号内部为一个代码块,表示括号内部嵌套与外边的层级无关)
<div>
<ul>
<li><a href="#"></a></li>
</ul>
<div>
<p></p>
</div>
</div>
如果不写括号,那
a
标签和div
标签就是兄弟关系
<div>
<ul>
<li>
<a href="#"></a>
<div>
<p></p>
</div>
</li>
</ul>
</div>
6.属性[attr]
id、class都有,肯定少不了属性呀!
属性指令:
[]
a[href=# name=小明]
(中括号内填写键值对的形式,并且用空格隔开)
<a href="#" name="小红"></a>
7.编号$
编号指令:$
ul>li.text$*3 (
$
代表一位数,后面加上*3
就代表这从1递增到填写的数字)<ul>
<li class="text1"></li>
<li class="text2"></li>
<li class="text3"></li>
</ul>
一个$就是一位数,两个$就是两位数,$$$就是三位数
ul>li.text$$$*3
<ul>
<li class="text001"></li>
<li class="text002"></li>
<li class="text003"></li>
</ul>
自定义数字递增
从几开始递增可以写成:**$@+数字*数字 **
ul>li.text$@3*3
<ul>
<li class="text3"></li>
<li class="text4"></li>
<li class="text5"></li>
</ul>
8.文本{}
文本指令: {}
ul>li.text${测试$}*3 (里面填写内容,可以和
$
组合使用)<ul>
<li class="text1">测试1</li>
<li class="text2">测试2</li>
<li class="text3">测试3</li>
</ul>
9.隐式标签
这个标签没有指令,而是部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。
(1)如默认div,.test
<div class="test"></div>
(2)li
:可以在ul
和ol
中使用 li>.test$*3
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
(3)option
:可在select
中使用 select>.test$*3
<select name="" id="">
<option class="test1"></option>
<option class="test2"></option>
<option class="test3"></option>
</select>
tr:可在 table、tbody、thead 和 tfoot 中使用
td:可在 tr 中使用
如:table>(thead.text>th{手机1}*4)+(tbody.text$*4>td{晓龙865}*4)+tfoot.test>td
<table>
<thead class="text">
<th>手机1</th>
<th>手机1</th>
<th>手机1</th>
<th>手机1</th>
</thead>
<tbody class="text1">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tbody class="text2">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tbody class="text3">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tbody class="text4">
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
<td>晓龙865</td>
</tbody>
<tfoot class="test">
<td></td>
</tfoot>
</table>
我们的目标就是用一行代码=》
写出来这样的长长长长的HTML结构来.
写在最后:练习个两三遍就会了。
最新文章
- Python的全局变量
- scala 学习心得
- php xml转为xml或者json
- Trucking(HDU 2962 最短路+二分搜索)
- spl_autoload_register()
- 将json的时间格式转换成正常的时间格式
- C#整理6——数组的应用
- Rabbitmq 性能测试
- 《Linux命令行与shell脚本编程大全》第二十六章 一些有意思的脚本
- javascript01
- java--- 使用interrupte中断线程的真正用途
- python的迭代器
- BootStrap table动态增删改表格内数据
- 怎样将本地web数据库项目部署到腾讯云服务器上?
- mysql8.0驱动问题
- CodeMirror tab转空格
- 基于FPGA的DDS设计(一)
- 【58沈剑架构系列】DB主从一致性架构优化4种方法
- HDU 1166 敌兵布阵 (线段树模版题)
- NameError: name &#39;unicode&#39; is not defined
热门文章
- netty系列之:使用netty搭建websocket服务器
- IdentityServer4[3]:使用客户端认证控制API访问(客户端授权模式)
- SDOI2015 排序
- 【原创】xenomai 在X86平台下中断响应时间测试
- Java课堂测试1第三阶段
- CF1082E Increasing Frequency (multiset+乱搞+贪心)
- bzoj2064分裂(dp)
- L1-023 输出GPLT (20 分) java题解 GPLT天梯赛防坑技巧
- 保护模式篇——TLB与CPU缓存
- CentOS 文件管理