第 30 章 Emmet プラグインの使用_html/css_WEB-ITnose-htmlチュートリアル-php.cn

第 30 章 Emmet プラグインの使用_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:19:11

オリジナル

1139 人が閲覧しました

学習ポイント:

1. インストール方法

2. カスタマイズ!

を生成する

を素早く生成する

講師: Li Yanhui

この章では主に、Sublime Text3 用の HTML5 コードプロンプトプラグインについて説明します: Emmet よりもはるかに強力です。ネイティブのもの。

1 つ。インストール方法

Emmet プラグインのインストールには、通常、1. コマンドによるインストール 2. ダウンロードしてオフラインでインストールする 2 つの方法が採用されます。ここで直接使用するのは、ダウンロードとオフラインインストールの方法です。具体的な手順:

1. ダウンロードした Emmet プラグインパッケージを解凍します

2. Emmet フォルダーと PyV8 フォルダーを左下に表示します。インストール後、Sublime Text3 を再起動します。 4. エディターで英語モードで「!」を入力し、Ctrl+E を押すと、HTML5 コードライブラリが表示され、インストールは成功します。

注: インストールが失敗したり、その他のエラーが発生した場合は、Baidu を使用して他のインストール方法を選択するか、インストールエラーの問題を解決してください。

Ⅱ。カスタマイズ！ Generate

We enter!, then ctrl+e, the 次のコードがデフォルトで表示されます: //Default code

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>    </head>    <body>    </body></html>

ログイン後にコピー

ここには、前に生成したコードと異なる 2 つの場所があります。 : doctype は大文字ではありません。2 番目: lang は en です。実際、この2つが変わらなければあまり関係ありませんが、強迫性障害の人にとっては不快に感じるかもしれません。具体的な変更方法は次のとおりです:

1. まず、プログラムパッケージのパッケージに入ります。

2. 次に、emmet フォルダーに入り、snippets.json ファイルを見つけます。最後に、このファイルを開き、対応する場所を見つけて変更します。

三．高速生成

Emmet は、HTML および CSS コードの非常に豊富な高速生成機能を提供しており、コードの高速生成を使用することで、開発速度が大幅に向上します。ただし、Emmet が提供する生成方法は二次的な学習が必要であり、最初は手入力ほど速くない可能性があります。したがって、学習と調整にはある程度の時間がかかります。

//HTML5 コード構造をすばやく生成します

! + (ctrl + e または tab キー) または html:5 + tab キー

<!DOCTYPE html><html lang="zh-cn">    <head>        <meta charset="UTF-8">        <title>Document</title>    </head>    <body>    </body></html>

ログイン後にコピー

すべてのコード生成ではコードを生成するために Tab キーが必要ですが、これについては後で説明しません。

//タグコードを素早く生成 a

<a href=""></a>

ログイン後にコピー

//対応する属性値を素早く生成 a:link, a:mail

<a href="http://"></a> <br /><a href="mailto:"></a>

ログイン後にコピー

//タグ内に値 a{hyperlink} を生成

<a href="">超链接</a>

ログイン後にコピー

//CSSリンクリンクリンクを生成

<link rel="stylesheet" href="">

ログイン後にコピー

//フォームコントロール入力を生成、input:hidden

<input type="text"><input type="hidden" name="">

ログイン後にコピー

//ラベルのセットを生成、ol+、dl+、table+サブラベル付き

re re // ネイティブラベルを生成します nav & gt; li

// 隣接する兄弟タグ DIV+P+H1

を生成します

<ul>    <li></li></ul><ol>    <li></li></ol><dl>    <dt></dt>    <dd></dd></dl><table>    <tr>        <td></td>    </tr></table>

ログイン後にコピー

//ID div#header でタグを作成する

<nav>    <ul>        <li></li>    </ul></nav>

ログイン後にコピー

//クラス div.head でタグを作成えー、div.header.sidebar

うわー

上記は HTML コード生成機能の一部です。CSS のクイック生成機能を見てみましょう:

//Generateposition:relative pos

pos を入力すると、position:relative CSS スタイルが表示されます。相対値は選択された状態であり、属性値を変更するときに役立ちます。

しかし、Sublime を Emmet プラグインの CSS プロンプトと組み合わせて使用することは非常に柔軟であり、厳密な pos の入力を必要としないことがわかりました。次の入力は、対応する値を取得できます:

po = 位置: 相対

po または po より大きい値を入力する限り、位置: 相対を取得できます。もちろん、単に p と入力した場合、優先順位を考慮して、表示されるのはパディング: | です。

入力を間違えた場合は、次のようにエラーを自動的に修正します:

pod = Position:relative

先頭の絶対属性値を取得したい場合は、直接入力してください:

poa =position:absolute;

もちろん、戸別訪問の標準的な書き方はこうです:

pos:a =position:Absolute;

背景の属性を入力したい場合は、 bg を直接使用してください:

bg = background : |;

bg+ を使用して背景属性の完全な形式を展開します: bg+ = background: #fff url() 0 0 no-repeat;

bg:n を使用して設定します背景属性値を none に設定します: bg:n = background: none;

注: HTML および CSS の他のほとんどのコード生成ソリューションについては、次の URL を参照してください:

http://docs.emmet.io /チートシート/