Zen Coding 簡易快速的HTML編寫
來源:易賢網 閱讀:1187 次 日期:2016-06-22 11:25:01
溫馨提示:易賢網小編為您整理了“Zen Coding 簡易快速的HTML編寫”,方便廣大網友查閱!

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

例如以下HTML代碼:

代碼如下:

<!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,一行即可:

代碼如下:

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

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

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

id和class:如 div#main.list.item 表示的是<div id="main" class="list item"></div>

其他屬性可以這樣:div[title], a[title="Hello world" rel], td[colspan=2]

重復元素:li*3將輸出3個<li></li>

重復元素數字序號:li.list-$$*2將被擴展成 <li class="list-01"></li><li class="list-02"></li> 。多個$放在一起的時候,前面的$將作為0來填補位數。

可以用括號來分組:div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

Filters支持,使用不同的參數,將得到完全不同的結果

其他主要功能

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

簡寫包裹(Wrap with Abbreviation)。

根據光標的位置或文本選擇情況,輸入代碼簡寫后得到想要的最終代碼。

代碼如下:

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”包裹后會得到下面的代碼:

代碼如下:

<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>

標簽匹配(Balance Tag)

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

編輯點(Edit Point)

由ZC擴展出來的代碼是沒有內容的,此功能則可以快速的定位到內容編輯點處

名單

最后

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

更多信息請查看網頁制作
易賢網手機網站地址:Zen Coding 簡易快速的HTML編寫
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看