成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

“一鍵”生成HTML——Emmet插件常用語法

wangtdgoodluck / 1627人閱讀

摘要：是一款文本編輯器的插件，用來快速生成復(fù)雜的代碼，只要掌握一些常用的語法類似于選擇器，就可以減少重復(fù)編碼的工作主要是懶。我個(gè)人慣用的是，因此下文介紹的語法僅在測(cè)試通過，不過其它平臺(tái)應(yīng)該也不會(huì)有什么出入?？旖萱I使用和作為自動(dòng)生成代碼的觸發(fā)器。

Emmet是一款文本編輯器/IDE的插件，用來快速生成復(fù)雜的HTML代碼，只要掌握一些常用的語法（類似于CSS選擇器），就可以減少重復(fù)編碼的工作（主要是懶）。
我個(gè)人慣用的是sublime，因此下文介紹的語法僅在sublime測(cè)試通過，不過其它平臺(tái)應(yīng)該也不會(huì)有什么出入。

使用Emmet前提：設(shè)置當(dāng)前為HTML語法模式

在sublime中啟用Emmet，必須把當(dāng)前代碼的語法模式改為HTML，如果本來就是.html文件那就沒問題；如果是新建的文件還沒有保存過的，則需要手動(dòng)先設(shè)置為HTML：

在sublime右下角點(diǎn)擊Plain Text，彈出菜單，選擇HTML。

按下Ctrl + Shift + P，打開命令控制臺(tái)，輸入“HTML”，選擇Set Syntax:HTML即可。

快捷鍵

Emmet使用Tab和Ctrl + e作為自動(dòng)生成HTML代碼的觸發(fā)器。

如上圖所示，輸入完生成HTML的語句后，按下Tab或Ctrl + e，即可生成對(duì)應(yīng)的HTML代碼：

Emmet常用語法

Emmet的語法有很多，還為了進(jìn)一步提高效率而為比較長的標(biāo)簽都設(shè)置了縮寫，我個(gè)人認(rèn)為記住常用的語法即可，縮寫什么的真的是學(xué)習(xí)成本太高了。

生成HTML結(jié)構(gòu)：!

輸入!按下Tab，即可生成標(biāo)準(zhǔn)的HTML5結(jié)構(gòu)：

實(shí)際上也是可以生成HTML4的結(jié)構(gòu)的，但畢竟已經(jīng)過時(shí)了，這里按下不表。

后代：>

div>ul>li


  
    
    
  •
兄弟：+

div>label+input

分組：()

當(dāng)我們需要寫一些比較復(fù)雜的HTML結(jié)構(gòu)時(shí)，有兩種方式能實(shí)現(xiàn)，其一是上級(jí)^，但是我覺得有點(diǎn)逆推的意味，思路上比較繞，不好用；另外一種就是分組()了，這是程序員普遍具有的分治思想的體現(xiàn)。
div>(ul>li)+(ol>li)


  
    
    
  • 
  

  
    
    
  1.
重復(fù)多個(gè)：*

div>ul>li*5


  
    
    
  • 
    
  • 
    
  • 
    
  • 
    
  •
ID：#，類：.

ID和類可以同時(shí)使用也可以分別獨(dú)立使用：

div#article.container

div#article

div.container

屬性：[attr="val"]

label[for="passwd"]

文本內(nèi)容：{}

div>a{點(diǎn)這里跳轉(zhuǎn)}

唯一比較常用的縮寫：input:type

在里，type屬性是必定要填的（你忽略type="text"我就鄙視你），而且各個(gè)type都還滿常用的，因此這個(gè)縮寫可以記一下：input:type等價(jià)于input[type="type"]。
因?yàn)?b>type屬性可以取的值太多了，這里僅列出幾個(gè)常用的作為示例：

input:text

input:radio

input:checkbox

參考資料

Emmet官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/49705.html

相關(guān)文章

  • 插件分享大會(huì)[不定期更新]

    摘要：最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。因?yàn)榛局挥羞@個(gè)插件，才可以設(shè)置一個(gè)文件夾下三個(gè)項(xiàng)目能分別傳到不同的服務(wù)器中。在全球最大的同性交友網(wǎng)站中，只要鼠標(biāo)懸停到一個(gè)項(xiàng)目上時(shí)，就會(huì)在一個(gè)彈窗顯示該項(xiàng)目的信息。 最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。每次重裝的時(shí)候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

    CastlePeaK 評(píng)論0 收藏0

  • 插件分享大會(huì)[不定期更新]

    摘要：最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。因?yàn)榛局挥羞@個(gè)插件，才可以設(shè)置一個(gè)文件夾下三個(gè)項(xiàng)目能分別傳到不同的服務(wù)器中。在全球最大的同性交友網(wǎng)站中，只要鼠標(biāo)懸停到一個(gè)項(xiàng)目上時(shí)，就會(huì)在一個(gè)彈窗顯示該項(xiàng)目的信息。 最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。每次重裝的時(shí)候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

    darkbug 評(píng)論0 收藏0

  • 超好用的谷歌瀏覽器、Sublime Text、Phpstorm、油猴插件合集

    摘要：分享一些超好用插件，打造一個(gè)不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強(qiáng)烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內(nèi)存的，該插件會(huì)自動(dòng)掛起長時(shí)間未使用的網(wǎng)頁，來釋放系統(tǒng)資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個(gè)不一樣的 GitHub、瀏覽器、...

    Rango 評(píng)論0 收藏0

  • sublime Text3 前端常用插件

    摘要：前端常用插件文件切換提供了一個(gè)非?？焖俚姆绞絹泶蜷_新的文件。繼續(xù)，在包控制中安裝插件。使用快捷鍵功能檢測(cè)并一鍵去除代碼中多余的空格使用安裝插件并重啟，即可自動(dòng)提示多余空格。 sublime Text3 前端常用插件 - File Switching （文件切換） --- Sublime Text提供了一個(gè)非常快速的方式來打開新的文件。只要按下Ctrl+ P并開始輸入你想要打開的文件的...

    xcc3641 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<