主頁 > 知識(shí)庫 > Zen Coding 簡(jiǎn)易快速的HTML編寫

Zen Coding 簡(jiǎn)易快速的HTML編寫

熱門標(biāo)簽:電銷機(jī)器人外呼失敗怎么回事 縣域地圖標(biāo)注點(diǎn) 400電話申請(qǐng)好不好 南寧銷售外呼系統(tǒng)線路商 天津銷售電銷機(jī)器人公司 吃雞地圖標(biāo)注設(shè)置 400電話座機(jī)怎么辦理 齊齊哈爾地圖標(biāo)注地點(diǎn) 邵陽市地圖標(biāo)注app

Zen Coding 是個(gè)文本編輯器的插件。在使用Zen Coding的文本編輯器中,可以用簡(jiǎn)短的代碼來書寫常規(guī)的HTML代碼,這個(gè)工具極大的簡(jiǎn)化了HTML編寫。

例如以下HTML代碼:

復(fù)制代碼
代碼如下:

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
<div id="logo"></div>
<ul id="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
</body>
</html>

通過Zen Coding,一行即可:

復(fù)制代碼
代碼如下:

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

這里是在線DEMO(快捷鍵不起作用的,請(qǐng)檢查可能的快捷鍵沖突。如搜狗輸入法會(huì)占用“Ctrl+,”)

Zen Coding的縮寫規(guī)則有些類似CSS選擇器:

  • id和class:如 div#main.list.item 表示的是<div id="main" class="list item"></div>
  • 其他屬性可以這樣:div[title], a[title="Hello world" rel], td[colspan=2]
  • 重復(fù)元素:li*3將輸出3個(gè)<li></li>
  • 重復(fù)元素?cái)?shù)字序號(hào):li.list-$$*2將被擴(kuò)展成 <li class="list-01"></li><li class="list-02"></li> 。多個(gè)$放在一起的時(shí)候,前面的$將作為0來填補(bǔ)位數(shù)。
  • 可以用括號(hào)來分組:div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
  • Filters支持,使用不同的參數(shù),將得到完全不同的結(jié)果

其他主要功能

默認(rèn)的除了HTML/XML/XSL/CSS/HAML縮寫外,Zen Coding 還提供了其他一些方便代碼編寫的功能。

簡(jiǎn)寫包裹(Wrap with Abbreviation)。

根據(jù)光標(biāo)的位置或文本選擇情況,輸入代碼簡(jiǎn)寫后得到想要的最終代碼。

復(fù)制代碼
代碼如下:

You walk into the room
With your pencil in your hand
You see somebody naked
And you say, Who is that man?
You try so hard
But you don't understand
Just what you'll say
When you get home
Because something is happening here
But you don't know what it is
Do you, Mister Jones?

以上文字用“ul>li*>span”包裹后會(huì)得到下面的代碼:

復(fù)制代碼
代碼如下:

<ul>
<li><span>You walk into the room</span></li>
<li><span>With your pencil in your hand</span></li>
<li><span>You see somebody naked</span></li>
<li><span>And you say, Who is that man?</span></li>
<li><span>You try so hard</span></li>
<li><span>But you don't understand</span></li>
<li><span>Just what you'll say</span></li>
<li><span>When you get home</span></li>
<li><span>Because something is happening here</span></li>
<li><span>But you don't know what it is</span></li>
<li><span>Do you, Mister Jones?</span></li>
</ul>

標(biāo)簽匹配(Balance Tag)

ZC(Zen Coding)提供了一個(gè)快速選擇元素內(nèi)所有內(nèi)容的方法

編輯點(diǎn)(Edit Point)

由ZC擴(kuò)展出來的代碼是沒有內(nèi)容的,此功能則可以快速的定位到內(nèi)容編輯點(diǎn)處

最后

常見的IDE如Ecliplse/Aptana,Notepad++,TextMage,Dreamweaver,UltraEdit,Visual Studio等,都已經(jīng)有官方或者第三方的插件支持。實(shí)際上由于Zen Coding的核心代碼有Javascript和Python兩種語言版本,在引入了相應(yīng)的JS文件后,瀏覽器中的文本編輯區(qū)域都可以使用Zen Coding了。

標(biāo)簽:贛州 ???/a> 寧夏 日照 寧波 衡水 延安 濟(jì)寧

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Zen Coding 簡(jiǎn)易快速的HTML編寫》,本文關(guān)鍵詞  Zen,Coding,簡(jiǎn)易,快速,的,HTML,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Zen Coding 簡(jiǎn)易快速的HTML編寫》相關(guān)的同類信息!
  • 本頁收集關(guān)于Zen Coding 簡(jiǎn)易快速的HTML編寫的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章