這篇文章給大家分享的是有關(guān)html中Emmet語法規(guī)則的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
10多年的郊區(qū)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整郊區(qū)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“郊區(qū)網(wǎng)站設(shè)計(jì)”,“郊區(qū)網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
在前端開發(fā)的過程中，最費(fèi)時(shí)間的工作就是寫 HTML、CSS 代碼。一堆的標(biāo)簽、屬性、括號(hào)等，頭疼。這里推薦一個(gè)Emmet語法規(guī)則，讓你寫的時(shí)候爽到飛起，能大大提高代碼書寫，只需要敲一行代碼就能生成你想要的完整HTML結(jié)構(gòu)，下面會(huì)介紹如何使用。
Emmet是一款插件，只要能安裝他的編輯器都能使用，大部分編輯器都可以使用該語法規(guī)則,我們平時(shí)開發(fā)的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等編輯器都可以使用。
安裝方式和平時(shí)安裝插件一樣搜索這個(gè)emmet插件安裝，每個(gè)編輯器安裝方式不同，請各自嘗試
1：html初始結(jié)構(gòu)
下圖中的結(jié)構(gòu)，偷懶的都會(huì)直接一個(gè)！=> Tab 解決，這樣可以快速生成基礎(chǔ)的結(jié)構(gòu)，同時(shí)防止手寫時(shí)忘記某個(gè)代碼塊，輸入錯(cuò)誤的代碼。
2：id（#）,class（.）
id指令:# ; class指令:.
p#test
p.test
3：子節(jié)點(diǎn)（>），兄弟節(jié)點(diǎn)（+），上級(jí)節(jié)點(diǎn)（^）
子節(jié)點(diǎn)指令:> ; 兄弟節(jié)點(diǎn)指令:+ ; 上級(jí)節(jié)點(diǎn):^
p>ul>li>p
p+ul+p
p>ul>li^p (這里的^是接在li后面所以在li的上一級(jí)，與ul成了兄弟關(guān)系,當(dāng)然兩個(gè)^^就是上上級(jí)）
4：重復(fù)（*）
重復(fù)指令：*
p*5（*號(hào)后面添加數(shù)字表示重復(fù)的元素個(gè)數(shù)）
5：分組（()）
分組指令：()
p>(ul>li>a)+p>p
（括號(hào)里面的內(nèi)容為一個(gè)代碼塊，表示與括號(hào)內(nèi)部嵌套和外面的的層級(jí)無關(guān)）
解釋：這里如果不加括號(hào)的話，猜想下，a+p這樣p就是和a是兄弟關(guān)系了，會(huì)包含在li里面。懂了吧哈哈
6：屬性（[attr]）——id，class都有怎么能少了屬性呢
屬性指令：[]
a[href=’###’ name=‘xiaoA’] （中括號(hào)內(nèi)填寫屬性鍵值對(duì)的形式，并且空格隔開）
###6：編號(hào)（$）
編號(hào)指令：$
ul>li.test$*3 （$代表一位數(shù)，后面更上*數(shù)字就代表從1遞增到填寫的數(shù)字）
注意：
一個(gè)$ 代表一位數(shù)，$$就是兩位數(shù)了,以此類推就可以形成$(1),$$(01),$$$(001)
如果想自定義從幾開始遞增的話就利用：$@+數(shù)字*數(shù)字
例如：ul>li*3.test$@3
7：文本（{}）
文本指令：{}
ul>li.test$*3{測試$} （{里面填寫內(nèi)容，可以和$一起組合使用哦}）
8：隱式標(biāo)簽
這個(gè)標(biāo)簽沒有指令，而是部分標(biāo)簽可以不使用輸入標(biāo)簽，直接輸入指令，即可識(shí)別父類標(biāo)簽。
例如：.test
例如：ul>.test$*3
例如：select>.test$*5
重慶分公司
重慶分公司
