Emmet快速語法—助力HTML/CSS一行程式碼一個頁面

是八哥呀！發表於2021-11-13

學會之後牛掰的場景如下

我們的目標就是用一行程式碼=>寫下面這樣的長長長長的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結構來.

寫在最後：練習個兩三遍就會了。

HTML/CSS 速寫神器 Emmet語法
2017-02-12
HTMLCSS
HTML程式碼簡寫法：Emmet和Haml
2013-06-11
HTML
Emmet語法
2020-12-06
jQuery語法高亮外掛，程式碼著色，頁面程式碼著色
2013-04-04
jQuery
使整個頁面變灰的css程式碼
2014-10-05
CSS
一行 CSS 程式碼的魅力
2021-01-06
CSS
如何將一個HTML頁面巢狀在另一個頁面中
2012-08-28
HTML巢狀
HTML頁面和CSS檔案
2015-04-30
HTMLCSS
emmet語法 1127
2020-11-27
如何將一個.html匯入進另一個.html頁面?
2018-01-25
HTML
Zen Coding: 一種快速編寫HTML/CSS程式碼的方法
2012-05-17
HTMLCSS
Emmet外掛常用語法總結
2018-04-20
記錄幾個影片嵌入網頁的html程式碼寫法
2024-11-08
網頁HTML
讓 Chrome 崩潰的一行 CSS 程式碼
2019-03-03
ChromeCSS
登陸註冊頁面html程式碼(仿知乎)
2020-12-08
HTML
[譯]HTML&CSS Lesson1: 構建第一張頁面
2019-03-01
HTMLCSS
分享一個登入頁面基於Tailwind CSS
2022-03-17
AICSS
微信小程式WXML頁面常用語法（講解+示例）
2020-08-16
微信小程式XML
css-3秒（大概吧...）快速擼出YY遊戲頁面（一）
2017-12-17
CSS遊戲
360安全衛士靜態頁面(html+css)
2020-12-05
HTMLCSS
Zen Coding 快速編寫HTML/CSS程式碼的實現
2013-06-19
HTMLCSS
返回到上一頁的html程式碼
2016-11-11
HTML
在Flex （Flash）中嵌入HTML 程式碼或頁面—Flex IFrame
2013-08-15
FlexHTML
一段實現HTML頁面內定期觸發事件的JavaScript程式碼
2007-12-16
HTML事件JavaScript
一行HTML也能畫畫？來一個！
2020-10-23
HTML
SpringBoot在controller返回一個HTML頁面
2020-10-25
Spring BootControllerHTML
尚學堂的一個用了ExtJs的頁面程式碼
2013-12-12
JS
php頁面巢狀html程式碼,,html中js呼叫php中的陣列
2017-09-06
PHP巢狀HTMLJS陣列
HTML API + CSS 控制頁面列印內容和樣式
2023-02-22
HTMLAPICSS
html&css基礎_頁面常見文字設定
2017-12-27
HTMLCSS
jquery連線html頁面做一個彈出框輸入
2021-09-09
jQueryHTML
css兩個div在同一行排列
2017-03-08
CSS
基本的HTML頁面
2017-01-16
HTML
有趣的html頁面
2024-10-27
HTML
頁面常用程式碼整理
2018-04-18
編寫HTML頁面常見的CSS樣式問題
2018-11-26
HTMLCSS
【小練習04】HTML+CSS--醫藥健康小頁面
2017-05-12
HTMLCSS
Emmet，讓你愛上敲程式碼
2016-12-09

Emmet快速語法—助力HTML/CSS一行程式碼一個頁面

學會之後牛掰的場景如下

Emmet語法—助力HTML/CSS快到起飛

1.概述

2.語法講解

1.HTML的初始結構

2.id(#),class(.)

3.子節點>、兄弟節點+、上級節點^、

4.重複*

5.分組()

6.屬性[attr]

7.編號$

8.文字{}