1. 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!
  2. [Thông Báo] Thông Báo Tuyển mod cho toàn diễn đàn


    Forum mới lập rất cần sự giúp đỡ của các bạn vậy nên bạn nào có khả năng thì đăng kí tham gia làm mod để quản lí, phát triển diễn đàn nhé!

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 Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết để 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]
      Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết 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.
      Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết được phân phối dưới Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết.
      Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết thực chất chính là một plugin cho text editor bạn đang sử dụng.
      Hiện nay Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết đang hỗ trợ 19 text editor.
    2. Download plugin Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết
      Để download plugin Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết các bạn tiến hành vào trang Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết.
      [​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 Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết.
      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 Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết 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 Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết.
    3. Hướng dẫn sử dụng Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết
      Mở Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết.
      [​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 Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết 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|Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết[/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 Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết thành HTML, sau khi gõ xong Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết, các bạn nhấn Ctrl+E trong Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết và Tab trong Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết, Xin vui lòng đăng nhập hoặc đăng ký để xem liên kết (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,552
    2,300
    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,552
    2,300
    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