讓ZenCoding提公升編碼速度

2022-01-19 15:50:05 字數 2136 閱讀 3692

日前寫了一篇關於vs神級外掛程式web essentials的系列部落格,其中在html&css操作技巧一節簡單提到了zencoding,今天來詳細說一下這個東西。

摘要

(需要fanqiang)。zen coding是2023年提出來的,已經更新了多次,正在變成更加有效地編寫無聊的html受人歡迎的方式。

下面是一些常用的zen coding功能,目前vs2013的web essentials外掛程式已經支援。

可以做些啥呢?看下面這個複雜的例子:

div#oldiv>ol>li.item*6>span.red

按下tab鍵後,它會生成下面的**:

zencoding01

zencoding02

zencoding03

zencoding04

zencoding05

zencoding06

使用css樣式語法可以建立乙個元素,並給它賦予id或class特性。

div#container.layout會生成下面的**:

可以使用中括號建立任何特性。

div[title]會生成下面的**:

也可以建立多個特性並給特性賦值:

input[placeholder="請輸入姓名" type="text"]會生成下面的**:

先要建立乙個元素,然後才能建立它的子元素。

比如,form#loginform.login>input[type="text"]會生成下面的**:

使用zen coding可以很輕鬆地建立兄弟元素。

footer>div>a+input可以生成下面的**:

>符號會降低元素的層次,然而^符號的作用相反,它是用來提公升元素的層次的,而且還可以提公升多個級別。比如,1可以提公升乙個級別,4可以提公升4個級別。該功能不常用。

footer>div>a+input^^p,p標籤要在input級別的基礎上提公升2個層次,這樣p標籤就和最外層的footer標籤處於同一級別,所以,生成的**如下:

建立n個同樣的元素。

ul>li*6會生成下面的**:

當使用乘積*建立n個同樣的元素時,可以使用$給它們新增乙個自增的數字。注意:使用多個$操作符(如$$)會建立使用多個0填充的數字。

ul>li#id$$$*4會生成下面的**:

要給元素輸入文字時,可以使用{}符號。

ul>li*10>span會生成以下**:

聯合多個功能可以更快地編寫一些相當酷的html,甚至可以為模板建立一些knockout.js的繫結,然後只需要改變屬性名就行了。

例如section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]會生成下面的**:

組合是zen coding中強大的功能,它可以建立複雜的表示式。

例如div>(header>div)+section>(ul>li*2>a)+footer>(div>span)可以生成下面的**:

(需要fanqiang)。

如何提公升編碼速度

2016 07 10 一 為什麼程式設計速度慢 敲 的速度 這個不僅僅侷限於swift語言。個人覺得,導致程式開發者,開發速度慢,主要有三點原因。1 對這門語言不熟悉 語言運用不熟練,主要體現在,對程式語言,沒有乙個大體的結構框架。說白了,就是不知道,這們程式語言都是能幹什麼。也不了解這門開發語言的...

python 多執行緒來提公升scrapy的速度

scrapy在單機跑大量資料的時候,在對settings檔案不進行設定的時候,scrapy的爬取速度很慢,再加上多個頁面層級解析,往往導致上萬的資料可能爬取要半個小時之久,這還不包括插入資料到資料庫的操作。下面是我在實驗中測試並且驗證爬取速度大幅度提公升,不過前提你要注意到你爬取的目標 有沒有反ip...

根據URL生成HTML檔案 提公升首頁訪問速度

一 問題背景 在做 開發的時候,我們經常會遇到這樣的問題。例如 你 的首頁為 而這個 是直接解析到熟悉 開發的朋友都知道這是乙個動態頁面,往往展示了整個 有特色的所有模組,該頁面是有伺服器動態生成的,其中包含 去資料庫提取資料 業務處理邏輯 返回客戶端html檔案 等主要幾個步驟。同時這些是被使用者...