!doctype html  html  head  meta charset= UTF-8  title Document /title  /head  body  /body  /html 

這就是一個 HTML5 的標準結構，也是默認的 HTML 結構。如果你想生成 HTML4 的過渡型結構，那么輸入指令 html:xt 即可生成如下結構：

 !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  li /li  /ul  /div 

生成兄弟：+
上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號。例如下面指令：
div+p+bq
就可以生成如下的 HTML 結構：

 div /div  p /p  blockquote /blockquote 

生成上級元素：^
上級 （Climb-up）元素是什么意思呢？前面咱們說過了生成下級元素的符號“ ”，當使用 div ul li 的指令之后，再繼續(xù)寫下去，那么后續(xù)內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽，那么我需要先用 “^” 提升一下層次。例如：
div ul li^span
就會生成如下結構：

 div  li /li  /ul  span /span 

/div
如果我想相對與 div 生成一個平級元素，那么就再上升一個層次，多用一個“^”符號：
div ul li^^span
重復生成多份：*
特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數(shù)字：
ul li*5
這樣就直接生成五個項目的無序列表了。如果想要生成多份其他結構，方法類似。
生成分組：()
用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系，例如：
div (header ul li*2 a)+footer p
這樣很明顯就可以看出層次關系和并列關系，生成如下結構：

 div  header  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  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.qianxingzhem.com” ，title 為“潛行者m 博客”的 a 標簽，可以這樣寫：
a[href= http://www.qianxingzhem.com title= 潛行者m 博客 ]
其他標簽和屬性都類似。
對生成內容編號：$
例如無序列表，我想為五個個 li 增加一個 class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號：
ul li.item$*5
這樣就生成了如下結構：

 ul  li >
$ 就表示一位數(shù)字，只出現(xiàn)一個的話，就從1開始。如果出現(xiàn)多個，就從0開始。如果我想生成三位數(shù)的序號，那么要寫三個 $：
ul li.item$$$*5
輸出：
 ul  li /li  li /li  li /li  li /li  li /li  /ul 
只能這樣單調的生成序號？對于強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 后面增加 @- 來實現(xiàn)倒序排列：
ul li.item$@-*5
生成如下結構：
 ul  li /li  li /li  li /li  li /li  li /li  /ul 
同樣，我們也可以使用 @N 指定開始的序號：
ul li.item$@3*5
這樣就會從 3 開始排序，生成如下代碼：
 ul  li /li  li /li  li /li  li /li  li /li  /ul 
配合上面倒序輸出，可以這樣寫：
ul li.item$@-3*5
生成的就是以 3 為底倒序：
 ul  li /li  li /li  li /li  li /li  li /li  /ul 
生成文本內容：{}
上面講解了如何生成 HTML 標簽，那里面的內容呢？當然也可以生成了：
a[href= http://www.qianxingzhem.com ]{點擊這里到 潛行者m 的博客}
這樣就生成了一個到我博客的超鏈接了。在生成內容的時候，特別要注意前后的符號關系，雖然 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 
這樣就生成了完全不同的結構，注意這些小細節(jié)哦。
 不要有空格
在寫指令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會導致代碼無法使用。例如下面這句：
(header ul.nav li*5) + footer
而去掉空格之后，就可以正常執(zhí)行生成結構了。HTML 語法部分說完了，相信大家也有很大的收獲，希望這篇文章能夠幫助到大家。
相關推薦：
10款好用的html編輯器
HTML語法大全_html語言語法大全(必看)
HTML語法大全
以上就是 Emmet 的 HTML 語法詳解的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。