Emmet 語法探析

時間 2019-11-24

標籤 emmet 語法简体版

原文原文鏈接

Emmet 語法探析html

Emmet(Zen Coding)是一個能大幅度提升前端開發效率的一個工具。前端

大多數編輯器都支持Snippet,即存儲和重用一些代碼塊。可是前提是：你必須先定義
這些代碼塊。git

Emmet的特色在於你能夠設置CSS形式的可以動態解析的表達式，而後根據所輸入
的表達式來生成相應的內容。Emmet還有一些經常使用的高級功能，如生成Lorem Ipsum,更新CSS的屬性值，
將圖片資源轉換成data url形式等。經過對Emmet的熟練使用，能夠極大地推進你的生產力。github

使用Emmet生產HTMl語法解析

生成HTML文檔初始結構
首先使用Ctrl+N新建一個頁面，而後使用Ctrl+Shift+PSet Syntax:HTML.在獲得的支持HTML語法
文檔中輸入一個"!",而後摁下TAB鍵，就能夠生成一個HTML5的標準文檔結構：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title>Document</title>
</head>
<body>

</body>
</html>

其餘經常使用的 HTML 結構指令：編輯器

html:5 或者!生成HTML5結果
html:xt 生成HTML4過渡型
html:4s 生成HTML4嚴格型

生成帶有id、class的HTML標籤

Emment 默認的標籤爲div
生成id爲main的div標籤,指令爲#main
編寫一個clas爲aaa的span標籤,指令爲span
編寫一個id爲list的class爲fruit的ul標籤,指令爲ul#list.fruit工具

生成後代:>

大於號表示後面要生成的內容爲當前標籤的後代。例如要生成一個無序列表，
並且被class爲list的div包裹，則指令爲:div.list>ul>liui

生成兄弟:+

若是要生成平級元素，就須要+號,ex: div+p+dqgoogle

生成上級元素: ^

根據ul與li的關係不難理解上級元素(Climb-up)的意思。
嘗試以下指令: div>ul>li^span,生成結構以下：url

<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

重複生成多份:
對於一個無序列表,若是要生成多個li標籤，能夠直接在li後面
上附加所需個數 : `ul>li*5`

生成分組:()

用括號進行分組，能夠生成層析關係明確的結構，如:div>(header>ul>li*2>a)+footer>pspa

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

生成自定義屬性: [attr]

a標籤中每每須要附帶href屬性和title屬性，若是想要生成一個href爲"http://google.com",
title爲"google"的a標籤，指令爲: a[href="http://google.com" title="google"]

對生成內容編號: $

ex: 爲五個li增長一個class屬性值爲itme1,而後依次遞增從1-5，則使用$符號：ul>li.item$*5,

若是要生成三位數的序號,ul>li.item$$$*5;
同時也能夠在$後面增長@-來實現倒序排列,ul>li.item$@-*5;
使用@N指定開始的序號: ul>li.item$@3*5，生成以下代碼；

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

生成文本內容：{}

ex: 生成a標籤裏面的內容：a[href="http://github.com"]{點擊連接GITHUB}
這樣就生成一個github的超連接.生成內容的時候特別要注意先後的符號關係，
雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，可是加上其餘的內容就不必定了.
ex:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

切忌指令中，不要有空格，一面致使代碼沒法使用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。