本節來講一下Emmet插件的用法及相關語法。
Emmet插件極大的提高了編程員的編程速度,下面我們來講講它的具體語法:
# 一、生成 HTML 文檔初始結構
HTML 文檔的初始結構,就是包括 doctype、html、head、body 以及 meta 等內容。你只需要輸入一個 “!” 就可以生成一個 HTML5 的標準文檔初始結構,你沒有看錯,輸入一個感嘆號(當然是英文符號),然后摁下 ctrl+E 鍵或者Tab,就會發現生成了下面的結構:
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
~~~
這就是一個 HTML5 的標準結構,也是默認的 HTML 結構。如果你想生成 HTML4 的過渡型結構,那么輸入指令 html:xt,然后ctrl+E, 即可生成如下結構:
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
~~~
* Emmet 會自動把 doctype 給你補全了,怎么樣,這樣的功能會不會讓你動心?簡單總結一下常用的 HTML 結構指令:
* html:5 或者 ! 生成 HTML5 結構
* html:xt 生成 HTML4 過渡型
* html:4s 生成 HTML4 嚴格型
# 二、生成帶有 id 、class 的 HTML 標簽
Emmet 的語法有點類似 CSS 的語法,生成 id 為 aaa 的 div 標簽,我們只需要編寫下面指令:
`#aaa`
Emmet 默認的標簽為 div ,如果我們不給出標簽名稱的話,默認就生成 div 標簽。如果編寫一個 class 為 bbb 的 span 標簽,我們需要編寫下面指令:
`span.bbb`
然后就生成了對應的結構。同理,如果想要編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標簽,我們可以這樣寫:
`ul#ccc.ddd`
很簡單吧?比你用手寫 id 、class 方便多了吧
# 三、生成后代:>
大于號表示后面要生成的內容是當前標簽的后代。例如我要生成一個無序列表,而且被 class 為 aaa 的 div 包裹,那么可以使用下面指令:
`div.aaa>ul>li`
可以生成如下的結構:
~~~
<div>
<ul>
<li></li>
</ul>
</div>
~~~
# 四、生成兄弟:+
上面是生成下級元素,如果想要生成平級的元素,就需要使用 + 號。例如下面指令:
`div+p+bq`
就可以生成如下的 HTML 結構:
~~~
<div></div>
<p></p>
<blockquote></blockquote>
~~~
# 五、生成上級元素:^
上級 (Climb-up)元素是什么意思呢?前面咱們說過了生成下級元素的符號“>”,當使用 div>ul>li 的指令之后,再繼續寫下去,那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽,那么我需要先用 “^” 提升一下層次。例如:
`div>ul>li^span`
就會生成如下結構:
~~~
<div>
<ul>
<li></li>
</ul>
<span></span>
</div>
~~~
如果我想相對與 div 生成一個平級元素,那么就再上升一個層次,多用一個“^”符號:
`div>ul>li^^span`
# 六、重復生成多份:
特別是一個無序列表,ul 下面的 li 肯定不只是一份,通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字:
`ul>li*5`
這樣就直接生成五個項目的無序列表了。如果想要生成多份其他結構,方法類似。
# 七、生成分組:()、
用括號進行分組,這樣可以更加明確要生成的結構,特別是層次關系,例如:
`div>(header>ul>li*2>a)+footer>p`
這樣很明顯就可以看出層次關系和并列關系,生成如下結構:
~~~
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
~~~
# 八、此外,分組還可以很方便的結合上面說的 “*” 符號生成重復結構:
`(div>dl>(dt+dd)*3)+footer>p`
生成結構:
~~~
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
~~~
# 九、生成自定義屬性:[attr]
a 標簽中往往需要附帶 href 屬性和 title 屬性,如果我們想生成一個 href 為 “http://www.haorooms.com/ ,title 為“haorooms 博客”的 a 標簽,可以這樣寫:
`a[href="http://www.haorooms.com/" title="haorooms 博客"]`
其他標簽和屬性都類似。
# 十、對生成內容編號:$
例如無序列表,我想為五個個 li 增加一個 class 屬性值 item1 ,然后依次遞增從 1-5,那么就需要使用 $ 符號:
`ul>li.item$*5`
這樣就生成了如下結構:
~~~
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
~~~
$ 就表示一位數字,只出現一個的話,就從1開始。如果出現多個,就從0開始。如果我想生成三位數的序號,那么要寫三個 $:
`ul>li.item$$$*5`
輸出:
~~~
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
~~~
只能這樣單調的生成序號?對于強大的 Emmet 來說,肯定不會會了,我們也可以在 $ 后面增加 @- 來實現倒序排列:
`ul>li.item$@-*5`
生成如下結構:
~~~
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
~~~
同樣,我們也可以使用 @N 指定開始的序號:
`ul>li.item$@3*5`
這樣就會從 3 開始排序,生成如下代碼:
~~~
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
~~~
配合上面倒序輸出,可以這樣寫:
`ul>li.item$@-3*5`
生成的就是以 3 為底倒序:
~~~
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
~~~
# 十一、生成文本內容:{}
上面講解了如何生成 HTML 標簽,那里面的內容呢?當然也可以生成了:
`a[href="http://www.haorooms.com/"]{點擊這里到 haorooms 的博客}`
這樣就生成了一個到我博客的超鏈接了。在生成內容的時候,特別要注意前后的符號關系,雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的,但是加上其他的內容就不一定了,例如:
~~~
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
~~~
這樣就生成了完全不同的結構,注意這些小細節哦。
**不要有空格**
在寫指令的時候,你可能為了代碼的可讀性,使用一些空格什么的排版一下。這就會導致代碼無法使用。例如下面這句:
`(header > ul.nav > li*5) + footer`
而去掉空格之后,就可以正常執行生成結構了。
文章來源:http://www.haorooms.com/post/emmet_s
- 前端工程師
- HTML
- 使用meta實現頁面的定時刷新或跳轉
- 表單相關
- 表單元素input、按鈕、文字完美垂直居中對齊方法
- CSS
- 相關工具網站
- JS
- jQuery
- 第1章 初始jQuery
- 環境搭建
- jQuery對象與DOM對象
- jQuery對象轉化成DOM對象
- DOM對象轉化成jQuery對象
- 第2章 jQuery選擇器
- id選擇器
- 類選擇器
- 元素選擇器
- 全選擇器(*選擇器)
- 層級選擇器
- 基本篩選選擇器
- 內容篩選選擇器
- 可見性篩選選擇器
- 屬性篩選選擇器
- 子元素篩選選擇器
- 表單元素選擇器
- 表單對象屬性篩選選擇器
- 特殊選擇器this
- 第3章 jQuery的屬性與樣式
- 元素的數據存儲
- 問題解決方案
- 解決innerHTML包含的js代碼不能被執行的問題
- webpackdoc
- 前端開發框架
- Bootstrap 3.3.6
- 起步
- 全局 CSS 樣式
- 概覽
- 柵格系統
- PHP
- PHP入門篇
- 基礎總結
- PHP環境變量$_SERVER和系統常量詳細說明
- PHP進階篇
- 數組
- 函數
- 類
- 字符串操作
- 正則表達式
- 會話控制
- 文件系統
- 日期和時間
- 圖形圖像操作
- PHP異常處理
- 數據庫操作
- WEB在線文件管理器
- PHP文件操作
- 獲取首層目錄信息
- 獲取文件信息
- 列表顯示文件及大小
- PHP與MySQL關系大揭秘
- PHP支持哪些數據庫
- 數據庫擴展
- 連接MySQL數據庫
- 執行MySQL查詢
- 插入新數據到MySQL中
- MVC架構模式分析與設計
- Smarty模版語法
- Smarty的基本語法
- Smarty的條件判斷語句
- Smarty的循環語句
- Smarty的文件引用
- Smarty類和對象賦值與使用
- Smarty函數的使用
- functions函數插件的定義和使用
- modifiers變量調節器插件的定義和使用
- block functions區塊函數插件的定義和使用
- Smarty實例
- MVC微型框架的建立
- 網絡摘抄
- PHPExcel如何讀取超大excel文件
- Composer
- Composer技巧
- PHP 開發者該知道的 5 個 Composer 小技巧
- composer常用命令
- Composer使用方法整理(Cy23)
- 利用Composer一步一步搭建自己的PHP框架
- ThinkPHP
- ThinkPHP中RBAC類詳解(一)
- 附:添加注釋版RBAC類源碼
- 常見問題
- 常見方法
- thinkphp 合并兩個字段組合成一個臨時字段concat函數
- ThinkPHP Where 條件中使用表達式
- 編程相關工具
- Eclipse
- Eclipse或Zendstudio漢化
- Zend studio
- Zendstudio快捷鍵
- Zend Studio實用快捷鍵一覽表
- Sublime text
- Sublime text快捷鍵
- 16 個 Sublime Text 快捷鍵
- Emmet的用法及相關語法
- VS Code
- 數據庫
- MySql
- 問題匯總
- mysql創建存儲過程失敗1307錯誤解決
- Mysql出現Field * doesn't have a default value解決辦法
- mysql:ADO連接mysql數據庫,驅動程序和ODBC數據源問題
- 自己如何正確獲取MYSQL的ADO連接字符串
- 網上摘抄
- mysql 存在更新 不存在插入
- Mysql字符串字段中是否包含某個字符串,用 find_in_set
- mysql字段類型對應的數字編號
- 5.7mysql group分組查詢錯誤問題
- mysql常用操作語句
- SQL2005
- SQL常見錯誤
- 使用 sp_change_users_login 修復產生的孤 立賬戶 & 還原中的孤立用戶
- ASP
- Url編碼解碼函數合集 含utf-8和gb2312
- 其他前端相關技巧
- 聯機查看 Office 文檔
- 服務器配置
- windows
- 服務器安裝
- XAMPP自帶TOMCAT插件可以支持php+java
- IIS
- iis7服務器,客戶端無法下載exe文件的解決之道
- Linux
- ubuntu
- Linux安裝JDK
- 輔助開發工具
- Git