Zen Coding css,html縮寫替換大觀 快速寫出html,css_經(jīng)驗(yàn)交流
May 16, 2016 pm 12:04 PM
閱讀本文，先仔細(xì)閱讀網(wǎng)站文章。 Zen Coding 快速編寫HTML/CSS程式碼的實(shí)作
E
元素名稱(div, p);
E#id
使用id的元素(div#content, p #intro, span#error);
E.class
使用類別的元素(div.header, p.error.critial). 你也可以聯(lián)合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E N
兄弟元素(h1 p, div#header div#content div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
條目編號(hào)(ul#nav>li.item-$*5);
zen coding 替換展現(xiàn)'api'.
zen coding 是一個(gè)俄羅斯人寫的編輯器(支援大部分現(xiàn)下流行的編輯器)插件，其安裝也是非常簡(jiǎn)單，只要安裝插件，然後在專案中拷貝js檔案就可以。專案發(fā)佈時(shí)，可刪除js檔案。它主要任務(wù)是把前端工程師從繁瑣的html,css結(jié)構(gòu)代碼中解放出來，但是裡邊需要記憶的替換簡(jiǎn)寫非常多，本著眼觀十遍不如手動(dòng)一遍的原則，只能邊用邊記。
其中的css替換功能也非常的不錯(cuò)。但是裡邊也有很多冗餘無用的替換，本人正在一邊使用一邊修正原來作者定義在實(shí)際生產(chǎn)中不合理的替換。
稍後會(huì)一併把zen_settings檔案發(fā)上來，並對(duì)被替換的程式碼做簡(jiǎn)單的解釋說明。
剛開始一定有點(diǎn)不習(xí)慣，這結(jié)構(gòu)還得一邊寫一邊思考。但是習(xí)慣後，感覺是非常的便利，可以用「神速」兩個(gè)字來概括書寫時(shí)的心情。
至於其它心得體會(huì)，本人在使用後會(huì)慢慢發(fā)出來，以供借鑒。
zen特點(diǎn)是向css選擇器進(jìn)行了深刻的模仿。 jquery選擇器也是跟css選擇符學(xué)習(xí)的，所以熟悉這二者技術(shù)的人會(huì)很快上手。其它詳細(xì)資訊關(guān)注來源網(wǎng)站。
其中html標(biāo)籤替換學(xué)習(xí)--源碼在其包中zen-settings.js，我列出大部分是常用的，還有一些不常用的沒有列出，參考源文件，上一行是手動(dòng)輸入，下一行是按快捷鍵(alt E)後zen輸出，環(huán)境為Aptana 2.0.2：
已經(jīng)不存在了，文件不可下載。
此文件2009年度最後一次更新，這次更新的主要內(nèi)容有：
1. width等值後新增單位。
2. 讓常用的縮寫更人性化。
3. 還有幾個(gè)新縮寫的新增。
這兩天對(duì)css替換功能做了瘋狂的試驗(yàn)及完善，對(duì)其使用頻率過高的替換做了簡(jiǎn)化，對(duì)難易記憶的，用重發(fā)音區(qū)分，這次的變化，也將擴(kuò)充快速鍵改為alt s，因?yàn)楸救似匠Q發(fā)訊息是這兩個(gè)鍵，比較習(xí)慣，ctlr enter，左手ctrl 右手enter結(jié)合太麻煩，右手ctrl enter完成時(shí)間過長(zhǎng)，只好左手完成了。先將經(jīng)驗(yàn)分享如下，單字母開始為原始元素，下一行為zen擴(kuò)展輸出後元素，依次類推：
在原來zen中css屬性與屬性值是取首字母冒號(hào)然後屬性值，我對(duì)其寫法進(jìn)行了簡(jiǎn)化。對(duì)常用的屬性進(jìn)行了縮寫。例如
原來的p是padding，原zen為pos感覺太麻煩，所以縮減為pp，然後是其屬性值。
ppa
position:absolute;
ppr
position:relative;
還有類似的：
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display: inline-block;
oh
overflow:hidden;
其它c(diǎn)ss類別：
m
margin:;
mt
margin-top:;
mr
margin-right:; ml
margin-left:;
mb
margin-bottom:;
padding:;
pt,pr,pb,pl同margin
bg
background:url() 0 0 no-repeat;
bg:n
background:none;
bg:x
background:url() 0 0 repeat-x;
bg: y
background:url() 0 0 repeat-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
borderorder :1px solid #000;
bd:n
border:none;
bdc
border-color:#000;
c
color:#000;
d display:block;
f
font-size:12px;
h:;
height:;
w
width:;
d:i
display:inline;
d:b
display:block;
fl
float:left;
fr
float:right;
cl
clear:both;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
top:; bt
bottom:;
r
right:;
l
left:;
r
right:;
z
z-index: ;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text-outline:none; whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
opacity:;
c:p
cursor:pointer;
html類別：
綜合類別：div#a div#b div.c-$*5 li*10
div#width>p#a>p#a>p*10>p#a
ul#a>li.c-$*5 li.0>a.title
複製程式碼 程式碼如下：
html:xt
aaa
更多的
常用的快速鍵修改為：
Wrap with Abbreviation: alt x
Toggle Comment : alt 1
Match pair:alt D
Go to Matching Pair:alt s
另外是推薦Aptana工具的理由如下：
1.快捷鍵支援非常完善。
例如比較常用的刪除單行： ctrl D;
格式化：ctrl shift F;
複製單行：ctrl alt pageup
移動(dòng)單行： alt pageup
2. js提示是在現(xiàn)下前臺(tái)可以接受的工具裡邊是比較強(qiáng)悍的，還有另外一個(gè)特點(diǎn)，就是與Firefox中的firebug結(jié)合，斷點(diǎn)跟蹤程序執(zhí)行流程，即時(shí)查看變量的值，是非常不錯(cuò)的。
3. 現(xiàn)下的推薦的最強(qiáng)悍的理由就是與zen coding結(jié)合，讓你的工作神速如飛。
它的不好之處：
1. 由於工具比較強(qiáng)悍，需要大量的記憶體消耗，但是以現(xiàn)下的硬體價(jià)格，2G的記憶體基本上可以接受。
2. 雖然現(xiàn)在最新版的2.0.2是純綠色版的，但是安裝之前必須要安裝sun的jdk，這個(gè)東西比較頭痛，配置比較多。純前臺(tái)人員肯定看的雲(yún)裡霧裡的。
3. 內(nèi)建提供的瀏覽方式比較慢，純靜態(tài)頁面，何必那麼複雜，直接本地瀏覽就OK。
重視版權(quán)，轉(zhuǎn)載請(qǐng)?jiān)]明出處http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html。
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
構(gòu)建網(wǎng)頁的HTML元素是什麼？
Jul 03, 2025 am 02:34 AM
網(wǎng)頁結(jié)構(gòu)需核心HTML元素支撐，1.頁面整體結(jié)構(gòu)由、、構(gòu)成，其中為根元素，存放元信息，展示內(nèi)容；2.內(nèi)容組織依賴標(biāo)題（-）、段落（）及區(qū)塊標(biāo)籤（如、）以提升條理與SEO；3.導(dǎo)航通過與實(shí)現(xiàn)，常用組織鏈接並輔以aria-current屬性增強(qiáng)可訪問性；4.表單交互涉及、、與，確保用戶輸入與提交功能完整。正確使用這些元素能提升頁面清晰度、維護(hù)性及搜索引擎優(yōu)化。
CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫
Jul 07, 2025 am 12:07 AM
創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。
使用HTML屬性實(shí)現(xiàn)客戶端表單驗(yàn)證。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationCanbedOnewithOutJavaScriptbyusinghtmlattributes.1）useRequiredToEnforCemandatoryField.2）validateMailsAndUrllSwithTyPeatTributesLikeEmailOrurl，orusepatternwithRegegexforCustomAlorurl
如何使用HTML將選項(xiàng)分組？
Jul 04, 2025 am 03:16 AM
在HTML中使用標(biāo)籤可以對(duì)下拉菜單中的選項(xiàng)進(jìn)行分組。具體方法是用包裹一組元素，並通過label屬性定義組名，如：1.包含蘋果、香蕉、橙子等選項(xiàng)；2.包含胡蘿蔔、西蘭花等選項(xiàng)；3.每個(gè)為一個(gè)獨(dú)立分組，組內(nèi)選項(xiàng)自動(dòng)縮進(jìn)。注意事項(xiàng)包括：①不支持嵌套；②可通過disabled屬性禁用整個(gè)組；③樣式受限需結(jié)合CSS或第三方庫美化；可使用Select2等插件增強(qiáng)功能。
將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript應(yīng)通過語義化標(biāo)籤、合理加載順序與解耦設(shè)計(jì)高效結(jié)合。 1.使用HTML5語義化標(biāo)籤如、提升結(jié)構(gòu)清晰度與可維護(hù)性，利於SEO和無障礙訪問；2.CSS應(yīng)置於中，使用外部文件並按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強(qiáng)依賴，通過data-*屬性驅(qū)動(dòng)行為、類名控制狀態(tài)，統(tǒng)一命名規(guī)範(fàn)提升協(xié)作效率。這些方法能有效優(yōu)化頁面性能與團(tuán)隊(duì)協(xié)作。
使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕
Jul 07, 2025 am 02:31 AM
要使用HTML的button元素實(shí)現(xiàn)可點(diǎn)擊按鈕，首先需掌握其基本用法與常見註意事項(xiàng)。 1.使用標(biāo)籤創(chuàng)建按鈕，並通過type屬性定義行為（如button、submit、reset），默認(rèn)為submit；2.通過JavaScript添加交互功能，可內(nèi)聯(lián)寫法或通過ID綁定事件監(jiān)聽器以提升維護(hù)性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強(qiáng)用戶體驗(yàn)；4.注意常見問題：確保未啟用disabled屬性、正確綁定JS事件、避免佈局遮擋，並藉助開發(fā)者工具排查異常。掌握這
JavaScript時(shí)間對(duì)象，某人構(gòu)建了一個(gè)eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開發(fā)者們，大家好！歡迎閱讀本週的JavaScript新聞！本週我們將重點(diǎn)關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時(shí)間對(duì)象獲得瀏覽器支持、GoogleChrome的更新以及一些強(qiáng)大的開發(fā)者工具。讓我們開始吧！ Oracle與Deno的商標(biāo)之爭(zhēng)Oracle試圖註冊(cè)“JavaScript”商標(biāo)的舉動(dòng)引發(fā)爭(zhēng)議。 Node.js和Deno的創(chuàng)建者RyanDahl已提交請(qǐng)願(yuàn)書，要求取消該商標(biāo)，他認(rèn)為JavaScript是一個(gè)開放標(biāo)準(zhǔn)，不應(yīng)由Oracle
在HTML頭部元素中配置文檔元數(shù)據(jù)
Jul 09, 2025 am 02:30 AM
HTMLhead中的元數(shù)據(jù)對(duì)SEO、社交分享和瀏覽器行為至關(guān)重要。 1.設(shè)置頁面標(biāo)題與描述，使用和並保持簡(jiǎn)潔唯一；2.添加OpenGraph與Twitter卡片信息以優(yōu)化社交分享效果，注意圖片尺寸並使用調(diào)試工具測(cè)試；3.定義字符集與視口設(shè)置確保多語言支持與移動(dòng)端適配；4.可選標(biāo)籤如作者版權(quán)、robots控制及canonical防止重複內(nèi)容也應(yīng)合理配置。
