詳解Sublime Text 外掛程式Emmet的使用
摘要：
安裝請看上一篇Sublime Text—安裝，和sublime自備快捷鍵一起用，寫html簡直快的飛起。
下面整理的是常用的，完整的可看emmet官方文件。
產生標籤
1.快速產生文件結構
#!或html:5，快速產生HTML5 結構(都需要再按tab鍵)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
html:xt產生HTML4 過渡型html:4s產生HTML4 嚴格類型
p#header
<p id="header"></p>
class 的元素
標籤. 類別名，如：p.title
<p class="title"></p>
nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
p+p+p
<p></p> <p></p> <p></p>
p^p
<p></p> <p></p>
如：
ul>li*5<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
登入後複製
8.產生帶自定義<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
屬性：[attr]
如：p[value=1]
<p value="1"></p>
a{Click me}
<a href="">Click me</a>
- 從1開始：加$
p.item${$$}*3#
<p class="item1">01</p> <p class="item2">02</p> <p class="item3">03</p>
- 倒序： $ 後面增加@-
p.item$@-{$$@-}*3#
<p class="item3">03</p> <p class="item2">02</p> <p class="item1">01</p>
- ##指定序號：可以使用@N
- 如：
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p></pre><div class="contentsignin">登入後複製</div></div>11.
：()如：
(ul>ol)*3<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>
<ol></ol>
</ul>
<ul>
<ol></ol>
</ul>
<ul>
<ol></ol>
</ul></pre><div class="contentsignin">登入後複製</div></div>來個
table#tab[value=1].a>tr*3>(td{$$}>span)*3
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><table id="tab" value="1" class="a">
<tr>
<td>01<span></span></td>
<td>02<span></span></td>
<td>03<span></span></td>
</tr>
<tr>
<td>01<span></span></td>
<td>02<span></span></td>
<td>03<span></span></td>
</tr>
<tr>
<td>01<span></span></td>
<td>02<span></span></td>
<td>03<span></span></td>
</tr>
</table></pre><div class="contentsignin">登入後複製</div></div>產生css
css樣式多，縮寫自然也很多，列舉常用的舉一反三即可。
其中css縮寫是採用模糊搜尋匹配的，例如ov:h == ov-h == ovh == oh。
- w10
width
: 10px;<a href="http://www.php.cn/wiki/835.html" target="_blank"> w10p </a>width: 10%;w10ewidth: 10em;w10xwidth: 10xe;#h10 -
height
: 10px;<a href="http://www.php.cn/wiki/836.html" target="_blank"></a>#por position
: relative;<a href="http://www.php.cn/wiki/902.html" target="_blank"> poa </a>position: absolute;fll float
: left;<a href="http://www.php.cn/wiki/919.html" target="_blank"> fr </a>float:right;<a href="http://www.php.cn/wiki/905.html" target="_blank"></a>dt display
: table;<a href="http://www.php.cn/wiki/927.html" target="_blank"> db </a>display: block;dibdisplay: inline-block;ovy overflow-y
: hidden;<a href="http://www.php.cn/wiki/926.html" target="_blank"></a>cb -
clear
: both;<a href="http://www.php.cn/wiki/917.html" target="_blank"></a>mt margin-top
: ;<a href="http://www.php.cn/wiki/933.html" target="_blank"> mb </a>margin-bottom: ;<a href="http://www.php.cn/wiki/935.html" target="_blank"></a>pt
<a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a>: ;pb<a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a>: ;tac
<a href="http://www.php.cn/wiki/870.html" target="_blank">text-align</a>: center;lh
<a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>:;tsn
<a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a>: none;tja
<a href="http://www.php.cn/wiki/881.html" target="_blank">text-justify</a>: auto;c
color: #000;crcolor: rgb(0, 0, 0);cracolor: rgba(0, 0, 0, .5);op
opacity: ;cnt
content: '';ol
<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>: ;bd+
border: 1px solid #000;bdb+border-bottom: 1px solid #000;bd2px#333s
border: 2px #333 solid;
快捷键
如果没作用请检查快捷键是否冲突
快速生成包裹标签：Ctrl+Shift+G
只有文本没有结构时，如下
首页 简介 动态
选中文本按快捷键Ctrl+Shift+G，再弹出的：Enter Wrap Abbreviation（输入扩展缩写）中输入nav>ul>li.item$*>a就会生成
<nav> <ul> <li class="item1"><a href="">首页</a></li> <li class="item2"><a href="">简介</a></li> <li class="item3"><a href="">动态</a></li> </ul> </nav>
如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。
1首页 2简介 3动态
自动添加/更新图片尺寸：ctrl+U
光标移到标签上的任意位置，按下快捷键ctrl+U即可。
<img src="img/x1.png" /> <img src="img/x1.png" width="100" height="200" />
删除标签：shift+ctrl+;
定位到上个编辑点：ctrl+alt+left
定位到下个编辑点：ctrl+alt+right
选中下一项：shift+ctrl+.
加/减1：ctrl+up/ctrl+down
加/减10：shift+alt+up/shift+alt+down
展开缩写：ctrl+e（和tab键作用相同）
重命名标签(rename_tag)：ctrl+shift+'
更换标签(update_as_you_type)：ctrl+Shift+U
匹配标签对：ctrl+alt+j
生成测试文本
输入lorem再按tab会随机生成一段英文,默认是生成30个单词，可以加上数字控制单词数量，如lorem5。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!
Lorem ipsum dolor sit amet.
以上是詳解Sublime Text 外掛程式Emmet的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
html該用什麼打開
Apr 21, 2024 am 11:33 AM
要開啟HTML文件，您需要使用瀏覽器，例如GoogleChrome或Mozilla Firefox。若要使用瀏覽器開啟HTML文件，請遵循以下步驟：1. 開啟您的瀏覽器。 2. 將HTML檔案拖曳到瀏覽器視窗中，或點選「檔案」選單並選擇「開啟」。
python程式用什麼軟體好
Apr 20, 2024 pm 08:11 PM
初學者推薦 IDLE 和 Jupyter Notebook，中/進階推薦 PyCharm、Visual Studio Code 和 Sublime Text。雲端 IDE Google Colab 和 Binder 提供互動式 Python 環境。其他推薦包括 Anaconda Navigator、Spyder 和 Wing IDE。選擇標準包括技能等級、專案規模和個人偏好。
python複製的程式碼怎麼用
Apr 20, 2024 pm 06:26 PM
在 Python 中使用複製的程式碼的步驟如下：將程式碼複製並貼上到文字編輯器中。建立一個 Python 文件。在命令列中運行程式碼。理解程式碼的用途和工作原理。根據需要修改程式碼並重新運行它。
html怎麼開啟本機文件
Apr 22, 2024 am 09:39 AM
HTML 可用於開啟本機文件，步驟如下：建立一個 .html 文件並匯入 jQuery 庫。建立一個輸入字段，允許使用者選擇文件。監聽檔案選擇事件並使用 FileReader() 物件讀取檔案內容。將讀取的文件內容顯示到網頁上。
python怎麼建立py文件
May 05, 2024 pm 07:57 PM
在 Python 中建立 .py 檔案的步驟：開啟文字編輯器（例如 Notepad、TextMate 或 Sublime Text）。建立新檔案並輸入 Python 程式碼，注意縮排和語法。儲存檔案時，使用 .py 副檔名（例如，my_script.py）。
html用什麼可以打開
Apr 21, 2024 am 11:36 AM
HTML檔案可使用瀏覽器（如Chrome、Firefox、Edge、Safari、Opera）開啟：找到HTML檔案（.html或.htm副檔名）；右鍵/長按檔案；選擇"開啟"；選擇您要使用的瀏覽器。
html編輯器哪個軟體好用
Apr 17, 2024 am 04:54 AM
綜上所述，以下 HTML 編輯器廣受好評：Visual Studio Code：跨平台、功能豐富、免費開源。 Sublime Text：高效能、客製化強、付費軟體。 Atom：跨平台、可擴充、開源免費。 Brackets：前端開發專用、直覺式介面、開源免費。 Notepad++：輕量快速、功能強大、開源免費。選擇 HTML 編輯器時，請考慮平台相容性、功能、擴充性、價格和使用者友善性等因素。
建立和開啟 HTML 空白文檔
Apr 09, 2024 pm 12:06 PM
建立HTML文件：使用文字編輯器輸入HTML結構，並儲存為.html檔案。開啟HTML文件：雙擊文件或在瀏覽器中使用「文件」>「開啟」選項。實戰案例：建立新HTML文件，新增標題、樣式表和內容，並儲存為.html檔案。
