ページ制作用の開発・デバッグツール (1)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

出典: jingwhale Bole Toutiao でオリジナルの作品を共有することを歓迎します

開発ツールの紹介

開発ツールは一般に、テキストエディターと統合開発環境 (IDE) の 2 種類に分けられます

一般的に使用されるテキストエディター: Sublime Text、Notepad++、EditPlus など

よく使われる IDE: WebStorm、Intellij IDEA、Eclipce など

ここでは、基本的にフロントエンドのニーズを満たす Sublime Text エディターの使用方法を主に紹介します開発ツール。

1. Sublime Text の特徴:

クロスプラットフォーム、高速起動

複数行選択

様々な実用的なプラグイン

スニペット

VIM互換モードをサポート

Sublime Text 取得アドレス: http://www.sublimetext.com/

2. よく使用されるプラグイン

Package Control: 他のプラグインをインストールする前に、まず Package Control をインストールします

Emmet: Web開発者ツールキット、HTML と CSS のワークフローを大幅に改善できます

SublimeCodeIntel: コードのヒント

DocBlocker: コメント js コード

JSFormat: js コードのフォーマット

ターミナル: m コマンド

2.1 パッケージ制御

他のプラグインをインストールする前に、まず Package Control をインストールします。具体的な手順は次のとおりです:

Ctrl+` ショートカットキーを使用するか、[表示] -> [コンソールの表示] メニューからコマンドラインを開き、

Sublime text3 貼り付けます。次のコード:

import urllib.request,os; pf = 'PackageControl.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener(urllib .request.ProxyHandler( )) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf. replace('', '%20'). ()) を読みます。

r os; Sublime-Package'; IPP = sublime .installed_packages_path(); not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf) , 'wb' ).write( urllib2. urlopen( 'http://sublime.wbond.net/' +pf.replace( '','%20' )).read()); print( 'インストールを完了するには Sublime Text を再起動してください')

すべてがうまくいけば、「環境設定」メニューの下に「パッケージ設定」メニューと「パッケージ制御」メニューが表示されます。

さまざまな理由により、コードを使用してインストールできない場合があります。その場合は、次の手順でパッケージコントロールを手動でインストールできます:

パッケージコントロールのダウンロードアドレス: b.
[設定] >[パッケージの参照] メニューをクリックします c.
に入るディレクトリの上位ディレクトリを開き、Installed Packages/ ディレクトリに入りますd.

Package Control.sublime-package をダウンロードし、Installed Packages/ ディレクトリにコピーします

SublimeText を再起動します。

2.2 Emmet

Emmet は、HTML と CSS のワークフローを大幅に改善できる Web 開発者用のツールキットです。基本的に、ほとんどのテキストエディタでは、「スニペット」と呼ばれるコードのチャンクを保存して再利用できます。スニペットは生産性を向上させるのに最適ですが、ほとんどの実装には、最初にコードスニペットを定義する必要があり、実行時にコードスニペットを拡張できないという欠点があります。 Emmet はフラグメントの概念を新しいレベルに引き上げます。CSS で動的に解析できる式を設定し、入力した略語に基づいて対応するコンテンツを取得できます。 Emmet は成熟しており、HTML/XML および CSS コードを作成するフロントエンド開発者に適していますが、プログラミング言語にも使用できます。
2.2.1 Emmet をインストールする
a、ショートカットキーの組み合わせ ctrl+shift+P を使用してコマンドパネルを呼び出します

b、 パネルに「install package」と入力して Enter キーを押します

c、

次に、「 Emmet 」と入力し、インストールが完了するまで待ちます。

2.2.2 Emmet の使用 1) HTML の初期化

「!」または「html:5」を入力して Tab キーを押します:

html:5 または !: HTML5 ドキュメントタイプ 🎜html:xt🎜 : XHTML の移行ドキュメントタイプに使用されます 🎜🎜html:4s: 🎜 HTML4 厳密なドキュメントタイプに使用されます 🎜 2) head タグ内の操作 🎜🎜 外部スタイルシートの導入: link:css+tab 🎜🎜 🎜 🎜 🎜 1 🎜 🎜 🎜 <リンク rel= "スタイルシート" href= "style.css" >

内部スタイルシートの導入: style+tab

外部 js ファイルの導入: script:src+tab

内部 js ファイルを導入します: script+tab

ファビコンを追加: link:favicon+tab

文字エンコーディングを設定します: meta:utf+tab

< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" > ;

互換モードを設定する meta:compat+tab

デモは以下の通りです:

3)本文編集

●タグ: タグ名(+tab)

●id:

タグ名#+クラス名(+tab)、複数のクラス

クラス: タグ名 . + ID 名 (+tab)、これには 1 つの ID のみが続きます

.item を入力するだけで、Emmet は親に基づいて判断しますタグ、通常は div です。たとえば、

ul と ol で使用されます tr:

td: tr Medium で使用されます
オプション: select と optgroup で使用されます
●ラベルの内容
: ラベル名 { 内容

ラベル内の属性 : ラベル名 [属性名 = 属性値] など: A [href = www.baidu.com]

フォーム METHOD プロパティ

->inp
input:hidden->input:h
input:text->input:t

入力:pinput:checkbox->

input:radio->input:r
input:submit->input:s
input:button->input:b

●ネスト
>: ネストされた要素を表すサブ要素シンボル

^: シンボルの前にラベルを 1 行進めることができます
●Group()

を Set と

でネストして、(.foo>h1)+(.bar>h2) と入力するなど、いくつかのコードブロックをすばやく生成できます。次のコードが自動的に生成されます。

●複数の要素を定義する

複数の要素を定義するには、* シンボルを使用できます。たとえば、ul>li*3 は次のコードを生成できます

"carousel" を実行すると、要素 (ID またはクラス) の名前のカウントビットが存在します。次のように $ を使用してこれを実現できます:

2.2.3 CSS の略語 1) 値
たとえば、要素の幅を定義するには、

高さ : 10% ;

マージン : 5em ;

は %、e は em、x は ex を意味します2) @f+

3). あいまい一致 一部の略語がわからない場合、Emmet は入力 ov:h、ov-h、ovh などの入力内容に基づいて最も近い構文を照合します。生成されたコードは同じです。 :

オーバーフロー : hidden ;

-webkit-transform:

-moz-transform: ;

-ms-transform: ;

接頭辞の省略形は次のとおりです:

m は -moz-、s は -ms-、o は -o- を意味します 5)。 lg(left, # fff 50%, #000) と入力すると、 は次のコードを生成します:

1 2

2.3. よく使用されるショートカットキー 1)、コマンドパッド (Ctrl+Shift+p)

2)、検索 (Ctrl+p)

、例: :300、300 行を検索します

@ js で関数を検索、CSS でセレクターを検索します。 @show、js ファイルで show メソッドを見つけます

次のようなキーワードを検索します: #this、これを検索します

キーワードを選択し、Ctrl+dを押すと、同じキーワードを複数選択できます(押すたびに1つ追加されます)。 5) ポイントを編集するためのショートカットキーは、ctrl+alt+左と ctrl+alt+右です。 6) 重複する一致する開始タグと終了タグをすばやく削除します (ショートカットキー: Ctrl+K)。一部の大規模な HTML コードでは、入れ子になっているタグが多すぎる場合があります。Emmet を使用してタグを削除します。

alt+上/下、Ctrl+上/下、および Alt+Shift+上/下 です。 8)、コードの位置を上下に移動、ctrl+shift+alt+up/down 9)、数学的な計算式

ctrl+shift+y

2.4 DocBlocker インストール

a、

b、パネルに「install package」と入力してEnterキーを押します

c、次に、「DocBlocker」と入力し、インストールが完了するまで待ちます
を使用して、コメントする関数の上にある '/**'+Tab キーを押してコードをコメント化します。
2.5 SublimeCodeIntel

a、

パネルに「install package」と入力し、Enter キーを押します

c、 次に、「SublimeCodeIntel」と入力して待ちますインストールが完了するまで。 2.6 JSFormat
インストール

a、まず、次のパスでユーザーキーバインドファイルを開きます:
Preferences → Key Bindings ? User
b、次に、次のコードを追加します (必要な場合は、ショートカットキーの組み合わせを定義できます)自分自身):
{"keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}}

c、JSFormatのインストール
● Passショートカットキーの組み合わせ ctrl+shift+P でコマンドパネルが表示されます
●パネルに「install package」と入力して Enter キーを押します
●次に「format」（フォーマットを意味します）と入力し、必要な内容の答えをポップアップリストフォーマット操作に言語を使用するには、ここでは js をフォーマットし、JSFormat を選択し、インストールが完了するまで待ちます。

を使用してフォーマットされていないコードを選択し、「Ctrl+Shift+r」を押してコードをフォーマットします。