玄子Share - HTML Emmet 語法詳細(xì)介紹
以下
Emmet語法 基于WebStorm 2023.2演示
Emmet 語法介紹
Emmet 是一種縮寫語法，旨在簡化 HTML 和 CSS 的編寫。它基于 CSS 選擇器的語法結(jié)構(gòu)，通過輸入特定的縮寫，可以快速生成 HTML 結(jié)構(gòu)。
Emmet 語法優(yōu)點
- 提高開發(fā)效率： Emmet 的主要目的之一是提高開發(fā)效率。通過輸入簡單的縮寫，您可以快速生成復(fù)雜的 HTML 和 CSS 代碼，而無需手動鍵入每個標(biāo)簽和屬性。這極大地減少了重復(fù)勞動和時間浪費。
- 減少錯誤和拼寫問題： 手動鍵入 HTML 和 CSS 代碼時，經(jīng)常會出現(xiàn)拼寫錯誤、遺漏標(biāo)簽或?qū)傩缘葐栴}。Emmet 的自動補全功能可以減少這些錯誤，因為它根據(jù)縮寫生成代碼，不容易出現(xiàn)拼寫錯誤。
- 簡潔的語法： Emmet 的語法非常簡潔明了。通過使用簡短的符號和縮寫，您可以表示復(fù)雜的結(jié)構(gòu)，這使得代碼更易于閱讀和管理。
- 嵌套和結(jié)構(gòu)更清晰： Emmet 支持嵌套結(jié)構(gòu)，使得在 HTML 和 CSS 中創(chuàng)建嵌套元素和布局更加直觀。這可以幫助您更清晰地組織代碼，減少代碼混亂的可能性。
- 與編輯器無縫集成**：** Emmet 集成到許多流行的代碼編輯器中，如 Visual Studio Code、Sublime Text、Atom 等。這意味著您可以在編輯器中直接使用 Emmet 縮寫，并且很多編輯器還支持自定義 Emmet 擴展。
- 功能豐富： Emmet 支持許多高級功能，如層級選擇器、重復(fù)生成、數(shù)學(xué)表達(dá)式等。這些功能可以讓您更靈活地生成代碼，適應(yīng)各種不同的開發(fā)需求。
- 跨平臺支持： 無論您是在 Windows、macOS 還是 Linux 上開發(fā)，Emmet 都提供跨平臺支持，您可以在不同的操作系統(tǒng)上使用相同的縮寫語法。
Emmet 基礎(chǔ)語法
Emmet 編寫的縮寫通常是結(jié)合標(biāo)簽名、類名、ID、屬性等信息，使用縮寫后按下 Tab 鍵即可展開成完整的 HTML 或 CSS 代碼。在您的編碼工作中，掌握 Emmet 語法將會是一個非常實用的技能，它能夠幫助您更快地編寫出規(guī)范且高效的代碼。
基礎(chǔ)標(biāo)簽
<p></p>
<div></div>
<span></span>
<!-- * + Tab -->
輸入對應(yīng)
標(biāo)簽名 + Tab補全標(biāo)簽，例如：div + Tab = <div></div>
屬性標(biāo)簽
<a href=""></a>
<img src="" alt="">
<video src=""></video>
<audio src=""></audio>
<!-- * + Tab -->
輸入對應(yīng)
標(biāo)簽名 + Tab補全標(biāo)簽，此類標(biāo)簽會生成必要屬性，例如a標(biāo)簽的href屬性
表單標(biāo)簽
<input type="button" value="">
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">
<input type="file" name="" id="">
<input type="text" name="" id="">
<input type="password" name="" id="">
<input type="color" name="" id="">
<input type="image" src="" alt="">
<input type="range" name="" id="">
<input type="search" name="" id="">
<input type="date" name="" id="">
<input type="month" name="" id="">
<input type="datetime" name="" id="">
<input type="datetime-local" name="" id="">
<!-- input:data + Tab -->
大多表單標(biāo)簽生成語法均為
input: + 表單類型 + Tab，例如input:date + Tab = <input type="date" name="" id="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id=""></select>
<!-- textarea + Tab -->
表單中的特殊標(biāo)簽，例如
textarea與select標(biāo)簽等，Emmet語法與屬性標(biāo)簽使用方法一致
textarea標(biāo)簽的必要屬性會填充默認(rèn)值
類名與 ID
Emmet 語法中，可以使用 . 符號來表示類名，使用 # 符號來表示 ID。
<div class="root"></div>
<!-- div.root + Tab -->
<span class="content"></span>
<!-- span.content + Tab -->
<img src="" alt="" class="logo">
<!-- img.logo + Tab -->
<header id="header"></header>
<!-- header#header + Tab -->
<nav id="navigate"></nav>
<!-- nav#navigate + Tab -->
輸入對應(yīng)
標(biāo)簽名.class + Tab或標(biāo)簽名#id + Tab補全對應(yīng)標(biāo)簽加class或id屬性直接寫
.class 或 #id默認(rèn)生成div標(biāo)簽
標(biāo)簽文本
<div>這是一個 div</div>
<!-- div{這是一個 div} + Tab -->
輸入對應(yīng)
標(biāo)簽名{text} + Tab，生成對應(yīng)標(biāo)簽加text文本內(nèi)容
標(biāo)簽屬性
<a href="https://www.xuanzishare.com" target="_blank"></a>
<!-- a[] + Tab -->
輸入對應(yīng)
標(biāo)簽名[屬性名="屬性值"] + Tab生成對應(yīng)標(biāo)簽加對應(yīng)屬性，多對屬性使用[ ]連續(xù)拼接
批量生成
在日常開發(fā)中一個ul 或 ol標(biāo)簽通常會附帶多個li子標(biāo)簽，或多div子級嵌套都會出現(xiàn)多個重復(fù)的標(biāo)簽
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- li*5 + Tab -->
輸入對應(yīng)
標(biāo)簽名*count + Tab，生成count個對應(yīng)標(biāo)簽
編號排序
<li>1</li>
<li>2</li>
<li>3</li>
<!-- li{$}*3 + Tab -->
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<!-- li{$@2}*5 + Tab-->
輸入對應(yīng)
標(biāo)簽名{$}*count + Tab，生成count個對應(yīng)標(biāo)簽，且文本自動填充編號，編號數(shù)量與count一致使用
@可修改起始編號
嵌套結(jié)構(gòu)
Emmet 支持快速嵌套結(jié)構(gòu)，可以使用>或+與^來實現(xiàn)。
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- div>ul>li*3 + Tab -->
輸入對應(yīng)
標(biāo)簽名 > 子標(biāo)簽名 + Tab，生成指定標(biāo)簽的嵌套結(jié)構(gòu)
<div></div>
<img src="" alt="">
<p></p>
<!-- div+img+p -->
輸入對應(yīng)
標(biāo)簽名 + 兄弟標(biāo)簽名 + Tab，生成指定標(biāo)簽的同級結(jié)構(gòu)
<div>
<p></p>
<img src="" alt="">
</div>
<div></div>
<!-- div>p+img^div + Tab -->
輸入對應(yīng)
父級標(biāo)簽名 > 子級標(biāo)簽名 ^ 父級同級標(biāo)簽名 + Tab，生成指定父級標(biāo)簽的子級標(biāo)簽再返回父級標(biāo)簽生成父級的同級標(biāo)簽
頁面結(jié)構(gòu)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
輸入對應(yīng)
! + Tab，生成 HTML 基礎(chǔ)頁面結(jié)構(gòu)
Emmet 高級語法
Emmet 語法在 CSS 中同樣可以帶來高效的編碼體驗。
生成選擇器
使用 Emmet 可以快速生成選擇器，避免手動鍵入重復(fù)的類名或標(biāo)簽名。
- 輸入
.class，會生成一個類選擇器：.class {} - 輸入
#id，會生成一個 ID 選擇器：#id {} - 輸入
div.container，會生成一個帶標(biāo)簽和類名的選擇器：div.container {}
生成屬性
Emmet 也支持生成 CSS 屬性，使您能夠更快速地添加樣式。
- 輸入
bgc:red，會生成background-color: red; - 輸入
fs:14px，會生成font-size: 14px; - 輸入
p:10px 20px，會生成padding: 10px 20px;
生成邊框圓角
Emmet 可以生成一些常見的屬性，如邊框、圓角、陰影等。
- 輸入
b:1px solid #ccc，會生成border: 1px solid #ccc; - 輸入
br:5px，會生成border-radius: 5px;
生成偽類和偽元素
Emmet 支持生成偽類和偽元素。
- 輸入
h:hov，會生成:hover {} - 輸入
b:bef，會生成::before {}
生成屬性值
Emmet 還可以在屬性值中生成數(shù)值序列，適用于一些需要重復(fù)的屬性值，如動畫關(guān)鍵幀。
- 輸入
tr:0 100%，會生成transform: translate(0, 100%);
生成屬性值和自動補全
Emmet 支持生成屬性值和自動補全，減少手動輸入。
- 輸入
m:a，會生成margin: auto; - 輸入
d:f，會生成display: flex;
這些示例展示了在 CSS 中使用 Emmet 的一些常見情況。Emmet 可以大大加速您編寫 CSS 的速度，提高開發(fā)效率。它的語法簡潔易懂，適用于各種樣式的生成和快速編輯。文章來源：http://www.zghlxwxcb.cn/news/detail-668178.html
Emmet 實現(xiàn)場景
生成三行四列的表格加文本
table>tr*3>td{$}*4
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
生成指定數(shù)量的無序列表加文本
ol>li{$}*4
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
生成指定容器內(nèi)多個同級元素加屬性加文本
div.container>div.item${測試$}*8
<div class="container">
<div class="item1">測試1</div>
<div class="item2">測試2</div>
<div class="item3">測試3</div>
<div class="item4">測試4</div>
<div class="item5">測試5</div>
<div class="item6">測試6</div>
<div class="item7">測試7</div>
<div class="item8">測試8</div>
</div>
玄子Share - HTML Emmet 語法詳細(xì)介紹 8.19文章來源地址http://www.zghlxwxcb.cn/news/detail-668178.html
到了這里，關(guān)于玄子Share - HTML Emmet 語法詳細(xì)介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
