ホームページ >ウェブフロントエンド >htmlチュートリアル >第 30 章 Emmet プラグインの使用_html/css_WEB-ITnose
第 30 章 Emmet プラグインの使用_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:19:111119ブラウズ
学習ポイント:
1. インストール方法
2. カスタマイズ!
を生成する3.
を素早く生成する
講師: Li Yanhui
この章では主に、Sublime Text3 用の HTML5 コード プロンプト プラグインについて説明します: Emmet よりもはるかに強力です。ネイティブのもの。
1 つ。インストール方法
Emmet プラグインのインストールには、通常、1. コマンドによるインストール 2. ダウンロードしてオフラインでインストールする 2 つの方法が採用されます。ここで直接使用するのは、ダウンロードとオフライン インストールの方法です。具体的な手順:
1. ダウンロードした Emmet プラグイン パッケージを解凍します
2. Emmet フォルダーと PyV8 フォルダーを左下に表示します。インストール後、Sublime Text3 を再起動します。 4. エディターで英語モードで「!」を入力し、Ctrl+E を押すと、HTML5 コード ライブラリが表示され、インストールは成功します。
注: インストールが失敗したり、その他のエラーが発生した場合は、Baidu を使用して他のインストール方法を選択するか、インストール エラーの問題を解決してください。
Ⅱ。カスタマイズ！ GenerateWe 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>
//タグコードを素早く生成 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
を生成します
*5
<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 /チートシート/