1. Kết quả Event Ghost 2016


    Dưới đây là danh sách những thành viên đoạt giải thưởng trong Event Ghost 2016

Kỹ thuật Zen Coding

Thảo luận trong 'HTMl , CSS , Javascript' bắt đầu bởi Alfred Seattle, 18 Tháng năm 2012.


  1. Alfred Seattle

    Alfred Seattle Member Chính Thức

    27
    21
    3
    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
      [​IMG]
      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.
      [​IMG]
      Chọn plugin cho text editor bạn đang sử dụng và tiến hành download.
      [​IMG]
      Ở đâ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++.
      [​IMG]
      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">
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>​
      </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>
      <option id="item-1"></option>
      <option id="item-2"></option>
      <option id="item-3"></option>​
      </select>[/td]
      [/tr]
      [tr]
      [td]ul+[/td]
      [td]<ul>
      <li></li>​
      </ul>[/td]
      [/tr]
      [tr]
      [td]table+[/td]
      [td]<table>
      <tr>
      <td></td>​
      </tr>
      </table>[/td]
      [/tr]
      [tr]
      [td]dl+[/td]
      [td]<dl>
      <dt></dt>
      <dd></dd>​
      </dl>[/td]
      [/tr]

      [/table]

      Để biến Zen Coding 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 **********
     
    root and vandieutot like this.
  2. vandieutot

    vandieutot Rom & Ghost

    4,548
    2,292
    113
    Tên thật:
    Lê Đức Tuấn
    màu chữ và cách bố cục hơi khó nhìn lần sau nên chú ý bạn nhé
     
  3. Alfred Seattle

    Alfred Seattle Member Chính Thức

    27
    21
    3
    Bạn có thể sửa cho mình được không? Mình hơi gà về vấn đề này.
     
  4. vandieutot

    vandieutot Rom & Ghost

    4,548
    2,292
    113
    Tên thật:
    Lê Đức Tuấn
    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é
     

Chia sẻ trang này