Zenコーディング 簡単・高速HTML作成_HTML/Xhtml_Webページ制作

Zencoding はテキスト エディターのプラグインです。 Zen コーディングを使用したテキスト エディタでは、ショート コードを使用して通常の HTML コードを記述することができ、HTML の記述が大幅に簡素化されます。

たとえば、次の HTML コード:

コードをコピーします

コードは次のとおりです:

< ;!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">
<タイトル> /title>

🎜>

="item-1">

• ;


li class="item-4 ">

Zencoding では 1 行で十分です:

コードをコピーします

コードは次のとおりです: html:xt> div#header>div#logo ul#nav>li.item-$*5>a

こちらは オンライン デモです (ショートカット キーは機能しません。ショートカット キーの競合の可能性を確認してください。たとえば、次のように入力します) Sogou では法会は "Ctrl" を使用します)

Zencoding の略語ルールは CSS セレクターに似ています。

• id と class: たとえば、div#main.list.item は
を表します。
• 他の属性は次のようになります: div[title]、a[title="Hello world" rel]、td[colspan=2]
• 重複した要素: li*3 は 3
• を出力します
• 重複した要素番号: li.list-$$*2 は
• <に展開されます。 /li> 。複数の $ を組み合わせると、その前の $ が 0 として桁を埋められます。
• 括弧を使用してグループ化できます: div#page>(div#header>ul#nav>li*4>a) (div#page>(h1>span) p*2) div#footer
• フィルター サポート。異なるパラメーターを使用すると、まったく異なる結果が得られます

その他の主な機能

HTML/XML/XSL/CSS/HAML の略語。Zencoding は、コード作成を容易にする他の 関数も提供します。

省略形のラップ(省略形でラップ)。

カーソルの位置またはテキストの選択に従って、コードの略語を入力して、目的の最終コードを取得します。

コードをコピーしますコードは次のとおりです:

部屋に入ります
手に鉛筆を持って
あなたは誰かの裸を見ます
そしてあなたは言います、その男は誰ですか?
あなたはとても一生懸命努力しています
しかしあなたは理解していません
自分が何なのか
家に帰ったら
ここで何かが起こっているから
でも、それが何なのか分からないでしょう
ミスター・ジョーンズは

「ul>」を使いますか? ; li*>span" はラップ後に次のコードを取得します:

コードをコピーしますコードは次のとおりです:

• あなたは部屋に入りました


• 鉛筆を手に持って


• 誰かが裸なのを見ます


• そしてあなたは言います、あの男は誰ですか?


• 頑張ってるね


• でもあなたは理解していません


• あなたの言うことだけ


• 帰宅したら


• ここで何かが起こっているから


• でも、それが何なのかはわかりません


• ジョーンズさん、知っていますか?

标签適合(バランスタグ)

ZC (Zencoding) は、要素内のすべてのコンテンツを高速に選択する方法を提供します

编辑点(編集点)

ZC によって展開されたコードにはコンテンツが含まれていないため、この機能はコンテンツのポイントに迅速に配置されます

最後

Eclipse/Aptana、Notepad、TextMage、Dreamweaver、UltraEdit、Visual Studio などの一般的な IDE は、すべて公式または第三の方法でサポートされています。

対応する JS ファイルを挿入すると、ブラウザーのテキスト フィールドで Zen コーディングを使用できるようになります。