飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

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

时间:2021-12-04  作者:liubage01  
详细语法教程。 一行代码完成一个HTML结构和代码块,甚至一行代码一个页面

学会之后牛掰的场景如下

我们的目标就是用一行代码=>写下面这样的长长长长的HTML结构来.

如:table>(域名>th{手机1}*4)+(域名$*4>td{晓龙865}*4)+域名>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]+域名t>域名e+域名y+div>域名+域名)*9

<ul>
			<li><a href="#">
					<img src="img/pro/域名" 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/域名" 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/域名" 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/域名" 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/域名" 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/域名" 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/域名" 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/域名" 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/域名" 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>

只需要输入域名>p#title>ul>域名d${我是第$个}*4^域名+Tab键。

2.语法讲解

域名的初始结构

直接 "!"+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>

域名(#),class(.)

id指令:# ; class指令:.

div#title

<div id="title"></div>

域名e

<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>域名$*3 ($代表一位数,后面加上*3就代表这从1递增到填写的数字)

    <ul>
    	<li class="text1"></li>
    	<li class="text2"></li>
    	<li class="text3"></li>
    </ul>
    

    一个$就是一位数,两个$就是两位数,$$$就是三位数

  • ul>域名$$$*3

    <ul>
    	<li class="text001"></li>
    	<li class="text002"></li>
    	<li class="text003"></li>
    </ul>
    
  • 自定义数字递增

    从几开始递增可以写成:**$@+数字*数字 **

    ul>域名$@3*3

    <ul>
    	<li class="text3"></li>
    	<li class="text4"></li>
    	<li class="text5"></li>
    </ul>
    

8.文本{}

文本指令: {}

  • ul>域名${测试$}*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:可以在ulol中使用 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>(域名>th{手机1}*4)+(域名$*4>td{晓龙865}*4)+域名>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结构来.

写在最后:练习个两三遍就会了。

标签:编程
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。