• Hãy ủng hộ PhienBanMoi.Com bằng cách LIKE trang FANPAGE , GOOGLE+ dưới mỗi bài viết hoặc chia sẻ website nếu thấy hữu ích. Trân trọng cảm ơn!
  • [Thông Báo] Tuyển thành viên viết bài KIẾM TIỀN trên PhienBanMoi.Com


    Nhằm mục đích phát triển Phienbanmoi.com hơn nữa, có thêm các bài viết thông tin thực sự hữu ích từ những thành viên tích cực. BQT đã quyến định tạo ra cơ hội kiếm tiền từ các bài viết được đăng tải và chia sẻ trên diễn đàn

Kỹ thuật Zen Coding

Alfred Seattle

Member Chính Thức
Tham gia
26/2/12
Bài viết
27
Thích
17
Nơi ở
Hà Nội
#1
Nhân dịp mới tham gia diễn đàn, hôm này mình sẽ hướng dẫn các bạn sử dụng Zen Coding để tăng tốc tốc độ code HTML, XML, XSL và các ngôn ngữ khác có cùng cấu trúc dựa trên CSS selector.
  1. Introduction
    Zen Coding là một kỹ thuật vô cùng đơn giản nhưng lại vô cùng mạnh mẽ, giúp bạn tiết kiệm được vô số thời gian code HTML.
    Kỹ thuật này được ra đời bởi Sergey Chikuyonok vào năm 2009 và tiếp tục được phát triển bởi Chikuyonok là người dùng.
    Zen Coding được phân phối dưới MIT License.
    Zen Coding thực chất chính là một plugin cho text editor bạn đang sử dụng.
    Hiện nay Zen Coding đang hỗ trợ 19 text editor.
  2. Download plugin Zen Coding
    Để download plugin Zen Coding các bạn tiến hành vào trang http://code.google.com/p/zen-coding/downloads/list.
    Chọn plugin cho text editor bạn đang sử dụng và tiến hành download.
    Ở đây mình sử dụng Notepad++.
    Sau khi download, các bạn tiến hành giải nén và làm theo hướng dẫn của file readme.txt.
    Nếu sử dụng Notepad++ thì bạn copy thư mục NppScripting cùng file NppScripting.dll vào thư mục plugins ở nơi bạn cài Notepad++.
  3. Hướng dẫn sử dụng Zen Coding
    Mở Notepad++.
    Nếu thấy xuất hiện phần Zen Coding trên thanh Menu nghĩa là cài đặt đã thành công.
    Đây là các cấu trúc Zen Coding cơ bản
    [table="width: 600, class: grid"]
    [tr]
    [td]Zen Coding[/td]
    [td]HTML[/td]
    [/tr]
    [tr]
    [td]tag#name[/td]
    [td]<tag id="name"></tag>[/td]
    [/tr]
    [tr]
    [td]tag.name[/td]
    [td]<tag class="name"></tag>[/td]
    [/tr]
    [tr]
    [td]tag.one.two[/td]
    [td]<tag class="one two"></tag>[/td]
    [/tr]
    [tr]
    [td]tag#name.one.two[/td]
    [td]<tag id="name" class="one two"></tag>[/td]
    [/tr]
    [tr]
    [td]tag>tag[/td]
    [td]<tag>
    <tag></tag>​
    </tag>
    [/td]
    [/tr]
    [tr]
    [td]tag+tag[/td]
    [td]<tag></tag>
    <tag></tag>
    [/td]
    [/tr]
    [tr]
    [td]tag[thành phần][/td]
    [td]VD: tag[title=abc] = <tag title="abc"></tag>[/td]
    [/tr]
    [tr]
    [td]tag|filter[/td]
    [td]VD: tag.title|e = &lt;tag class="title"&gt;&lt;/tag&gt;[/td]
    [/tr]
    [tr]
    [td]tag*N (trong đó N là số lần cần lặp lại tag). Giả sử có N=3[/td]
    [td]
    <tag></tag>
    <tag></tag>
    <tag></tag>
    [/td]
    [/tr]
    [tr]
    [td]tag#name-$*3(trong đó $ được thêm vào để đếm)[/td]
    [td]<tag id="name-1"></tag>
    <tag id="name-2"></tag>
    <tag id="name-3"></tag>[/td]
    [/tr]

    [/table]

    Đây là một số ví dụ:

    [table="width: 600, class: grid"]
    [tr]
    [td]Zen Coding[/td]
    [td]HTML[/td]
    [/tr]
    [tr]
    [td]div#name[/td]
    [td]<div id="name"></div>[/td]
    [/tr]
    [tr]
    [td]div.name[/td]
    [td]<div class="name"></div>[/td]
    [/tr]
    [tr]
    [td]div.one.two[/td]
    [td]<div class="one two"></div>[/td]
    [/tr]
    [tr]
    [td]div#name.one.two[/td]
    [td]<div id="name" class="one two"></div>[/td]
    [/tr]
    [tr]
    [td]head>link[/td]
    [td]<head>
    <link/>​
    </head>[/td]
    [/tr]
    [tr]
    [td]table>tr>td[/td]
    [td]<table>
    <tr>
    <td></td>​
    </tr>
    </table>[/td]
    [/tr]
    [tr]
    [td]ul#name>li.item[/td]
    [td]<ul id="name">
    <li class="item"></li>​
    </ul>[/td]
    [/tr]
    [tr]
    [td]p+p[/td]
    [td]<p></p>
    <p></p>[/td]
    [/tr]
    [tr]
    [td]div#name>p.one+p.two[/td]
    [td]<div id="name">
    <p class="one"></p>
    <p class="two"></p>​
    </div>[/td]
    [/tr]
    [tr]
    [td]p[title][/td]
    [td]<p title=""></p>[/td]
    [/tr]
    [tr]
    [td]td[colspan=2][/td]
    [td]<td colspan="2"></td>[/td]
    [/tr]
    [tr]
    [td]span[title="Hello" rel][/td]
    [td]<span title="Hello" rel=""></span>[/td]
    [/tr]
    [tr]
    [td]p.title|e[/td]
    [td]&lt;p class="title"&gt;&lt;/p&gt;[/td]
    [/tr]
    [tr]
    [td]p*N[/td]
    [td] Giả sử có p*3:
    <p></p>
    <p></p>
    <p></p>[/td]
    [/tr]
    [tr]
    [td]ul#name>li.item*3[/td]
    [td]<ul id="name">
    [INDENT]<li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>[/INDENT]
    </ul>[/td]
    [/tr]
    [tr]
    [td]p.name-$*3[/td]
    [td]<p class="name-1"></p>
    <p class="name-2"></p>
    <p class="name-3"></p>[/td]
    [/tr]
    [tr]
    [td]select>option#item-$*3[/td]
    [td]<select>
    [INDENT]<option id="item-1"></option>
    <option id="item-2"></option>
    <option id="item-3"></option>[/INDENT]
    </select>[/td]
    [/tr]
    [tr]
    [td]ul+[/td]
    [td]<ul>
    [INDENT]<li></li>[/INDENT]
    </ul>[/td]
    [/tr]
    [tr]
    [td]table+[/td]
    [td]<table>
    <tr>
    [INDENT]<td></td>[/INDENT]
    </tr>
    </table>[/td]
    [/tr]
    [tr]
    [td]dl+[/td]
    [td]<dl>
    [INDENT] <dt></dt>
    <dd></dd>[/INDENT]
    </dl>[/td]
    [/tr][/COLOR]
    [/table]

    Để biến [URL="http://code.google.com/p/zen-coding/"]Zen Coding[/URL] thành HTML, sau khi gõ xong Zen Coding, các bạn nhấn Ctrl+E trong Notepad++ và Tab trong PhpStorm, WebStorm (mình sẽ có bài giới thiệu về PhpStorm và Webstorm sau).

    ********** THE END **********
 

vandieutot

Rom & Ghost
Tham gia
16/3/12
Bài viết
4,501
Thích
2,137
Nơi ở
Sân Chơi Công Nghệ
#4
Bạn có thể sửa cho mình được không? Mình hơi gà về vấn đề này.
mình không trực thuộc box này,bắt đầu từ ngày mai mình mới có quyền sử lý box này của bạn,bạn có thể nhờ smod khatmau nhé
 

Bài xem nhiều

Chia sẻ kiến thức - Download phần mềm