Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Zen Coding.
Search
cssrain
September 02, 2014
Technology
0
82
Zen Coding.
一种快速编写代码的方法
cssrain
September 02, 2014
Tweet
Share
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
280
解读HTML
cssrain
0
94
解读HTML5
cssrain
2
130
基础CSS(1)
cssrain
0
100
基础CSS(2)
cssrain
0
84
高效的CSS
cssrain
0
120
高级CSS—继承
cssrain
0
85
PhoneGap分享和交流
cssrain
0
72
PhoneGap实践
cssrain
0
50
Other Decks in Technology
See All in Technology
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
160
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
220
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
770
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
DevRelによる信頼構築とデータ駆動で変わるエンジニア採用 / DevRel Trust Building to Data Driven Engineering Hiring
bobtani
1
130
The depthes of profiling Ruby - RubyKaigi 2024
osyoyu
0
150
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
yanaemon
6
1.3k
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
390
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
5k
Real World Type Puzzle and Code Generation
yukukotani
4
640
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
yoshikiiida
2
660
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Statistics for Hackers
jakevdp
790
220k
The Language of Interfaces
destraynor
151
23k
How to Ace a Technical Interview
jacobian
273
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Six Lessons from altMBA
skipperchong
22
3k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Navigating Team Friction
lara
179
13k
Producing Creativity
orderedlist
PRO
338
39k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Transcript
Zen Coding 一种快速编写HTML/CSS代码的方法 UED分享 · 交流 http://cssrain.github.io
哪些原因导致你写HTML变慢? • 很长,难记标签代码 (doctype) • 丌常写,丌熟悉的标签代码 (link) • 语义化的代码 (img的alt和title)
• Html的所有属性,括号,引用都要写完整 (dl+) • ……
记得它吗,能写出来吗? <!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> <meta http-equiv="Content-Type" content="text/html;charset=UTF- 8" /> <title></title> </head> <body> </body> </html>
html:xt 演示
有什么方式快速写出? <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div
class="column"></div> <div class="column"></div> </div>
div#content>(div.page_top>p.hdwrap+h1)+div.column *2 演示
太复杂?拆开来 <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div
class="column"></div> <div class="column"></div> </div> div#content > ( div.page_top > p.hdwrap+h1 ) + div.column*2
丌就是CSS嘛 E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(div.header,
p.error.critial). 你也可以联合使用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 条目编号 (ul#nav>li.item-$*5);
这就是Zen Coding 由两个核心组件组成: • 一个缩写扩展器(缩写为像CSS一样的选择器) • 上下文无关的HTML标签对匹配器
支持大多数开发工具 • Visual Studio • TopStyle • Vim • IntelliJ
IDEA/WebStorm/PHPStorm • Aptana • Dreamweaver , Sublime Text,Editplus……
Zen Coding 资料 http://code.google.com/p/zen-coding/ https://github.com/sergeche/zen-coding/
Q&A 谢谢聆听